Hello readers, Today in this blog you'll learn how to create a Sidebar Menu using HTML CSS & jQuery. Earlier I have shared a Responsive Dropdown Menu Bar using only HTML & CSS. Now, it's time to create a side navigation menu bar in jQuery.
The sidebar can be used to encourage the reader or visitors to read the more detailed main article. For example, a sidebar can be made that lists the major points of the main article, content, or asks questions about the information that will be given in the main article as a way to entice readers to read the whole main section.
In this Sidebar, there are some menu items and when you click on the specific icon this web page scroll and show you the clicked section. That means when click on the about section the page will scroll down and show you the about section. In the menu items you can see there is a small vertical line on the left corner of items. That line is used to inform that which item is active now.If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Side Navigation Menu Bar).
Video Tutorial of Side Navigation Menu Bar in jQuery
I used jQuery to only show or hide the sidebar. All this design based in HTML & CSS. If you're a beginner you can also create this type of sidebar menu.
If you like this program (Side Navigation Menu Bar) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
If you like this program (Side Navigation Menu Bar) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
You might like this:
Sidebar Menu using HTML CSS & jQuery [Source Codes]
As always, before sharing the codes of this program (Side Navigation Menu Bar). Let's a few talk about the main tags and codes of this program. In the HTML File, First I created a <ul> tag and placed all <li> tags inside it. This is <ul> <li> based program that's why we can easily create menu. Then inside each <li> tag I created a <a> anchor tag.
In the CSS File, First using * selector I reset default margins and padding to 0; which automatically browser takes. Then I did styling to ul for creating sidebar like I gave colors, height-width, margins-paddings to the sidebar. Then I placed all menu items vertically and did some style to all items. I used font awesome to show that menu button which helps to show or hide to the sidebar. Font Awesome is designed to be used with inline elements. The <i> and <span> elements are widely used for icons. After stylish all elements, I gave left: -240px to sidebar to hide it. Then I created a class and gave that sidebar to left:0px; and add this class in the jQuery to show sidebar when the menu button clicked.
In the jQuery File, I created a click function then called that sidebar and menu button with their class name. Inside this function, I toggled that created class which I have put in the CSS file. The toggle() method connects two or more functions to toggle between for the click event for the selected elements. When clicking on an element, the first specified function fires, when clicking again, the second function fires, and so on. Note: There is also a jQuery Effects program called toggle().
To create this program (Side Navigation Menu Bar). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. In the source files, there you also get a background image of this program. Click here to download source code files.
In the CSS File, First using * selector I reset default margins and padding to 0; which automatically browser takes. Then I did styling to ul for creating sidebar like I gave colors, height-width, margins-paddings to the sidebar. Then I placed all menu items vertically and did some style to all items. I used font awesome to show that menu button which helps to show or hide to the sidebar. Font Awesome is designed to be used with inline elements. The <i> and <span> elements are widely used for icons. After stylish all elements, I gave left: -240px to sidebar to hide it. Then I created a class and gave that sidebar to left:0px; and add this class in the jQuery to show sidebar when the menu button clicked.
In the jQuery File, I created a click function then called that sidebar and menu button with their class name. Inside this function, I toggled that created class which I have put in the CSS file. The toggle() method connects two or more functions to toggle between for the click event for the selected elements. When clicking on an element, the first specified function fires, when clicking again, the second function fires, and so on. Note: There is also a jQuery Effects program called toggle().
To create this program (Side Navigation Menu Bar). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. In the source files, there you also get a background image of this program. Click here to download source code files.
CSS FILE:
sir which editor are you using?
ReplyDeleteI'm using Atom. I've made a video on it - https://www.youtube.com/watch?v=55VjXTeYkTE&t=27s
DeletePost a Comment
We welcome relevant and respectful comments. Off-topic or spam comments may be removed.