Responsive menu in html and css

How TO — Responsive Top Navigation

Learn how to create a responsive top navigation menu with CSS and JavaScript.

Responsive Navigation Bar

Resize the browser window to see how the responsive navigation menu works:

Create A Responsive Topnav

Step 1) Add HTML:

Example

The link with is used to open and close the topnav on small screens.

Step 2) Add CSS:

Example

/* Add a black background color to the top navigation */
.topnav background-color: #333;
overflow: hidden;
>

/* Style the links inside the navigation bar */
.topnav a float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
>

/* Change the color of links on hover */
.topnav a:hover background-color: #ddd;
color: black;
>

/* Add an active class to highlight the current page */
.topnav a.active background-color: #04AA6D;
color: white;
>

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon display: none;
>

Example

/* When the screen is less than 600 pixels wide, hide all links, except for the first one («Home»). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) .topnav a:not(:first-child)
.topnav a.icon float: right;
display: block;
>
>

/* The «responsive» class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) .topnav.responsive
.topnav.responsive a.icon position: absolute;
right: 0;
top: 0;
>
.topnav.responsive a float: none;
display: block;
text-align: left;
>
>

Step 3) Add JavaScript:

Example

/* Toggle between adding and removing the «responsive» class to topnav when the user clicks on the icon */
function myFunction() var x = document.getElementById(«myTopnav»);
if (x.className === «topnav») x.className += » responsive»;
> else x.className = «topnav»;
>
>

Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Источник

Responsive Navigation Menu Bar using HTML and CSS

Now I have added the necessary menu items here. Here I have basically added five menu items you can increase the amount if you want. Margin-left: 3rem has been used to keep each menu a bit away from each other. Here I have used the front size of the menu links 19 px and the color white. If you want to increase the size of these links a little, you can increase the size of the front here.

 class="nav-menu">  class="nav-item">  href="#" class="nav-link">Home   class="nav-item">  href="#" class="nav-link">Services   class="nav-item">  href="#" class="nav-link">Portfolio   class="nav-item">  href="#" class="nav-link">About   class="nav-item">  href="#" class="nav-link">Contact   

 .nav-menu  display: flex; justify-content: space-between; align-items: center; > .nav-item  margin-left: 3rem; > .nav-link font-size: 19px; color: white; > .nav-link:hover color: #1ae5f7; > 

Step 4: Create menu button

Above we have designed the Basic menu bar, now I will make it for Responsive Devices. First of all here I will create a menu button. Basically, in the case of responsive devices, menu items are completely hidden, instead we see a menu button. When we click on that menu button, we can see the complete menu items. I made this button by three lines. Which is built using the following HTML and CSS codes. I used width: 25px , height: 3px and background-color: white of each line. The lines are 5 pixels apart.

 class="hamburger">  class="bar">  class="bar">  class="bar">  

 .hamburger  display: none; > .bar  display: block; width: 25px; height: 3px; margin: 5px auto; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: white; > 

Step 5: Make the menu bar responsive with css

Now I will make it for Responsive Devices. In this case, I did not use any bootstrap or CSS library. I made it responsive using only css.

@media only screen and (max-width: 668px)  .nav-menu  position: fixed; left: -100%; top: 5rem; flex-direction: column; background-color: #3d3d3d; width: 100%; padding-top: 20px; padding-bottom: 20px; text-align: center; transition: 0.3s; > .nav-menu.active  left: 0; > .nav-item  margin: 2.5rem 0; > 

Step 6: Determine what happens when you click on the menu button

The following CSS codes have been used to add animation effects to the menu button. When you click on that menu button, those three lines will join together to form a cross symbol. In this case, the lines number one and number three move at an angle of 45 degrees to each other and the line number two is not visible. This results in the number one and three lines being joined together to form a cross mark .

 .hamburger  display: block; cursor: pointer; > .hamburger.active .bar:nth-child(2)  opacity: 0; > .hamburger.active .bar:nth-child(1)  -webkit-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg); > .hamburger.active .bar:nth-child(3)  -webkit-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg); > 

Step 7: Activate the menu button using JavaScript

Now I have activated these buttons using JavaScript code. First I set the constants to one of three class functions. Here ‘.hamburger’, ‘.nav-menu’, ‘.nav-link’ have hamburger, navMenu, navLink constants respectively.

const hamburger = document.querySelector(".hamburger"); const navMenu = document.querySelector(".nav-menu"); const navLink = document.querySelectorAll(".nav-link"); 

hamburger.addEventListener("click", mobileMenu); navLink.forEach(n => n.addEventListener("click", closeMenu)); function mobileMenu()  hamburger.classList.toggle("active"); navMenu.classList.toggle("active"); > function closeMenu()  hamburger.classList.remove("active"); navMenu.classList.remove("active"); > 

Hope you know the basic JavaScript and understand the JavaScript structure above. If you have trouble understanding, you can watch the video tutorial above. Hopefully in this article I have explained how to extend the menu bar on a simple navigation using HTML CSS and JavaScript code. You can download the required source code.

Источник