Responsive Navigation Menu Bar in HTML and CSS

Responsive Navigation Menu Bar in HTML and CSS

Responsive Navigation Menu CSS

The responsive Navigation Menu Bar plays an important role in any website. When we open a website, we first see the Navigation Bar.

You may have seen many types of navbar designs but the design I have shared here is quite simple.

In this tutorial, I have shared a tutorial on the Simple Responsive Menu Bar. This menu I created with HTML CSS and a small amount of JavaScript.

It is fully responsive so you can use it directly in any project. Here I have basically shared a step-by-step tutorial of this navigation bar with the logo. There is no need to worry if you are a beginner. Here you will find all the source code and live previews for creating this responsive navigation menu CSS.

Responsive Navigation Menu CSS

With each step, I have shown possible results with screenshots. Which will help any beginner to know how to create a CSS menu bar. Use the demo section below for a live preview.

See the Pen
Untitled by Shantanu Jana (@shantanu-jana)
on CodePen.

This design includes a logo and some menu items. When you open it in the case of a responsive device, the menu item will be hidden and a button will appear.

When you click on that button, you will see all the menus. @Media of CSS has been used to make it responsive. I have used a small amount of jQuery to make the menu button functional.

I used text to create the logo here. You can use the image if you want. One of the menu items in this Responsive Navigation Bar uses a kind of hover effect.

How to Create Navigation Menu bar in HTML

Now if you want to create this Responsive Navigation Bar you can do it in two ways. But if you only want the source code then use the button below the article. And if you are a beginner, then follow the steps below.

Create a menu bar area

The basic structure of this menu bar has been created using the following HTML and CSS. Basic Area in which all the menu items and logos can be seen.

<header id=”header”>
  <div class=”container”>
  </div>
</header>

The following CSS has been used to add background color to the web page and some basic designs.

*,*:after,*:before{
  box-sizing: border-box;
}
body {
  background: #e4e4e4 url(../images/banner.jpg) center bottom;
  background-size: cover;
  min-height: 100vh;
  font-family:arial;
  font-size: 16px;
  margin: 0;
}
a{
  text-decoration: none;
}

I have designed the background of the menu bar with these codes. The blue color is used in the background here.

width: 100%, max-width: 1100px and height depending on padding: 20px 10px. Left: 0, top: 0 is used to place this menu bar at the top of the webpage.

#header{
  padding: 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #023957;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}
.container{
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
Create a menu bar area

Add logo to Navigation Bar (more…)

Continue ReadingResponsive Navigation Menu Bar in HTML and CSS
How To Create a Bottom Navigation Bar HTML CSS

How To Create a Bottom Navigation Bar HTML CSS

How To Create a Bottom Navigation Bar HTML CSS

In this tutorial, you will learn how to create Bottom Navigation Bar HTML CSS. Earlier I shared another tutorial on creating a Bottom Navigation Menu. This type of CSS tab we see mainly in the case of responsive devices. 

This type of Bottom Navigation Bar HTML is found mainly in the case of mobile apps. This design can only be created by HTML CSS. 

Although I have used some JavaScript to make the animation used here work. If you omit the animation, you can create this mobile bottom navigation bar with HTML CSS.

Bottom Navigation Bar HTML CSS

For your convenience, I have given a preview below. Icons have been used instead of text for menus. If you only want the source code, use the button below the article.

See the Pen
Navigation Bar – JS by Foolish Developer (@foolishdevweb)
on CodePen.

First, the basic structure of the Fixed bottom navbar has been created on the webpage. White color has been used in the background of the navbar. 

Then I used 5 icons here. You can increase the amount of menu according to your needs. Here the color of the active icon will be red. Borders have been added to the active icons using CSS before and after. 

A border of 8px can be seen above and below the menu item that will be active. When you click on another icon, its borders will be removed and added to that icon.

How to Create a Bottom Navigation Menu

Below I have shared step by step tutorial and show how to create a bottom navigation bar design. For this, you need to have an idea about HTML, CSS, and javascript. 

However, if you are a beginner, follow the tutorial below. If you create this Bottom Navigation Menu using HTML checkboxes then you don’t need to use JavaScript.

Step 1: Basic structure of Bottom Navbar

First, the basic structure of this fixed bottom navbar has been created.

<nav class=”navigation-bar”>
  <ul class=”list-items”>
     
  </ul>
</nav>

I designed the webpage using the code below and added a background color.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
}

I have used min-height: 30px, min-width: 200px of this navbar and the background color is white.

.navigation-bar {
  background: #fff;
  border-radius: 3px;
  min-height:30px;
  min-width:200px;
  overflow: hidden;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}
.navigation-bar .list-items {
  list-style: none;
  display: flex;
  position: relative;
}
Basic structure of Bottom Navbar

Step 2: Add menu items to the Navigation Bar (more…)

Continue ReadingHow To Create a Bottom Navigation Bar HTML CSS
Animated Accordion Menu using HTML, CSS & Javascript

Animated Accordion Menu using HTML, CSS & Javascript

Animated Accordion Menu using HTML, CSS & Javascript

In this article, I am going to show you how to create an Accordion Menu menu using HTML, CSS, and JavaScript code. Earlier I showed the design of many more types of Animated CSS accordion menus. Now it’s time to recreate it with JavaScript.

 The responsive accordion menu has an original heading. When you click on that heading, all the information related to that heading can be seen below.

Accordion Menu is a modern content structure where a large amount of information can be neatly arranged in one place. This type of structure is used on different types of websites. This type of design is mainly used in the FAQ section or question-answer section. 

This type of Accordion Menu is very important for arranging related questions and answers for different types of services. In addition, a large amount of text is arranged on different types of websites depending on the different headings.

Video Tutorial of Animated Accordion Menu

 If you do not understand what I am saying then you can watch the video tutorial below. This video tutorial will help you to know how I made this simple javascript accordion.

We hope you have learned how to make this design from the video tutorial above. 

I made a small box on a web page as you can see above. I used three headings in that box. I have given the background color to highlight those headings and made it a bit bigger in size. Then I added some amount of content under that heading. 

Here you can add any type of content. Under normal circumstances, information is hidden. When you click on that heading, the information under that heading can be seen below.

You can use the demo section below to get a live experience of this design. Here you will find the required source code which you can copy and use in your own work.

See the Pen
Accordions Menu HTML CSS by Foolish Developer (@fghty)
on CodePen.

Hopefully, the demo above has helped you to know how this javascript accordion works. 

How to Create Simple CSS Accordion Menu (more…)

Continue ReadingAnimated Accordion Menu using HTML, CSS & Javascript
Responsive Navigation Menu bar using HTML & CSS

Responsive Navigation Menu bar using HTML & CSS

Responsive Navigation Menu bar using HTML & CSS

In this article, I am going to show you how to create a responsive navigation menu bar using HTML, CSS, and javascript. I have designed many types of navigation and side menubars before. However, this design is much simpler and simpler. If you are a beginner and want to know about the concept of a navigation menu bar then this tutorial will definitely help you.

 This is a fully responsive CSS navigation menu bar. Bootstrap or other external links were not used to make Responsive. It has been made Responsive using Pure CSS Code. In this case, I have used a small amount of JavaScript only to execute the menu button.

 First I designed the background for navigation and in this case, I used black color in the background. First of all, I used a logo here. In this case, I have used text to create a logo. However, you can use separate images. 

Then I used five menu items here. I have used the color white for menu items and logos which can be seen very clearly on a black background.

Responsive Navigation Menu bar

It is a fully responsive device so it can adapt itself beautifully to any device. In the case of responsive devices, menu items are completely hidden, instead, a small menu button is seen. 

If you click on that button, you can see the complete menu items. It is a very simple design that you can create if you know the basic HTML CSS.

(more…)

Continue ReadingResponsive Navigation Menu bar using HTML & CSS