Skip to main content

HTML Sidebar menu without jQuery

Most examples I found on the net for a responsive sidebar had a reference to jQuery.
For two lines of code, I find it an unnecessary overhead.

So this is a basic page with no dependencies that has a toggle-able sidebar as well as a media query javascript that hides the sidebar below a breakpoint screen width.

Modify as necessary. Maybe tricks could be added such as the one to change the hamburger to X when the sidebar is visible.

https://jsbin.com/romiqov/2/edit?html,output


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SideBar test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }


        #sidebar {
            position: fixed;
            width: 200px;
            height: 100%;
            top: 50px;
            left: 0px;
            transition: all 100ms linear;
        }

            #sidebar.hidden {
                left: -200px;
            }

            #sidebar ul li {
                color: rgba(0,20,20,0.8);
                list-style: none;
                padding: 15px 10px;
                border-bottom: 1px solid #152312;
            }

        #navbar {
            position: fixed;
            height: 50px;
            width: 100%;
            background-color: rgba(0,20,20,0.8);
        }

            #navbar .toggle-btn {
                float:right;
                margin-top:6px;
                margin-right:40px;
            }

                #navbar .toggle-btn span {
                    display: block;
                    width: 30px;
                    height: 5px;
                    background: #97c48f;
                    margin: 5px 0;
                }
    </style>
    <script>
        function toggleSidebar() {
            document.getElementById("sidebar").classList.toggle("hidden");
        }
    </script>
</head>
<body>
    <div id="navbar">
        <div class="toggle-btn" onclick="toggleSidebar()">
            <span></span>
            <span></span>
            <span></span>
        </div>

    </div>
    <div id="sidebar" class="hiddenmq">

        <ul>
            <li>Home</li>
            <li>Products</li>
            <li>Pricing</li>
            <li>Contact</li>
        </ul>
    </div>



<script>
    function sidebar_mqhide(x_width) { if (x_width.matches) { document.getElementById("sidebar").className = "hidden"; } }
    var x_width = window.matchMedia("(max-width: 700px)");
    sidebar_mqhide(x_width);
    x_width.addListener(sidebar_mqhide);
</script>

</body>
</html>

Comments

Post a Comment