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">
<menu>
<li><a href=""><span>dashboard</span></a></li>
<li>
<a href=""><span>posts</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>sections extra</span></a>
<menu>
<li><a href="">debate</a></li>
<li><a href="">extensions</a></li>
</menu>
</li>
<li>
<a href=""><span>users</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>media</span></a>
<menu>
<li><a href="">big picture</a></li>
<li><a href="">add new page</a></li>
</menu>
</li>
<li><a href=""><span>inbox</span></a></li>
<li>system</li>
<li><a href=""><span>broadcast</span></a></li>
<li><a href=""><span>view traffic board</span></a></li>
<li>
<a href=""><span>mini admin</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>moderators</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>ads management</span></a></li>
<li><a href=""><span>settings</span></a></li>
</menu>
</aside>
</body>
</html>
FINALLY 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;
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{
}
aside menu li:not(aside menu li menu li){
width: 100%;
margin-top: 10px;
padding-right: 10px;
}
aside menu li:not(:last-of-type){
}
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{
}
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;
1) the same menu link is clicked again
OR
2) 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 :
1) the ARROW ICON for an ACTIVE or OPENED submenu must rotate, with transitioning, downwards
and
2) 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
What I have tried:
Everything I know...
I tried changing and adding things still not working.