What is navigation bar in HTML?

What is navigation bar in HTML?

Share It With Your Firends:

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>

Share It With Your Friends

Leave a Reply

Recent Posts

  • All Post
  • A.I.
  • AI
  • c
  • c++
  • computer
  • cryptocurrency
  • database
  • digital marketing
  • finance
  • hacking
  • HTML
  • java
  • Marketing
  • network
  • other
  • programming
  • python
  • react
  • social
  • Tools
  • Uncategorized
  • web devlopment
    •   Back
    • drawing In Python
DIY AI Voice Assistant In Python

September 8, 2023

Build your own AI assistant with Python! Learn to recognize voice commands, generate responses, and more. Create your virtual companion…

share it

Recent Posts

  • All Post
  • A.I.
  • AI
  • c
  • c++
  • computer
  • cryptocurrency
  • database
  • digital marketing
  • finance
  • hacking
  • HTML
  • java
  • Marketing
  • network
  • other
  • programming
  • python
  • react
  • social
  • Tools
  • Uncategorized
  • web devlopment
    •   Back
    • drawing In Python

Additional Content

CodeWithAM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus.

Products

Automated Chatbot

Data Security

Virtual Reality

Communication

Support

Services

FAQ's

Privacy Policy

Terms & Condition

Team

Contact Us

Company

About Us

Services

Features

Our Pricing

Latest News

Β© 2023 Codewitham