Click here to Skip to main content
15,867,308 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
BELOW IS THE HTML...

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...

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;
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.
Posted
Updated 13-Jan-22 0:11am

1 solution

Building something like this from scratch would be quite a bit of work, and might be a little redundant given that there's libraries out there to do this automatically. As a developer you can look for suitable JS/CSS libraries out there to handle this for you.

For example: Sidebars · Bootstrap v5.0[^]

There might be other ones out there better suited for what you're looking for, just have a bit of a Google around for "sidebars" or similar and you should be able to find something to plugin to your site!
 
Share this answer
 
Comments
[no name] 13-Jan-22 7:09am    
'Building something like this from scratch would be quite a bit of work, and might be a little redundant given that there are libraries out there to do this automatically'.

I love writing code from scratch. I'm used to it and I love it (I kinda prefer my own defined UI, NOT READY MADE ONES)

I asked this same question on another site, I got an answer exactly - NO FRAMEWORK NO LIBRARY.

I just wanted to ask the same question on this site to compare with anyone's answer.
Chris Copeland 13-Jan-22 7:49am    
You never specified in your question that you were not interested in using third-party libraries, I just provided you with an alternative solution, not sure why it warranted down-voting.

In any case, your original question seemed to be asking for a complete solution, which isn't something that we provide here. We can assist with issues you're having on code you've already started, or we can provide guidance on how to accomplish something.

As you mention, you've already got your answer from another site so my proposed solution is redundant anyway.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900