CSS Top Menu Navigation Tutorial

Top menu navigation plays an important role in overall look and feel of a website. Today i made a CSS top menu navigation which is purely made from CSS. I kept this minimal and clean so that space can be used for content and navigation means only for navigation and not for placing a header ad. A big header ad ruins readers' reading experiance and it adversly effects your sales numbers. I have used royal blue color, you may change the color as required. I have also used Sprites to make it load faster, also gave image hover effects. You may also place search box widget in this navigation bar in the empty space at right, but in case you have lot of pages to be linked on menu then there would be no space left for top menu. In case yo feel any problem in using this navigation menu in any platform, then comment below, i will solve your problems asap. The below demo is from my own blogger blog.

[button-red url="http://www.thegoodblogger.com/" target="_self" position="left"] Demo [/button-red]

[button link="http://raman.googlecode.com/files/source_files.zip" target="_blank" color="default" shape="rounded" size="small" align="left"]Source files[/button]

Give a look to my prevoius tutorials on same same subject :-

CSS3 Dropdown Menu Tutorial

Subscribe by Email Widget for WordPress and Blogger

Design Rapid Free Blogger Template

Html

<header id='header-wrapper'>
<div id='topLimiter'>
<div class='widget Header' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper'>
</div>
</div></div>
<a href='http://www.your_link/' id='logo'><img alt='Blogging tips' height='96' src='http://raman.googlecode.com/files/thegoodblogger.png' title='Back to Home CSS Design' width='294'/></a>
<ul id='navigation'>
<li><div><a class='level0' href='http://www.your_link/'>Blogging</a>
<ul class='level1'>
<li><div><a class='level1' href='http://www.your_link/'>Blogging Tips</a></div></li>
<li><div><a class='level1' href=''>SEO</a></div></li>
<li><div><a class='level1' href='http://www.your_link'>Internet Marketing</a></div></li>
<li><div><a class='level1' href='http://www.your_link'>Tutorials</a></div></li>
</ul>
<span class='topMenuIcon'/></div></li>
<li><div><a class='level0' href=''>Make Money</a>
<ul class='level1'><li><div><a class='level1' href='http://www.your_link/'>PPC</a></div></li>
<li><div><a class='level1' href='http://www.your_link/'>Affiliate</a></div></li>
<li><div><a class='level1' href='http://www.your_link/'>Social Media</a></div></li>
<li><div><a class='level1' href='http://www.your_link/'>Misc</a></div></li>
</ul>
<span class='topMenuIcon'/></div></li>
<li><div><a class='level0' href='http://www.your_link/'>Downloads</a>
<ul class='level1'>
<li><div><a class='level1' href='http://www.templategrid.com'>Blogger Templates</a></div></li>
</ul>
<span class='topMenuIcon'/></div></li>
<li><div><a class='level0' href='http://www.your_link/'>About Me</a>
<ul class='level1'>
<li data-alt='Find us on Google+'><div><a class='level1' href='https://plus.google.com/109783772548428705949' rel='nofollow'>Google+</a></div></li>
<li><div><a class='level1' href='http://www.facebook.com/designrapid' rel='nofollow'>Facebook</a></div></li>
<li><div><a class='level1' href='https://twitter.com/raman2572' rel='nofollow'>Twitter</a></div></li>
<li><div><a class='level1' href='http://www.your_link/p/about-us.html'>More About</a></div></li>
<li><div><a class='level1' href='http://www.your_link/p/write-for-us.html'>Write Here</a></div></li>
<li><div><a class='level1' href='http://www.your_link/p/contact-us.html'>Contact Us</a></div></li></ul>

<span class='topMenuIcon'/></div></li>
</ul></header>

[showmyads]

CSS

#navigation div:hover ul.level1,
#navigation div ul li {
  display:block;
}
#header-wrapper {
  background-color:#022F42;
  postion:absolute;
  top:0;
  left:0;
  width:100%;
  height:68px;
  border-bottom:1px solid #FFF;
  z-index:1000;
}
#topLimiter {
  max-width:1024px;
  position:relative;
  height:70px;
  margin:0 auto;
}
#logo img {
  position:absolute;
  top:-8px;
  left:0;
}
#logo {
  z-index:1;
  color:transparent;
  display:block;
  font:0/0 arial;
  height:83px;
  left:0;
  overflow:hidden;
  position:absolute;
  text-shadow:none;
  top:0;
  width:290px;
}
#navigation {
  left:320px;
  position:absolute;
  z-index:1000;
  font-family:'Arial','nunito',Tahoma,Arial,sans-serif;
padding-top:16px;
}
#navigation div span {
position: absolute;
right: 10px;
top: 50%;
width: 14px;
height: 14px;
background-position: -200px -101px;
margin-top: -7px;
}
.read-logo, .css-tutorial a, #sidebarSubscribe .icon, #navigation div span {
background-image: url(http://raman.googlecode.com/files/css_sprite.png);
background-repeat: no-repeat;
}
#navigation li {
  list-style:none;
  display:inline;
}
#navigation ul {
  display:none;
  position:absolute;
  top:30px;
  left:0;
}
#navigation div div:hover>ul {
  display:block;
  left:120px;
  top:0;
  background-color:#14303a;
  z-index:10000;
}
#navigation div div ul div {
  border-bottom-color:#11252c;
  border-top-color:#1b3c48;
}
#navigation div {
  float:left;
  position:relative;
}
#navigation div div {
  float:none;
  border-top:1px solid #183540;
  border-bottom:1px solid #081418;
}
#navigation div li:first-child>div {
  border-top:none;
}
#navigation div li:last-child>div {
  border-bottom:none;
}
#navigation a {
  text-decoration:none;
  border:1px solid transparent;
  font-size:15px;
  display:block;
  font-weight:700;
  color:#FFF;
  text-shadow:1px 1px 0 #333;
  padding:4px 30px 4px 11px;
}
#navigation div ul {
  background-color:#102831;
  width:155px;
  border:1px solid #0d2129;
  border-top:none;
  z-index:1000;
  padding:10px;
}
#navigation div li a {
  font-size:12px;
  font-weight:400;
}
#navigation div li div:hover>a {
  background:#183641;
  border:1px solid #1d3e4b;
}
#navigation div span {
  position:absolute;
  right:10px;
  top:50%;
  width:14px;
  height:14px;
  background-position:-200px -101px;
  margin-top:-7px;
}
#navigation a.active,
#navigation div:hover a.level0,
#navigation a:hover {
  background-color:#102831;
  text-shadow:1px 1px 0 #000;
  border:1px solid #0d2129;
}
#navigation div:hover .topMenuIcon {
  background-position:-200px -81px;
}
#searchForm {
  height:31px;
  position:absolute;
  right:0;
  top:18px;
  width:245px;
}
#outer-wrapper {
  overflow:hidden;
  text-align:left;
  font:13px Lora,Oxygen,Helvetica,trebuchet MS,sans-serif;
  margin:0 auto;
  padding:0;
}
#content-wrapper {
  width:1024px;
  position:relative;
  margin:0 auto;
}
#main-wrapper {
  width:670px;
  float:left;
  word-wrap:break-word;
  padding:0;
}
#sidebar-wrapper,
#sidebar-r {
  padding-top:6px;
  float:right;
  max-width:325px;
  overflow:hidden;
  text-align:left;
  height:100%;
  word-wrap:break-word;
}
#sidebar-wrapper h3 {
  letter-spacing:0;
  font:16px Oswald,helvetica,
arial,serif;
  color:#000;
  margin:0;
  padding:5px 10px;
}
#sidebar-wrapper .widget-content {
  margin:0;
  padding:.3em;
}

#search {
    float: right;
    height: 27px;
    width: 310px;
    margin: 3px 0 0 !important;
    padding: 0 !important;
}
* html #search {
    margin-right: 8px;
}
#search input {
    background: #fff;
    border: 1px solid #ddd;
    color: #000;
    float: left;
    font-size: 11px;
    width: 223px;
    margin: 1px 0 0;
    padding: 3px 4px 4px;
}
#search .btn {
    padding: 0;
    height: 22px;
    width: 69px;
    margin: 1px 0 0 5px !important;
    border: none;
}
#header {
    height: 100px;
    margin: 0 0px;
    padding: 0;
    background: #484848;
}
#headerlogo {
    float: left;
    display: inline;
    line-height: 100px;
    font-size: 24px;
    width: 280px;
    height: 100px;
    overflow: hidden;
}
#header h1 {
    float: left;
    display: inline;
    line-height: 100px;
    font-size: 24px;
}
#header h1 a {
    display: block;
    height: 93px;
    width: 280px;
    color: #000;
    font-size: 28px;
}

Pencil drawing online course - Download here

Join 40,000+ readers and get free notes in your email

6 comments:

umashankar2 October 2012 at 02:12
Trying this.
3 Principles for Better Navigation Menu - Designzzz10 December 2012 at 08:29
[...] CSS Top Menu Navigation Tutorial [...]
bisnis jual pulsa8 May 2013 at 22:31
Nice post... so informative and helpfull,...support u..!!! Thanks..!
Ramandeep Singh10 May 2013 at 05:46
Thanks @Bisnis
Yuliyana31 May 2013 at 20:14
how do I set it up on blogger.. thanks
Ramandeep Singh31 May 2013 at 21:19
It is very easy to add this in blogger. First add the css code above "]]>" in blogger template. Then place the HTML code wherever you want to place the menu. Reply ask your questions in case you are unable to apply it.