create Navigation menu bar in html and css


hello and welcome to your Site Niljadav
i'm Anil jadav

in this article we learn how to create a responsive menu bar in html . every websites have navigation bar such as a menu on top of the site like mine niljadav.com have top navigation bar as you can see

navigation bar & menu is a collection of important links like categories,contact page,about page, playlist and other links,


my users also tell me this types of  questions..
how navigation bar design & navigation bar designs ?
best designing navigation bar ?

design transparent navigation bar
html code for navigation bar

 click to download custom navigation bar pro apk
in short navigation is navigate a user to his destination...

navigation have a button,hyperlink ,search box, name and logo at the top. 


table of content-
  • create navigation bar
  • responsive navigation bar
  • navigation bar menu
  • navigation menu bar html
  • navigation bar for html
  • html navigation bar
  • simple navigation bar
  • horizontal navigation bar
  • vertical navigation bar
  • drop down menu bar
  • drop down in css
  • menu in html css
  • css navigation bar
  • css navigation menu
     
let's start making a top navigation bar in html css
we can make two types of navigation menu bar responsive navigation bar and static navigation bar
in this article we learn how to make css navigation bar

in first example we can make a navigation bar using div tag, and second we use list tag (ul) for making a html navigation bar and other examples..........

example 1): css navigation bar using div tag
 preview-
navigation bar in html
css navigation bar

description- in this navigation menu bar example i used div tag for best alignment and css for making a eye catchy interface, in this example css stylesheet is external linked in your case you can make as per your choice... enjoy code

css code for top navigation bar-
 body {
  margin: 0;
  font-family: courier,arial,helvetica;
}

.mainnav {
  overflow: hidden;
  background-color:  #2c3e50 ;
}

.mainnav a
{
   padding: 12px 14px;
  text-decoration: none;
  float: left;
  color: #f2f2f2;
  text-align: center;

  font-size: 20px;
}

.mainnav a:hover
{
  color: black;
  background-color:   #f2f4f4;
 
}

.mainnav a.active
{
  background-color:   #45b39d  ;
  color: white;
}

html code for top navigation bar-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="mainnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

<div>
  <h4>ANIL JADAV</h4>
  <p>hello this is navigation menu bar example by www.niljadav.com</p>
</div>

</body>
</html>


DOWNLOAD CODE
solved question-  How do I create a navigation bar?, How do I create a navigation bar in HTML?
note- this code owned by this website if you use this code you must give a credit via this article link (copyrighted  by www.niljadav.com)

example 2): css navigation bar  static using list tag
preview-
navigation bar nil jadav
navigation bar in html

description- hello in this example i used list tag for new coders better understanding , when i started learn web-design i write this code as a newbie this is very easy code for starting making static wesites, this navigation bar is simple and light code.....!

html code for navigation bar-

<!DOCTYPE html>
<html>
<head>
    <title>navigation</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <ul>
        <li id="name"><img src="online.png"/></li>
        <li id="name"><p>Niljadav</p></li>
        <li><a id="end" href="#">services</a></li>
        <li><a href="#">product</a></li>
        <li><a href="#">shop</a></li>
        <li><a href="#">about</a></li>
        <li><a href="#">home</a></li>
</ul>
<br> <center>credit - <a href="https://www.niljadav.com">niljadav.com</a></center>
</body>
</html>

css code for navigation bar-
body
{
    background-color: black;
}
ul
{
   
    margin: 0;
    padding: 0;
    background-color: orange;
    list-style: none;
    font-family: Arial, Helvetica, sans-serif;
    height: 40px;
    border-radius: 30px;
    border:2px solid white;
    line-height: 40px;
    padding-right: 40px;
}
li
{
    float: right;    
   
}
#end
{
    border-right: 3px solid white;
}
a
{
    text-decoration: none;
    color: white;   
    padding:0 20px;
    border-left: 3px solid white;
    display: block;
   

}
a:hover
{
    background-color: black;
}
img
{
    height: 35px;
    margin-top: 2px;
   
    padding-left: 30px;
}
#name
{
    float: left;
}
p
{
    margin: 0;
    padding-left: 10px;
    font-size: 25px;
    font-weight: bolder;
    color: white;
    font-family:courier,arial,helvetica;
}

DOWNLOAD CODE
solved question- how to make navigation bar html css

note- this code owned by this website if you use this code you must give a credit via this article link (copyrighted  by www.niljadav.com)


summery- in this article we learn to create html navigation bar with two example for more code read our helpful article on this web, you can also download code from links

thanks for visiting
😎ANIL JADAV😎
www.niljadav.com