First by default Dashboard is in Active class Second when click on any sidebar menu gt li then submenuitem will show slide downbut active class will not changeThird when click on any submenuitem gt li then the corresponding Parent sidebar menu gt li will be in active class ExampleDashboard class active DefaultStudent sidebarmenu new student submenuitem student list submenuitem aaaa submenuitem bbbbb

Sidebar menu with Active and Show Class

sourav68...

SOLVED CLOSED ACTIVE ANSWERED
User: sourav688
Posted: on Mar 24, 2025 06:51 AM
Forum: ASP.Net Web Forms
Replies: 20
Views: 380

First, by default "Dashboard" is in "Active" class, Second, when "click" on any "sidebar menu > li", then "sub_menu_item" will show (slide down).

but "active" class will not change.

Third, when "click" on any "sub_menu_item > li" then the corresponding Parent "sidebar menu > li" will be in "active" class.

Example:

Dashboard - class active - Default

Student (sidebar_menu)

new student (sub_menu_item)

student list (sub_menu_item)

aaaa (sub_menu_item)

bbbbb (sub_menu_item)

Employee(sidebar_menu)

employee List (sub_menu_item)

new employee (sub_menu_item)

dddddd (sub_menu_item)

eeeeee (sub_menu_item)

When "click" on "Student (sidebar menu)", all "sub_menu_item" will show (slide down) and its class will change to "sub_menu_item show".

If "click" on any

new student (sub_menu_item)

student list (sub_menu_item)

aaaa (sub_menu_item)

bbbbb (sub_menu_item)

then "Student (sidebar menu)" - will be in "active" class.

<nav class="navsidebar_menu">
    <ul class="sidebar-menu">
        <li class="active">
            <a href="index.html">
                <i class="fa fa-home"></i>Dashboard
            </a>
        </li>
        <li>
            <a class="collapse_link" href="">
                <i class="fa fa-th-large"></i>Student <span class="ic-down-arrow_blue"></span>
            </a>
            <ul class="sidebar-submenu">
                <li>
                    <a href="items-list.html">Student List </a>
                </li>
                <li>
                    <a href="item-editor.html">New Student </a>
                </li>
                <li>
                    <a href="item-editor.html">AAAAAAA </a>
                </li>
            </ul>
        </li>
        <li>
            <a class="collapse_link" href="">
                <i class="fa fa-area-chart"></i>Employee <span class="ic-down-arrow_blue"></span>
            </a>
            <ul class="sidebar-submenu">
                <li>
                    <a href="charts-flot.html">Employee List </a>
                </li>
                <li>
                    <a href="charts-morris.html">New Employee </a>
                </li>
                <li>
                    <a href="charts-morris.html">BBBBBBBBBBBB </a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

const linkCollapse = document.getElementsByClassName('collapse_link')
var i
for (i = 0; i < linkCollapse.length; i++) {
    linkCollapse[i].addEventListener('click', function () {
        const collapseMenu = this.nextElementSibling
        collapseMenu.classList.toggle('showCollapse')
    })
}

its not working,

Download FREE API for Word, Excel and PDF in ASP.Net

sourav68...

0 6

Reply
User: sourav688
Replied: on Mar 25, 2025 09:54 AM
Report

not showing any particular line error.

sourav68...

0 7

Reply
User: sourav688
Replied: on Mar 25, 2025 10:15 AM
Report

[Deprecation] Listener added for a 'DOMNodeInserted' mutation event. Support for this event type has been removed, and this event will no longer be fired.

Joey

0 8

Reply
User: Joey
Replied: on Mar 25, 2025 11:35 AM
Report

Hi sourav688,

Can you please share the html and css with javascript code so that i can verify it?

sourav68...

0 9

Reply
User: sourav688
Replied: on Mar 25, 2025 11:49 AM
Report

<nav class="navsidebar_menu">
                        <ul class="sidebar-menu">
                            <li class="active">
                                <a href="index.html">
                                    <i class="fa fa-home"></i> Dashboard
                                </a>
                            </li>
                            <li>
                                <a class="collapse_link" href="">

                                    <i class="fa fa-th-large"></i> Student <span class="ic-down-arrow_blue"></span>
                                </a>
                                <ul class="sidebar-submenu">
                                    <li>
                                        <a href=""> Student List </a>
                                    </li>
                                    <li>
                                        <a href=""> New Student </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a class="collapse_link" href="">
                                    <i class="fa fa-area-chart"></i> Employee <span class="ic-down-arrow_blue"></span>
                                </a>
                                <ul class="sidebar-submenu">
                                    <li>
                                        <a href=""> Employee List </a>
                                    </li>
                                    <li>
                                        <a href=""> New Employee </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a class="collapse_link" href="">
                                    <i class="fa fa-table"></i> Admission <span class="ic-down-arrow_blue"></span>
                                </a>
                                <ul class="sidebar-submenu">
                                    <li>
                                        <a href=""> List Accepted</a>
                                    </li>
                                    <li>
                                        <a href=""> Rejected </a>
                                    </li>
                                </ul>
                            </li>

                        </ul>
                    </nav>




.sidebar_area {
    width:240px;
    top:0px;
    left:0px;
    bottom:0px;
    padding-bottom:60px;
    position:absolute;
    background-color:#3a4651;
    -webkit-transition: left 0.4s ease;
    transition: left 0.4s ease;
    z-index:20;
}

    .sidebar_area.toggled,
    .header_right.expand {
        /*margin-left: -230px*/
    }

    .sidebar_area.toggled,
    .sidebar_footer_area.toggled .sidebar_footer_menu {
        left: -240px;
        transition: all 0.5s ease-in-out;
    }
    .header_right.expand {
        left: 0px;
        transition: all 0.49s ease-in-out;
    }

    .sidebar_area .sidebar_container {
        width: 100%;
        left: 0px;
        top: 0px;
        bottom: 50px;
        position: absolute;
        overflow-x: hidden;
        overflow-y: auto;
    }
        .sidebar_area .sidebar_container .sidebar_header {
            line-height: 50px;
            padding:5px;
        }
        .sidebar_area .sidebar_container .logo_area {
            width: 40px;
            height: 40px;
            top: 15px;
            /*vertical-align: middle;*/
            position: relative;
            display: inline-block;  
        }
        .sidebar_area .sidebar_container .title_area {
            width: 180px;
            height: 45px;
            top: 15px;
            position: relative;
            float: right;
            text-align: left;
            font-size: 16px;
            color: #fff;
            display: inline-block;
        }

    .sidebar_area .sidebar_footer_area{
        display:block;
    }

.glowing_seperator {
    height: 0;
    /*overflow: hidden;*/
    border-top: 1px solid #ffffff;
    -webkit-box-shadow: 0px 0px 10px 1px rgba(252,252,252,0.9);
    -moz-box-shadow: 0px 0px 10px 1px rgba(252,252,252,0.9);
    box-shadow: 0px 0px 10px 1px rgba(252,252,252,0.9);
}


.sidebar_footer_menu {
    width: 240px;
    left: 0px;
    bottom: 0px;
    position: fixed;
    padding: 5px 0 0 0;
    display: block;
    background: #2A3F54;
    -webkit-transition: left 0.4s ease;
    transition: left 0.4s ease;
}

    .sidebar_footer_menu a {
        width: 25%;
        height: 40px;
        padding: 7px 0 3px;
        float: left;
        font-size: 17px;
        text-align: center;
        display: block;
        background: #172D44;
    }


[class^='nav'] li > a,
[class*=' nav'] li > a {
    display: block;
}

    [class^='nav'] li > a:before,
    [class*=' nav'] li > a:before {
        display: none;
    }





.navsidebar_menu{
    display:block;
}
.sidebar-menu{
    margin:0px;
    padding:0;
    font-size:14px;
    list-style:none;
}

    .sidebar-menu ul{
        height:0;
        padding:0;
        /*overflow:hidden;*/
    }
    .sidebar-menu > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 20px;
        padding-right: 15px;
    }

    .sidebar-menu li a {
        display:block;
        text-decoration:none;
        color:rgba(255,255,255,0.5);
    }
    .sidebar-menu > li > a i{
        font-size:16px;
        margin-right:5px;
    }
    .sidebar-menu li a:hover,
    .sidebar-menu li.show > a,
    .sidebar-menu li.show a:hover {
        background-color: #2d363f;
        color: #ffffff;
        display: block;
    }
    .sidebar-menu > li.active > a,
    .sidebar-menu > li.active > a:hover{
        color:#ffffff;
        background-color:#ff6a00;
    }

    .sidebar-menu .ic-down-arrow_blue {
        margin-right: 0px;
        float: right;
        line-height: initial;
        /*transition: 0.3s;*/
        font-size: 12px;
        transform: rotate(-90deg);
        /*-webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;*/
    }

    .sidebar-menu li.show > a .ic-down-arrow_blue {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }







.sidebar-submenu {
    overflow: hidden;
    /*height:0;*/
    transition: 300ms ease-in-out;
}

.sidebar-menu .sidebar-submenu.show {
    height: auto;
}


    .sidebar-menu > li.show > a {
        background-color: #333e48;
        display: inherit;
    }

    .sidebar-menu .li.show .sidebar-submenu {
        display: block;
    }











/*.sidebar-menu li.active ul {
    height: auto;
}

    .sidebar-menu > li > .sidebar-submenu > li a{
        padding-top:10px;
        padding-bottom:10px;
        padding-left:50px;
        padding-right:15px;
        background-color:#333e48;
    }

    .sidebar-menu > li > .sidebar-submenu > li.active a {
        color: #ffffff;
    }

    .sidebar-menu > li > .sidebar-submenu > li > .sidebar-submenu > li a {
        padding-left: 60px;
        padding-right: 15px;
    }*/




.showCollapse {
    display: block;
}






const linkCollapse = document.getElementsByClassName('collapse_link');
for (var i = 0; i < linkCollapse.length; i++) {
    linkCollapse[i].addEventListener('click', function () {
        //Remove all active class.
        Array.from(document.getElementsByClassName("active")).forEach(function (el) 
        {
            el.classList.remove('active');
        });
        //Add active class to clicked parentElement.
        this.parentElement.classList.toggle('active');

        const collapseMenu = this.nextElementSibling;

        //Remove all showCollapse class.
        Array.from(document.getElementsByClassName('showCollapse')).forEach(function (el) {
            el.classList.remove('showCollapse');
        });
        //Add showCollapse class to clicked SiblingElement.
        collapseMenu.classList.toggle('showCollapse');

        //Remove all sub_menu_item class.
        Array.from(document.getElementsByClassName('sidebar-submenu')).forEach(function (el) {
            el.classList.remove('sidebar-submenu');
            el.classList.remove('showCollapse');
        });

        //Add show class to all sub menu items.
        Array.from(collapseMenu.getElementsByTagName('li')).forEach(function (el) 
        {
            el.classList.add('sidebar-submenu');
            el.classList.add('show');
        });
    })
}

Joey

0 10

Reply
User: Joey
Replied: on Mar 26, 2025 05:46 AM
Report

Refer below code.

HTML

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <nav class="navsidebar_menu">
        <ul class="sidebar-menu">
            <li class="active">
                <a href="javascript:void(0)">
                    <i class="fa fa-home"></i> Dashboard
                </a>
            </li>
            <li>
                <a class="collapse_link" href="javascript:void(0)">
                    <i class="fa fa-th-large"></i> Student <span class="ic-down-arrow_blue"></span>
                </a>
                <ul class="sidebar-submenu">
                    <li>
                        <a href="javascript:void(0)"> Student List </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)"> New Student </a>
                    </li>
                </ul>
            </li>
            <li>
                <a class="collapse_link" href="javascript:void(0)">
                    <i class="fa fa-area-chart"></i> Employee <span class="ic-down-arrow_blue"></span>
                </a>
                <ul class="sidebar-submenu">
                    <li>
                        <a href="javascript:void(0)"> Employee List </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)"> New Employee </a>
                    </li>
                </ul>
            </li>
            <li>
                <a class="collapse_link" href="javascript:void(0)">
                    <i class="fa fa-table"></i> Admission <span class="ic-down-arrow_blue"></span>
                </a>
                <ul class="sidebar-submenu">
                    <li>
                        <a href="javascript:void(0)"> List Accepted</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)"> Rejected </a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
    <style>
        .sidebar_area { width: 240px; top: 0px; left: 0px; bottom: 0px; padding-bottom: 60px; position: absolute; background-color: #3a4651; -webkit-transition: left 0.4s ease; transition: left 0.4s ease; z-index: 20; }
        .sidebar_area.toggled, .header_right.expand { /*margin-left: -230px*/ }
        .sidebar_area.toggled, .sidebar_footer_area.toggled .sidebar_footer_menu { left: -240px; transition: all 0.5s ease-in-out; }
        .header_right.expand { left: 0px; transition: all 0.49s ease-in-out; }
        .sidebar_area .sidebar_container { width: 100%; left: 0px; top: 0px; bottom: 50px; position: absolute; overflow-x: hidden; overflow-y: auto; }
        .sidebar_area .sidebar_container .sidebar_header { line-height: 50px; padding: 5px; }
        .sidebar_area .sidebar_container .logo_area { width: 40px; height: 40px; top: 15px; /*vertical-align: middle;*/ position: relative; display: inline-block; }
        .sidebar_area .sidebar_container .title_area { width: 180px; height: 45px; top: 15px; position: relative; float: right; text-align: left; font-size: 16px; color: #fff; display: inline-block; }
        .sidebar_area .sidebar_footer_area { display: block; }
        .glowing_seperator { height: 0; /*overflow: hidden;*/ border-top: 1px solid #ffffff; -webkit-box-shadow: 0px 0px 10px 1px rgba(252,252,252,0.9); -moz-box-shadow: 0px 0px 10px 1px rgba(252,252,252,0.9); box-shadow: 0px 0px 10px 1px rgba(252,252,252,0.9); }
        .sidebar_footer_menu { width: 240px; left: 0px; bottom: 0px; position: fixed; padding: 5px 0 0 0; display: block; background: #2A3F54; -webkit-transition: left 0.4s ease; transition: left 0.4s ease; }
        .sidebar_footer_menu a { width: 25%; height: 40px; padding: 7px 0 3px; float: left; font-size: 17px; text-align: center; display: block; background: #172D44; }
        [class^='nav'] li > a, [class*=' nav'] li > a { display: block; }
        [class^='nav'] li > a:before, [class*=' nav'] li > a:before { display: none; }
        .navsidebar_menu { display: block; }
        .sidebar-menu { margin: 0px; padding: 0; font-size: 14px; list-style: none; }
        .sidebar-menu ul { height: 0; padding: 0; /*overflow:hidden;*/ }
        .sidebar-menu > li > a { padding-top: 15px; padding-bottom: 15px; padding-left: 20px; padding-right: 15px; }
        .sidebar-menu li a { display: block; text-decoration: none; color: rgba(255,255,255,0.5); }
        .sidebar-menu > li > a i { font-size: 16px; margin-right: 5px; }
        .sidebar-menu li a:hover, .sidebar-menu li.show > a, .sidebar-menu li.show a:hover { background-color: #2d363f; color: #ffffff; display: block; }
        .sidebar-menu > li.active > a, .sidebar-menu > li.active > a:hover { color: #ffffff; background-color: #ff6a00; }
        .sidebar-menu .ic-down-arrow_blue { margin-right: 0px; float: right; line-height: initial; /*transition: 0.3s;*/ font-size: 12px; transform: rotate(-90deg); /*-webkit-transition: all 0.3s ease; transition: all 0.3s ease;*/ }
        .sidebar-menu li.show > a .ic-down-arrow_blue { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
        .sidebar-submenu { overflow: hidden; /*height:0;*/ transition: 300ms ease-in-out; }
        .sidebar-menu .sidebar-submenu.show { height: auto; }
        .sidebar-menu > li.show > a { background-color: #333e48; display: inherit; }
        .sidebar-menu .li.show .sidebar-submenu { display: block; }
        .hide { display: none; }
        .showCollapse { display: block; }
    </style>
    <script>
        const linkCollapse = document.getElementsByClassName('collapse_link');
        for (var i = 0; i < linkCollapse.length; i++) {
            linkCollapse[i].addEventListener('click', function () {
                //Remove all active class.
                Array.from(document.getElementsByClassName("active")).forEach(function (el) {
                    el.classList.remove('active');
                });

                //Add active class to clicked parentElement.
                this.parentElement.classList.toggle('active');
                const collapseMenu = this.nextElementSibling;

                //Remove all showCollapse class.
                Array.from(document.getElementsByClassName('showCollapse')).forEach(function (el) {
                    el.classList.remove('showCollapse');
                });

                //Add showCollapse class to clicked SiblingElement.
                collapseMenu.classList.toggle('showCollapse');

                //Remove all sub_menu_item and show class.
                Array.from(document.getElementsByClassName('sidebar-submenu')).forEach(function (el) {
                    el.classList.remove('sidebar-submenu');
                    el.classList.remove('show');
                    el.classList.add('hide');
                });

                //Add show class to all sub menu items.
                Array.from(collapseMenu.getElementsByTagName('li')).forEach(function (el) {
                    el.classList.remove('hide');
                    el.classList.add('sidebar-submenu');
                    el.classList.add('show');
                });
            })
        }
    </script>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Description

Description is required.

Sidebar menu with Active and Show Class

Company

Explore

Follow us

Contact Us