Wednesday, January 13, 2021

Sidebar Menu | With Sub-Menus - Using HTML, CSS & JQuery



Description


Hello everyone! In this video, you are going to learn how to design an expandable and collapsible sidebar menu with dropdown sub-menus using HTML, CSS, and JQuery. To this sidebar, you can add as many sub-menus as you want. If the sidebar height is not enough to display all of the menus and sub-menus the sidebar will automatically adjust the height and automatically appear a scroll bar to the sidebar because of the property "overflow-y: auto;". So you can scroll up down the sidebar. The sidebar background is a glass-style background. It is a blur transparency style. the sidebar will be more attractive with the glass style. Let's see how to design this sidebar.


First, create the index.html file and the style.css file. After you created those files then start the HTML part of the sidebar in the index.html file as you can see in the video. After the HTML part is complete, to start the styling part with the sidebar, link the style.css file to the index.html file in between <head></head> tags. Then go to the style.css file and do the styling part with the sidebar as you can see in the video. After the styling part complete then go to the index.html file for the JQuery part. To start the JQuery part link the JQuery libraries script to the index.html file in between <head></head> tags. Then before the body close tag open <script></script> tags and complete the JQuery part of the sidebar inside that tags as you can see in the video. So that's all. Hope this video will be helpful to easily design an expandable and collapsible sidebar menu with dropdown sub-menus.



All the source codes and source files and available to download from here. Use the download button or copy and paste the code from the text editors. My opinion is first try to do it by following the video line by line. It will help you to understand all of it. After that, if your code is wrong or not working use the given source codes to compare with your code. It will help you to understand all of your mistakes.


Source Codes


index.html



style.css



Download Source Files

We only allow you to publish relevant and respectful comments. Vulgar, hateful, or spam comments will be removed.

Whatsapp Button works on Mobile Device only