Get Daily Updates To Your Inbox

Subscribe Us And Enjoy Tutorials Daily Directly In Your Inbox

Tuesday, 2 October 2012

Tagged under: , ,

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.css top navigation menu

[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 :-

 

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;
}

 

6 comments:

  1. Nice post... so informative and helpfull,...support u..!!! Thanks..!

    ReplyDelete
  2. Ramandeep Singh10 May 2013 at 05:46

    Thanks @Bisnis

    ReplyDelete
  3. how do I set it up on blogger.. thanks

    ReplyDelete
  4. 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.

    ReplyDelete