What is navigation bar in HTML?

A Navigation bar or navigation system comes under GUI that helps the visitors in accessing information. It is the UI element on a webpage that includes links for the other sections of the website. A navigation bar is mostly displayed on the top of the page in the form of a horizontal list of links.

https://youtu.be/-1iSsrfKq0U

HTML first

The tag used for the navigation bar is the <nav> tag, so we’ll start from there. We just need to open and close the nav tag and leave some space in between to add all the other tags.

code here:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Top nav</title>
 </head>
 <style>
  * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
  }
  body {
   font-family: sans-serif;
  }
  a {
   text-decoration: none;
  }
  li {
   list-style: none;
  }
  /* NAVBAR STYLING STARTS */
.navbar {
  position: fixed;
  width: 100%;
  margin: 0;
  padding: 0;
 display: flex;
 align-items: center;
 justify-content: space-between;
 background-color: #111;
 color: #fff;
}
.nav-links a {
 color: #fff;
}
/* LOGO */
.logo {
 font-size: 32px;
 padding: 20px 20px;
}
/* NAVBAR MENU */
.menu {
 display: flex;
 gap: 1em;
 font-size: 21px;
}
.menu li:hover {
  background-color:#555;
 color: f2f2f2;
 transition: 0.3s ease;
}
.menu li {
  padding: 20px 20px;
}
/*RESPONSIVE NAVBAR MENU STARTS*/
/* CHECKBOX HACK */
input[type=checkbox]{
 display: none;
} 
/*SIDE TOGGLE MENU*/
.side-toggle {
 display: none;
 font-size: 24px;
 user-select: none;
 padding: 20px 20px;
 cursor: pointer;
}
/* APPLYING MEDIA QUERIES */
@media (max-width: 768px) {
.menu { 
 display:none;
 position: absolute;
 background-color:#222;
 right: 0;
 left: 0;
 text-align: center;
 padding: 16px 0;
}
.menu li:hover {
 display: inline-block;
 color: f2f2f2;
 transition: 0.3s ease;
}
.menu li + li {
 margin-top: 12px;
}
input[type=checkbox]:checked ~ .menu{
 display: block;
}
.side-toggle {
 display: block;
}
.dropdown {
 left: 50%;
 top: 30px;
 transform: translateX(35%);
}
.dropdown li:hover {
 background-color: #4c9e9e;
}
}

 </style>
 <body>
   <nav class="navbar">
     <!-- LOGO -->
     <div class="logo">AM CODE</div>
     <!-- NAVIGATION MENU -->
     <ul class="nav-links">
       <!-- USING CHECKBOX HACK -->
       <input type="checkbox" id="checkbox_toggle" />
       <label for="checkbox_toggle" class="side-toggle">&#9776;</label>
       <!-- NAVIGATION MENUS -->
       <div class="menu">
         <li><a href="/">Home</a></li>
         <li><a href="/">About</a></li>
         <li><a href="/">Services</a></li>
         <li><a href="/">Pricing</a></li>
         <li><a href="/">Contact</a></li>
       </div>
     </ul>
   </nav>
 </body>
</html>

Leave a Reply

For News Subscribe Us!

Can curiosity may end shameless explained. True high on said mr on come. An do mr design at little myself wholly entire though. Attended of on stronger or mr pleasure.

You have been successfully Subscribed! Ops! Something went wrong, please try again.

© 2022 Code With AM