You are here:Home » Blogger Guide » Simple Navigation Menus for Websites and Blogger

Simple Navigation Menus for Websites and Blogger

Navigation is most important in blogger and websites. Without navigation it's very difficult to find appropriate content on website or blogger.

If you went to some site and their if you don't find navigation than it's tough to get what you are looking for on that site.

So that site must have to place appropriate navigation's for their users.

To make easy for your user you must have to place navigation on your site. It's compulsory to add on websites and blogs.

If you put better navigation on your site that may help you to increase your traffic. If you ask me how than it's just by clicking on other page that you linked on your navigation.

Simple Navigation's Menus for Websites aand Blogger

So today i am going to share some simple, very simple designs of navigation. These designs don't take must time to load if you put on your site.

The decoration of these navigation is made by pure CSS. So these are very fast loading navigation.

Navigation's Menus1

CSS Code

*{
   margin: 0;
   padding: 0;
  }
  #menu{
  width: 100%;
  max-width: auto;
  background-color: #000;
  margin: 0px;
  padding: 10px;
 }

ul.nu{
 display: block;
 list-style-type: none;
 width: 100%;
 height: 33px;
 margin: 0px;
 padding: 10px;
}

ul.nu li{
 margin: 0px;
 padding: 0px;
}

ul.nu li a {
 display: block;
 float: left;
 max-height: 100px;
 width: 100px;
 margin: 0px;
 padding: 5px;
 font-family: arial;
 font-size: 22px;
 text-align: center;
 background-color: #055;
 text-decoration: none;
 color: #fff;
}

ul.nu li a:hover{
 border-bottom:#f00 solid 2px;
}

HTML Code

<nav id='menu'>
 <ul class="nu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Privacy</a></li>
  <li><a href="#">Write</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Tips</a></li>
 </ul>
</nav>


Navigation's Menus2

CSS Code

*{
   margin: 0;
   padding: 0;
  }
  #menu1{
  width: 100%;
  max-width: 100%;
  background-color: #888;
  margin: 0px;
  padding: 5px;
 }

ul.nu1{
 display: block;
 list-style-type: none;
 width: 100%;
 height: 40px;
 margin: 0px;
 padding: 5px;
}

ul.nu1 li{
 margin: 0px;
 padding: 0px;
}

ul.nu1 li a {
 display: block;
 float: left;
 max-height: 100px;
 width: 100px;
 margin: 0px;
 padding: 10px;
 font-family: arial;
 font-size: 15px;
 text-align: center;
 background-color: #666;
 text-decoration: none;
 color: #fff;
}

ul.nu1 li a:hover{
 border-radius: 15px;
 background-color: #066;
}

HTML Code

<nav id='menu1'>
 <ul class="nu1">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Privacy</a></li>
  <li><a href="#">Write</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Tips</a></li>
 </ul>

</nav>


Navigation's Menus3

CSS Code

*{
   margin: 0;
   padding: 0;
  }
  #menu2{
  width: 100%;
  max-width: 100%;
  background-color: #888;
  margin: 0px;
  padding: 5px;
 }

ul.nu2{
 display: block;
 list-style-type: none;
 width: 100%;
 height: 40px;
 margin: 0px;
 padding: 5px;
}

ul.nu2 li{
 margin: 0px;
 padding: 0px;
}

ul.nu2 li a {
 display: block;
 float: left;
 max-height: 100px;
 width: 100px;
 margin: 0px;
 padding: 10px;
 font-family: arial;
 font-size: 15px;
 text-align: center;
 background-color: #666;
 text-decoration: none;
 color: #fff;
 border-radius: 115px;
}

ul.nu2 li a:hover{
 border-radius: 15px;
 background-color: #066;
}

HTML Code

<nav id='menu2'>
 <ul class="nu2">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Privacy</a></li>
  <li><a href="#">Write</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Tips</a></li>
 </ul>

</nav>