user17241381
Reputation:
Please make this side menu dynamic
Good people of StackOverflow I greet you all today!
PLEASE HELP ME !!!
I wrote a code in HTML & CSS and I'm stuck at this point...
BELOW IS THE HTML...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="../fontawesome-free-5.13.0-web/css/all.min.css" />
<link rel="stylesheet" href="./style.css" />
<title>dashboard</title>
</head>
<body>
<aside class="sidebar">
<span class="fas fa-chevron-right"></span>
<menu>
<li><a href=""><span class="fas fa-user"></span><span>dashboard</span></a></li>
<li>
<a href=""><span class="fas fa-user"></span><span>posts</span><span class="fas fa-chevron-up"></span></a>
<menu>
<li><a href="">category posts</a></li>
<li><a href="">subcategory posts</a></li>
<li><a href="">minicategory posts</a></li>
</menu>
</li>
<li>
<a href=""><span class="fas fa-user"></span><span>sections extra</span><span class="fas fa-chevron-up"></span></a>
<menu>
<li><a href="">debate</a></li>
<li><a href="">extensions</a></li>
</menu>
</li>
<li>
<a href=""><span class="fas fa-user"></span><span>users</span><span class="fas fa-chevron-up"></span></a>
<menu>
<li><a href="">banned users</a></li>
<li><a href="">queried users</a></li>
<li><a href="">all users</a></li>
</menu>
</li>
<li>
<a href=""><span class="fas fa-user"></span><span>media</span><span class="fas fa-chevron-up"></span></a>
<menu>
<li><a href="">big picture</a></li>
<li><a href="">add new page</a></li>
</menu>
</li>
<li><a href=""><span class="fas fa-user"></span><span>inbox</span></a></li>
<li>system</li>
<li><a href=""><span class="fas fa-user"></span><span>broadcast</span></a></li>
<li><a href=""><span class="fas fa-user"></span><span>view traffic board</span></a></li>
<li>
<a href=""><span class="fas fa-user"></span><span>mini admin</span><span class="fas fa-chevron-up"></span></a>
<menu>
<li><a href="">view mini admin</a></li>
<li><a href="">register mini admin</a></li>
<li><a href="">remove mini admin</a></li>
</menu>
</li>
<li>
<a href=""><span class="fas fa-user"></span><span>moderators</span><span class="fas fa-chevron-up"></span></a>
<menu>
<li><a href="">view moderators</a></li>
<li><a href="">register moderators</a></li>
<li><a href="">remove moderators</a></li>
</menu>
</li>
<li><a href=""><span class="fas fa-user"></span><span>ads management</span></a></li>
<li><a href=""><span class="fas fa-user"></span><span>settings</span></a></li>
</menu>
</aside>
</body>
</html>
FINALLY, HERE'S THE CSS...
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
aside{
font-family: 'Helvetica';
background-color: #ecf0f3;
width: 200px;
position: fixed;
top: 0;
left: 0;
overflow-y: auto;
height: 100vh;
box-shadow: -3px -3px 7px #ffffff,3px 3px 5px #ceced1,inset -3px -3px 7px #ffffff,inset 3px 3px 5px #ceced1;
}
aside::-webkit-scrollbar{
width: 5px;
/* helps remove scrollbar which resizes or shifts list items - webkit browsers only */
display: none;
}
aside menu{
white-space: nowrap;
width: 100%;
text-transform: capitalize;
font-size: 14px;
}
aside > span.fa-chevron-right{
font-size: 25px;
padding-left: 10px;
margin-bottom: 20px;
margin-top: 20px;
cursor: pointer;
}
aside menu li{
/* BLOCK AVAILABLE FOR ENTRY */
}
aside menu li:not(aside menu li menu li){
width: 100%;
margin-top: 10px;
padding-right: 10px;
}
aside menu li:not(:last-of-type){
/* BLOCK AVAILABLE FOR ENTRY */
}
aside menu li a{
display: block;
width: 100%;
position: relative;
padding-left: 10px;
height: 30px;
line-height: 30px;
}
aside menu li a:not(aside menu li menu li a){
box-shadow: -3px -3px 7px #ffffff,3px 3px 5px #ceced1;
position: relative;
}
aside menu li a:not(aside menu li menu li a):hover::before,
aside menu li a:not(aside menu li menu li a):focus::before{
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: inset -3px -3px 7px #ffffff,inset 3px 3px 5px #ceced1;
}
aside menu li a:not(aside menu li menu li a):hover::before,
aside menu li a:not(aside menu li menu li a):focus::before{
border-radius: 6px;
}
aside menu li a:not(aside menu li menu li a):hover{
color: #3498db;
}
aside menu li a span.fas{
padding: 0 10px 0 0;
}
aside menu li menu{
width: 100%;
}
aside menu li menu li{
/* BLOCK AVAILABLE FOR ENTRY */
}
aside menu li menu li a{
width: 100%;
padding-left: 30px;
}
aside menu li menu li a:hover{
background-color: #dfdfdf;
color: #444;
}
aside span.fa-chevron-up{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
}
It looks like a finished piece of work when in fact I'm in need of specific dynamic features which I think can be deployed using JavaScript. SO HERE'S WHAT I WANT TO ACHIEVE...
Firstly:
I want each submenu to be hidden or closed by default.
Secondly:
I want the selected menu link to reveal the submenu (in a smooth sliding dropdown format), and also, the ARROW ICON next to it should rotate downwards (indicating that a submenu is active or opened). When the same link is clicked again, it should close the submenu (in a smooth format as well) and the ARROW ICON should return to normal.
Thirdly: (Now this is the fun part.)
ONLY ONE SUBMENU MUST BE OPEN AT A TIME!!! In other words, after one submenu is opened, it must close only when;
- the same menu link is clicked again OR
- another menu link is clicked (- which opens while the current one closes)
(Kinda like a SMOOTH TRANSITIONING ACCORDION that shows only one content at a time, now you got the idea.)
Also note that :
- the ARROW ICON for an ACTIVE or OPENED submenu must rotate, with transitioning, downwards and
- the ARROW ICON for any INACTIVE or CLOSED submenu must rotate, with transitioning, back to normal
OH, I FORGOT TO MENTION!
When you hover over a menu link, you will notice an effect where the text turns blue and the neomorphic style kinda resembles a pushed button. Please also for an active menu let it be exactly the way it is when a menu link is hovered on. And when a menu link is inactive or closed, let it return to its normal state.
THANK YOU IN ADVANCE!!!
P.S. I used FontAwesome for icons :D
Upvotes: 0
Views: 592
Answers (1)
n1md7
Reputation: 3461
I believe this is what you are looking for.
There is a bit javascript and css. Js removes all li elements .active class and toggles only to the clicked element on event firing.
In Css only added transitions for rotate and height animations.
const menuItems = document.querySelectorAll('aside > menu > li > a');
const deactivate = target => target.parentNode.classList.remove('active');
const toggle = target => target.parentNode.classList.toggle('active');
menuItems.forEach(menu => {
menu.addEventListener('click', function(e){
e.preventDefault();
menuItems.forEach(element => element.isEqualNode(menu)? toggle(element): deactivate(element));
});
});*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
aside{
font-family: 'Helvetica';
background-color: #ecf0f3;
width: 200px;
position: fixed;
top: 0;
left: 0;
overflow-y: auto;
height: 100vh;
box-shadow: -3px -3px 7px #ffffff,3px 3px 5px #ceced1,inset -3px -3px 7px #ffffff,inset 3px 3px 5px #ceced1;
}
aside::-webkit-scrollbar{
width: 5px;
/* helps remove scrollbar which resizes or shifts list items - webkit browsers only */
display: none;
}
aside menu{
white-space: nowrap;
width: 100%;
text-transform: capitalize;
font-size: 14px;
}
aside > span.fa-chevron-right{
font-size: 25px;
padding-left: 10px;
margin-bottom: 20px;
margin-top: 20px;
cursor: pointer;
}
aside menu li{
/* BLOCK AVAILABLE FOR ENTRY */
}
aside menu li:not(aside menu li menu li){
width: 100%;
margin-top: 10px;
padding-right: 10px;
}
aside menu li:not(:last-of-type){
/* BLOCK AVAILABLE FOR ENTRY */
}
aside menu li a{
display: block;
width: 100%;
position: relative;
padding-left: 10px;
height: 30px;
line-height: 30px;
}
aside menu li a:not(aside menu li menu li a){
box-shadow: -3px -3px 7px #ffffff,3px 3px 5px #ceced1;
position: relative;
}
aside menu li a:not(aside menu li menu li a):hover::before,
aside menu li a:not(aside menu li menu li a):focus::before{
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: inset -3px -3px 7px #ffffff,inset 3px 3px 5px #ceced1;
}
aside menu li a:not(aside menu li menu li a):hover::before,
aside menu li a:not(aside menu li menu li a):focus::before{
border-radius: 6px;
}
aside menu li.active a:not(aside menu li menu li a),
aside menu li a:not(aside menu li menu li a):hover{
color: #3498db;
}
aside menu li a span.fas{
padding: 0 10px 0 0;
}
aside menu li menu{
width: 100%;
}
aside menu li menu li{
/* BLOCK AVAILABLE FOR ENTRY */
}
aside menu li menu li a{
width: 100%;
padding-left: 30px;
}
aside menu li menu li a:hover{
background-color: #dfdfdf;
color: #444;
}
aside span.fa-chevron-right:not(aside > span.fa-chevron-right){
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
}
/* extra style */
aside > menu > li > menu {
transition: max-height 400ms;
max-height: 0;
overflow: hidden;
}
aside > menu > li.active > menu{
max-height: 300px;
}
aside > menu > li > a > span:nth-child(2)::after{
transition: transform 300ms ease-out;
content: '▶';
display: inline-block;
transform: rotate(0);
}
aside > menu > li.active a > span:nth-child(2)::after{
transform: rotate(90deg);
}<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="../fontawesome-free-5.13.0-web/css/all.min.css" />
<link rel="stylesheet" href="./style.css" />
<title>sidemenu</title>
</head>
<body>
<aside class="sidebar">
<span class="fas fa-chevron-right"></span>
<menu>
<li><a href="#"><span class="fas fa-user"></span><span>dashboard</span></a></li>
<li>
<a href="#"><span class="fas fa-user"></span><span>posts</span><span class="fas fa-chevron-right"></span></a>
<menu>
<li><a href="#">category posts</a></li>
<li><a href="#">subcategory posts</a></li>
<li><a href="#">minicategory posts</a></li>
</menu>
</li>
<li>
<a href="#"><span class="fas fa-user"></span><span>sections extra</span><span class="fas fa-chevron-right"></span></a>
<menu>
<li><a href="#">debate</a></li>
<li><a href="#">extensions</a></li>
</menu>
</li>
<li>
<a href="#"><span class="fas fa-user"></span><span>users</span><span class="fas fa-chevron-right"></span></a>
<menu>
<li><a href="#">banned users</a></li>
<li><a href="#">queried users</a></li>
<li><a href="#">all users</a></li>
</menu>
</li>
<li>
<a href="#"><span class="fas fa-user"></span><span>media</span><span class="fas fa-chevron-right"></span></a>
<menu>
<li><a href="#">big picture</a></li>
<li><a href="#">add new page</a></li>
</menu>
</li>
<li><a href="#"><span class="fas fa-user"></span><span>inbox</span></a></li>
<li>system</li>
<li><a href="#"><span class="fas fa-user"></span><span>broadcast</span></a></li>
<li><a href="#"><span class="fas fa-user"></span><span>view traffic board</span></a></li>
<li>
<a href="#"><span class="fas fa-user"></span><span>mini admin</span><span class="fas fa-chevron-right"></span></a>
<menu>
<li><a href="#">view mini admin</a></li>
<li><a href="#">register mini admin</a></li>
<li><a href="#">remove mini admin</a></li>
</menu>
</li>
<li>
<a href="#"><span class="fas fa-user"></span><span>moderators</span><span class="fas fa-chevron-right"></span></a>
<menu>
<li><a href="#">view moderators</a></li>
<li><a href="#">register moderators</a></li>
<li><a href="#">remove moderators</a></li>
</menu>
</li>
<li><a href="#"><span class="fas fa-user"></span><span>ads management</span></a></li>
<li><a href="#"><span class="fas fa-user"></span><span>settings</span></a></li>
<strong>test</strong>
</menu>
</aside>
</body>Upvotes: 1
Related Questions
- Create Sidebar Nav menu
- CSS dynamic sub-menu is not showing properly
- How to create sub menu in side menu in html & css
- creating an side menu using html and jquery
- How to create a navigation side menu?
- side menu with drop down menu
- How to make submenu for jQuery sliding side menu?
- horizontal menu submenu
- Sidebar menu with submenu items
- How to display a side bar menu