Here is example to make mobile friendly responsive sidebar menu with icons using jQuery


File structure

Jquery-sidebar/

┣ icons/
┃ ┣ ic_format_align_left_black_24dp_1x.png
┃ ┣ ic_format_align_left_black_24dp_2x.png
┃ ┣ ic_format_align_right_black_24dp_1x.png
┃ ┗ ic_format_align_right_black_24dp_2x.png
┗ index.php


index.php

<!DOCTYPE html>
<html>
    <head>
        <title>Sidebar tutorial</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        <style>
            body{
                background: #ccc;
                margin: 0;
                padding: 0;
            }

            body a{
                font-family: 'Roboto', sans-serif;
            }
            main{
                width: 100%;
                margin: 0px auto;
            }

            main section#sidebar{
                width: 30%;
                position: fixed;
                top: 0;
                left: 0;
                transition: 0.3s;
                background: #fff;
                height: 100%;
                padding: 20px;
                box-sizing: border-box;
                border-right: 1px solid #fff;
                overflow-y: auto;
                overflow-x: hidden;
            }

            main section#main-container{
                position: absolute;
                width: 70%;
                top: 0px;
                left: 30%;
                transition: 0.3s;
                box-sizing: border-box;
                border-right: 1px solid #fff;
            }

            #sidebar ul li{
                list-style-type: none;

            }

            #sidebar ul li .fa{
                display: block;
                margin-top: 25px;
                padding: 5px;
            }

            #sidebar ul li a{

                font-size: 17px;
                color: #666666;
                text-decoration: none;
            }
            header{
                position: fixed;
                width: 100%;
            }

            header nav{
                background: #bef5b6;
                padding: 10px;
                position: relative;

            }

            nav ul{
                margin: 0;
                padding: 0;
            }


            nav ul li{
                list-style-type: none;
            }

            nav ul li a{
                text-decoration: none;
                color: #333333;
                font-size: 17px;
            }

            nav ul:last-child{
                position: absolute;
                top: 12px;
                z-index: 200;
                right: 32%;

            }

            nav ul:last-child li{
                margin-left: 10px;
            }

            nav ul:last-child li a{
                margin-left: 5px;
                text-decoration: none;
            }

            main.main #sidebar{width: 5%; transition: 0.3s;}
            main.main #sidebar ul{

                margin-top: 40px;
                padding: 0;

            }


            main.main #sidebar h2{
                display: none;
            }

            main.main #main-container{
                width: 95%; left: 5%;transition: 0.3s;
            }
            main.main  nav ul:last-child{
                right: 7%;
            }



        </style>

        <script>
            $(document).ready(function () {
                $('#lign-icon').on("click", function () {
                    if ($('main').hasClass('main')) {
                        $('main').removeClass("main");
                        $('#sidebar').find("span").show(50);

                        $(this).html('  <img src="icons/ic_format_align_left_black_24dp_1x.png">');

                    } else {
                        $('main').addClass("main");
                        $('#sidebar .fa').addClass("fa-lg");
                        $('#sidebar').find("span").hide();
                        $(this).html('  <img src="icons/ic_format_align_right_black_24dp_1x.png">');
                    }
                });
            });
        </script>
    </head>
    <body>
        <main>
            <section id="sidebar">
                <h2>Shop Now</h2>
                <ul>
                    <li><a href="#" class="fa fa-gift"><span>&nbsp;&nbsp;All offers</span></a></li>
                    <li><a href="#" class="fa fa-video-camera"><span>&nbsp;&nbsp;Cameras</span></a></li>
                    <li><a href="#" class="fa fa-desktop"><span>&nbsp;&nbsp;Computers</span></a></li>
                    <li><a href="#" class="fa fa-female"><span>&nbsp;&nbsp;Women's fashion</span></a></li>
                    <li><a href="#" class="fa fa-male"><span>&nbsp;&nbsp;Man's fashion</span></a></li>

                </ul>
            </section>
            <section id="main-container">
                <header>
                    <nav>
                        <ul class="nav-left">
                            <li>
                                <a href="#" id="lign-icon">
                                    <img src="icons/ic_format_align_left_black_24dp_1x.png">
                                </a>
                            </li>
                        </ul>
                        <ul>
                            <li class="fa fa-sign-in"><a href="#">Login</a></li>
                            <li class="fa fa-user-plus"><a href="#">Signup</a></li>
                        </ul>
                    </nav>
                </header>
                <div style="width: 100%;height: auto;">;
                    <img src="ben-white-181034.jpg" alt="My Image" style="width: 100%;height: auto;">
                </div>
                <div style="height: 1500px;"></div>
            </section>
        </main>
    </body>
</html>

Output:


Download source code

Are you facing problems in understanding this article? download source code now