Sidebar Menu

Want to impress your customers with a minimalist website menu design? Add a sidebar menu that is responsive yet offers easy navigation for any screen size. Sidebar menus collapse on a side and open on-demand, allowing you to save screen space. You can add small links to the sidebar menu, helping keep visitors engaged. With Dropdown Menu Generator, you can create a professional sidebar menu with pictures, texts, links, and more.

This example shows how the navigation bar assimilates with the entire website design as a sidebar menu on the left. The side menu is built using a two-level hierarchical structure. The element "All Storage Devices", as well as "Other Products" has a sub-navigation list.

Slide Through the Sidebar Menu

Sidebar menus are multi-purpose. In most cases, they play the role of additional navigation on the right or left of the website. They can be used to direct to related pages or other services provided. Similarly, they permit users to regulate the links added to a specific page. This is useful because the content can vary over time and excelling sites do not have room for obsolete data. Like the spider web, the sidebar menu connects each page to a particular layout, making it simple for all users. Truly, no site is complete without a sidebar menu!

Sidebar Menu Made Easy

Just place the vertical navigation bar in the side container and add a small code to your web page. To transform your website navigation bar to the sidebar menu, you should set its orientation to vertical and place it in the side container. In the sample code below, the menu container has an identifier named SideBar. The code includes the CSS style for the container and the JavaScript function SideBar_ShowHide() for displaying/hiding the menu on a mouse click or finger tap (for mobile devices).

<!DOCTYPE html>
<html>
<head>

    <title>Sidebar Menu</title>

    <style type="text/css">

        #SideBar 
        {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 0px;
            height: 100vh;
            transition: 300ms width;

            display: flex;
            justify-content: flex-start;
            padding: 4px;
            box-sizing: border-box;
            align-items: center;

            background-color: #333;
            box-shadow: 2px 3px 10px 2px rgba(0,0,0,0.3);
        }

        #SideBarText
        {
            position: relative;
            margin-right: -35px;
            margin-left: -70px;
            left: 43px;
            transition: 300ms;

            transform: rotate(270deg);
            padding: 10px 18px 10px 18px;

            font-size: 24px;
            color: #CCC;
            background-color: #333;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
            box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.3);
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        }

        #SideBarText:hover
        {
            color: #000;
            background-color: #FFBB00;
            cursor: pointer;
        }

        #SideBarMenu 
        {
            overflow-y: auto;
            overflow-x: hidden;
            max-height: 100vh;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        #SideBarMenu::-webkit-scrollbar 
        { 
            display: none;
        }

    </style>


    <script type="text/javascript">

        function SideBar_ShowHide()
        {
            var _sb = document.getElementById("SideBar");
            var _width = '280px';

            if(_sb.style.width == _width) {
                _sb.style.width = '0px';
                return;
            }
            _sb.style.width = _width;
        };

    </script>

</head>

<body>
    
    <div id="SideBar">
        <script type="text/javascript" src="./SideBarMenu/SideBarMenu.js"></script>
        <div id="SideBarMenu"></div>
        <div id="SideBarText" onclick="SideBar_ShowHide();">MENU</div>
    </div>
    
</body>
</html>

Download Full Code

You may also be interested: Vertical Navigation Bar

“I love it; I am more of a designer not much of a programmer and this saved me a ton of time trying to get a drop down menu built! Thanks for a quality product; I appreciate all your efforts!” - Richard R.