Check Teer Result

Create a navigation menu using Html and Css

How to create a navigation menu using HTML and CSS

Navigation menu is very important for a website or a webpage. It gives a structural direction to all the topics of the website. And it is very important to design the menu in a beautiful manner. We will learn to create the navigation menu using HTML and CSS. we will provide Source Code and Video tutorials. 

Lets have a look of the menu here 

Now we will describe our Soure Code here!

<!DOCTYPE html>
<html>
 <head>
  <title>
   Navigation bar
  </title>
  <style>
    body{
margin:0;
padding:0;
}
    header{
height:40px;
width:100%;
background-color:black;
border-bottom:1px solid orange;
box-shadow:2px 3px 3px grey;
}
#navbar{
 width:600px;
 margin:0 auto;
 height:70%;
 
}
.box{
  width:18%;
  float:left;
  height:100%;
  margin-left:1%;
  padding-top:1%;
  padding-bottom:1%;
  text-align:center;
  color:white;
  font-family:Tahoma;
  
}
.box:hover{
 background-color:grey;
 border-radius:5px;
 cursor:pointer;
 color:#fff;
 font-weight:bolder;
 box-shadow:1px 2px 2px black;
}
  </style>
 </head>
<body>
 <header>
   <div id="navbar">
     <div class="box">Home</div>
<div class="box">Bollywood</div>
<div class="box">Hollywood</div>
<div class="box">Assam</div>
<div class="box">Bengal</div>
   </div>
 </header>
</body>
</html>

Video Tutorial for this code Comming Soon..


EmoticonEmoticon