Without using database create Bootstrap Vertical menus with collapse and expand using jQuery

Last Reply 5 months ago By Waghmare

Posted 5 months ago

I want to implement bootstrap vertical menus with toggle button to collapse without database.

I have referred following link,

Database driven N-Level Bootstrap Vertical Menu with expand and collapse using C#, VB.Net and jQuery in ASP.Net

i want to implement it like below link:

https://colorlib.com/polygon/gentelella/

https://adminlte.io/themes/AdminLTE/index2.html

Where the header is fixed and left side contains menu and right side contains content section.

Posted 5 months ago Modified on 5 months ago

Refer the below Sample code for your reference and implement it as per your code logic. As you don’t need to you bind details for menus from database then you need to design it as we normally make as using div. also you need to design the menu structure using ul and li as per your menu level.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .nav-side-menu
        {
            overflow: auto;
            font-family: verdana;
            font-size: 12px;
            font-weight: 200;
            background-color: #2e353d;
            position: fixed;
            top: 0px;
            width: 300px;
            height: 100%;
            color: #e1ffff;
        }
        .nav-side-menu .brand
        {
            background-color: #23282e;
            line-height: 50px;
            display: block;
            text-align: center;
            font-size: 14px;
        }
        .nav-side-menu .toggle-btn
        {
            display: none;
        }
        .nav-side-menu ul, .nav-side-menu li
        {
            list-style: none;
            padding: 0px;
            margin: 0px;
            line-height: 35px;
            cursor: pointer;
        }
        .nav-side-menu ul :not(collapsed) .arrow:before, .nav-side-menu li :not(collapsed) .arrow:before
        {
            font-family: FontAwesome;
            content: "\f078";
            display: inline-block;
            padding-left: 10px;
            padding-right: 10px;
            vertical-align: middle;
            float: right;
        }
        .nav-side-menu ul .active, .nav-side-menu li .active
        {
            border-left: 3px solid #d19b3d;
            background-color: #4f5b69;
        }
        .nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active
        {
            color: #d19b3d;
        }
        .nav-side-menu ul .sub-menu li.active a, .nav-side-menu li .sub-menu li.active a
        {
            color: #d19b3d;
        }
        .nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li
        {
            background-color: #181c20;
            border: none;
            line-height: 28px;
            border-bottom: 1px solid #23282e;
            margin-left: 0px;
        }
        .nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover
        {
            background-color: Orange;
        }
        .nav-side-menu ul .sub-menu li:before, .nav-side-menu li .sub-menu li:before
        {
            font-family: FontAwesome;
            content: "\f105";
            display: inline-block;
            padding-left: 10px;
            padding-right: 10px;
            vertical-align: middle;
        }
        .nav-side-menu li
        {
            padding-left: 0px;
            border-left: 3px solid #2e353d;
            border-bottom: 1px solid #23282e;
        }
        .nav-side-menu li a
        {
            text-decoration: none;
            color: #e1ffff;
        }
        .nav-side-menu li a i
        {
            padding-left: 10px;
            width: 20px;
            padding-right: 20px;
        }
        .nav-side-menu li:hover
        {
            border-left: 3px solid #d19b3d;
            background-color: #4f5b69;
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            -ms-transition: all 1s ease;
            transition: all 1s ease;
        }
        @media (max-width: 767px)
        {
            .nav-side-menu
            {
                position: relative;
                width: 100%;
                margin-bottom: 10px;
            }
            .nav-side-menu .toggle-btn
            {
                display: block;
                cursor: pointer;
                position: absolute;
                right: 10px;
                top: 10px;
                z-index: 10 !important;
                padding: 3px;
                background-color: #ffffff;
                color: #000;
                width: 40px;
                text-align: center;
            }
            .brand
            {
                text-align: left !important;
                font-size: 22px;
                padding-left: 20px;
                line-height: 50px !important;
            }
        }
        @media (min-width: 767px)
        {
            .nav-side-menu .menu-list .menu-content
            {
                display: block;
            }
        }
        body
        {
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
    <script type="text/javascript">
        $(function () {
            $('li[data-toggle="collapse"]').each(function () {
                if ($(this).next('ul').length == 0) {
                    $(this).removeAttr('data-toggle').removeAttr('data-target').removeClass('collapsed');
                    $(this).find('span.arrow').remove();
                }
            });
            $('ul#menu-content > ul').on('show.bs.collapse', function (e, obj) {
                $("ul#menu-content > ul").not(this).removeClass("in");
                var currentHead = $(this).prev("li");
                $("ul#menu-content > li").not(currentHead).removeClass("active");
                $(currentHead).addClass("active");
            })
        });
    </script>
</head>
<body>
    <div>
        <div class="nav-side-menu">
            <div class="brand">
                AspSnippets</div>
            <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content">
            </i>
            <div class="menu-list">
                <ul id="menu-content" class="menu-content collapse out">
                    <li data-toggle="collapse" data-target='#Home' class="collapsed"><a href='Home.aspx'>
                        <i class='fa fa-dashboard fa-lg'></i>Home<span class="arrow"></span></a> </li>
                    <li data-toggle="collapse" data-target='#Services' class="collapsed"><a href='javascript:;'>
                        <i class='fa fa-car fa-lg'></i>Services<span class="arrow"></span></a> </li>
                    <ul id='Services' class='sub-menu collapse'>
                        <li><a href='Consulting.aspx'>Consulting</a></li><li><a href='Outsourcing.aspx'>Outsourcing</a></li></ul>
                    <li data-toggle="collapse" data-target='#About' class="collapsed"><a href='About.aspx'>
                        <i class='fa fa-user fa-lg'></i>About<span class="arrow"></span></a> </li>
                    <li data-toggle="collapse" data-target='#Contact' class="collapsed"><a href='javascript:;'>
                        <i class='fa fa-users fa-lg'></i>Contact<span class="arrow"></span></a> </li>
                    <ul id='Contact' class='sub-menu collapse'>
                        <li data-toggle='collapse' data-target='#Phone' class='collapsed'><a href='javascript:;'>
                            Phone<span class='arrow'></span></a></li><ul id='Phone' class='sub-menu collapse'>
                                <li><a href='HomePhone.aspx'>HomePhone</a></li><li data-toggle='collapse' data-target='#MobilePhone'
                                    class='collapsed'><a href='javascript:;'>MobilePhone<span class='arrow'></span></a></li><ul
                                        id='MobilePhone' class='sub-menu collapse'>
                                        <li><a href='PersonalMob.aspx'>Personal</a></li><li><a href='javascript:;'>AddedNew</a></li></ul>
                            </ul>
                    </ul>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

Demo

 

 


Posted 5 months ago

@Waghuldey,

You can search on google and find a suitable template for your need.

And then replace the verticle menu part with our forums database driven menu part .

Hope this will work for you..

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