Custom sidebar menu with hamburger using jquery and css

Updated on ... 08th March 2023

In our previous tutorial, we have seen Sticky bottom navbar using jquery, In this tutorial, we are going to create a custom sidebar menu with a hamburger icon.

Tree directory structure script With PHP

In this tutorial, we are creating a sidebar custom menu for this we will use custom css and jquery functions for opening the sidebar and closing the sidebar, we will also add a dropdown so for this we will use the jquery toggle method.

This tutorial is very helpful when you want to addon a stylish sidebar on desktop and mobile also there is no plugin required except jquery.

So, let's start, simply just copy and past the below-provided code in your HTML or PHP page

                                                
                                                
                                                <!-- bs5 css -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- fonts link -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<!-- fontawasome 4.7.0 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<!-- jquery -->
https://code.jquery.com/jquery-3.6.0.min.js
https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

<header id="header" class="d-flex align-items-center">
    <div class="container d-flex align-items-center justify-content-between">
        <div class="brand">
            <a href="#"><img src="images/bootstrapfriendly_logo.png" alt="logo" title="logo" class="img-fluid"></a>
        </div>


        <div class="menu-bars button_container" id="toggle">
            <span class="top"></span>
            <span class="middle"></span>
            <span class="bottom"></span>
        </div>

        <div id="slide-menu">
            <div class="slide-menu-close">
                <span class="top"></span>
                <span class="bottom"></span>
            </div>
            <nav class="primary-menu">
                <ul id="menu-header-menu">
                    <li><a href="#">Home</a></li>
                    <!-- <li><a href="#">About Us</a></li> -->
                    <li class="dropdownmenu">
                        <a href="#">Categories<svg class="icon icon-angle-down" aria-hidden="true" role="img">
                                <use href="#icon-angle-down" xlink:href="#icon-angle-down"></use>
                            </svg></a>
                        <ul class="sub-menu">
                            <li><a href="#">sub cat 01</a></li>
                            <li><a href="#">sub cat 02</a></li>
                            <li><a href="#">sub cat 03</a></li>
                            <li><a href="#">sub cat 04</a></li>
                            <li><a href="#">sub cat 05</a></li>
                        </ul>
                    </li>

                    <li class="dropdownmenu">
                        <a href="#">Categories 2<svg class="icon icon-angle-down" aria-hidden="true" role="img">
                                <use href="#icon-angle-down" xlink:href="#icon-angle-down"></use>
                            </svg></a>
                        <ul class="sub-menu">
                            <li><a href="#">sub cat 01</a></li>
                            <li><a href="#">sub cat 02</a></li>
                            <li><a href="#">sub cat 03</a></li>
                            <li><a href="#">sub cat 04</a></li>
                            <li><a href="#">sub cat 05</a></li>
                        </ul>
                    </li>

                    <li><a href="#">One This Day</a></li>
                    <li><a href="#">Explore The World</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </nav>
        </div>

    </div>
</header>

Now we will create a jquery function for opening the sidebar menu and closing the sidebar men and for dropdown we will use the jquery toggle method.

                                                
                                                
                                                $(document).ready(function () {

    $(".menu-bars").click(function () {
        $("#slide-menu").addClass("active");
    });

    $(".slide-menu-close").click(function () {
        $("#slide-menu").removeClass("active");
    });

    $(".skip-form-close").click(function () {
        $(".skip-header-dd").removeClass("active");
    });

    var togle = false;
    $(".dropdownmenu").click(function () {
        if (togle == false) {
            $(this).addClass("active");
            togle = true;
        } else {
            $(this).removeClass("active");
            togle = false;
        }
    });
});