Minimal Navigation Menu Bar using HTML CSS & JavaScript

Hello readers, Today in this blog you'll learn how to create a Minimal Navigation Menu Bar or Animated Sliding Menu Items on Click in HTML CSS & JavaScript. Earlier I have shared a Responsive Cards Design with Hover Animation in HTML & CSS. Now, it's time to create a Minimal Navigation Menu Bar using jQuery.

A navigation menu or nav link is a list of links pointing to important areas of the website. They are usually presented as a horizontal bar of links at the top of every page on the website. Navigation menus give your site structure and help visitors find your content what they're looking for.

At first, on the webpage, there is only a 3 lines-bar Menu Button, and when clicked on that menu button then these list items smoothly sliding down and appear. I also add the hover effect on Menu item lists. When you hover on the specific item, there is a cool inset box-shadow shown as you can see in the image. 

If you're feeling difficulty to understand what I am saying. You can watch a full video tutorial on this program (Minimal Navigation Menu Bar).

Video Tutorial of Animated Minimal Navigation Bar in jQuery 



If you like this program (Minimal 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're a beginner and have some basic knowledge of HTML & CSS then you can also easily create this type of Menu Bar or Navigation Bar. I believe you like this program. You can use this Menu Bar in your projects, websites, and anywhere you want.

Minimal Navigation Menu Bar [Source Codes]

As always, before sharing the codes of this program (Minimal Navigation Menu Bar). Let's a few talk about the main tags and codes of this program. At first, In the HTML File, I created a <div> with class name "menu-container" and placed all other tags inside it. Then I created another <div> for the button and inside this tag, I created a <span> for show menu icon.

After that, I created a <ul> tag and placed five <li> tags inside it. Inside each <li> tag I created a <a> anchor tag. This is a <ul> <li> based program that's why we can create a menu list easily.

In the CSS File, first using * selector I reset default margins and padding to 0;  Then I placed all elements to horizontally center using flex property and gave height-width to the menu container. After that, I created a Menu Button to show or Hide Menu lists. Then I did basic styling to <ul> <li>, and <a> tags like I gave colors, margins-paddings, height-width to these tags. I created a hover effect on each menu list. At last, The styling all tags I gave a display to <ul> for hiding those list items.

In the jQuery File, First I created a click function. Then I created if/else statement inside this function. Inside if statement I wrote a condition if the button has "class then slide up the menu items and run else statement. Inside else statement I wrote if the button has not "expand" class then add this class to the button. and run the setTimeout function. Inside this function, I slide down the menu items.

To create this program (Minimal 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.

HTML FILE:

CSS FILE:


Thanks for visiting, Keep visiting.


Post a Comment

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Previous Post Next Post