Categories
Coding

Responsive Sidebar Sliding Menu – Free to Use HTML, CSS, JS Template

This is a responsive sidebar menu with a JS toggle button that slides the menu off the page and onto the page. The sidebar content was created with a e-commerce site in mind however it can be modified to be used for any type of website. Color scheme used includes white smoke, dodger blue, dark late gray, and orange which mainly makes up a blue color palette with a contrasting bright orange button. The content placeholder of the design is meant to be dynamic with a welcome message to the user and the number of items in their cart, these can be removed or replaced with your own software variables so they’re no longer static. A 3 line icon can be found at the top with the style appearance that it’s dropping into the canvas. Clicking it will trigger the JS function that’ll slide the on page or off page with a nice smooth transition. Once the page is compressed into mobile/table size it will change its width to 100% to fit small screens and will be toggled off by default, the user click the toggle button to open the side menu on mobile/tablet which is standard UI/UX for mobile side menus.

This project is free to use, enjoy. Grab the CSS, HTML, and JS code below and implement it on your website. I ask that you support my projects by crediting me somewhere on your webpage.

How to attribute:
<a href=”https://bitoony.com” target=”_blank”>Logo Designed by Bitoony.com</a>

See the Pen Sidebar UI Design – Shop Concept – Dark Blue Palette – HTML CSS by Waleed (@Bitoony) on CodePen.

Expand