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

Popular posts from this blog

Siemens Washing Machine : Kill the Buzzer

The washing machine we have has the habit of sending out an irritating beep after it finishes the wash cycle. Ok enough; but these intermittent beeps go on and on and on till it is sure everyone came back home after your attending your funeral. One awful engineer who programmed the chip. Anyway, been looking around the net if there is a work around. Found this written by some Russian. I didn’t have patience to correct the grammar entirely. If the below does  not work, there is always the option of an Axe and ‘hey Siemens,..Heeeere is Johnyyy!) -- text You can change the volume of the buzzer according to your requirement. The operation procedure: 1. Switch on the machine,turn the program selector to Off . 2. Turn the program selector to cold Easy-care , press the additional function button Intensive stains and dont let go. You can hear the volume of the buzzer from minimum to maximum to off cycled (I didnt hear this!). If you decide the volume that yo...
2 comments
Read more

Sudoku Puzzle Generator

Sudoku puzzles can be generated by a switching the rows and columns of a valid puzzle. The switch has to be done between the 123, 456 and 789 rows/columns. ie; 1 cannot be switched with 7 for example. A random pair can be generated and if a loop is run say 50 times, we get a new puzzle. Then the cells can be hidden again randomly. The following code generates the puzzle from a base character string which is converted to a 81 length Char array. The output is the solution as well as the puzzle with blank (or 0s)               Dim stdArray As String = "317849265245736891869512473456398712732164958981257634174925386693481527528673149"         Dim charArray() As Char = stdArray.ToCharArray         Dim rng As New Random         Dim m As Integer         Dim row1 As Integer         Dim row2 As Integer         Dim col1...
Post a Comment
Read more