This has to be the best navigation menu bar for it's simplicity, easiness of use and editing, and for the fact the dropdown menu list do not go underneath objects that is underneath the navigation menu bar.
The navigation menu bar is not complicated. You do not need to add .js file codes to your blog. What's more, it is not complicated to add it to your blog.
There are two lots of code you have to add to your blog's template. The first part of the code (the css code) is added somewhere before the ]]></b:skin>
I prefer to place mine above the header css code - if I place the actual dropdown navigation menu bar above the Header.
DO NOT CLICK ON "EXPAND TEMPLATE" FOR THIS TUTORIAL. Copy and paste the css code below to somewhere before the code ]]></b:skin>
/*-- (Menu Nav LABEL) --*/
#nav-menu-label{
width:98.5%;
height:20px;
color:#00ff00;
font-size:12px;
line-height:20px;
background: url(http://img689.imageshack.us/img689/9310/sleekblackandgreynavbar.jpg);
border-bottom:1px solid #1994E6;
margin:5px auto 10px;
padding:4px 10px 4px 4px;
}
#nav-menu-label ul{float:left;
list-style:none;
margin:0 10px; padding:10px;
}
#nav-menu-label li{
list-style:none;
margin:0 auto; padding:0px
}
#nav-menu-label li a, #nav-menu-label li a:link, #nav-menu-label li a:visited{
color:#00ff00;
display:block;
font-size:12px;
font-family:arial,verdana,georgia;
font-weight:normal;
text-transform:normal;
text-decoration: none;
text-align:left;
margin:-2px 0 0 0;
border-right:1px solid #444444;
padding:2px 7px 5px 7px;
}
#nav-menu-label li a:hover, #nav-menu-label li a:active{
color:#00ff00;
margin:-2px 0 0 0;
padding:2px 7px 5px 7px;
text-transformation: bold;
text-decoration:none;
}
#nav-menu-label li li a, #nav-menu-label li li a:link, #nav-menu-label li li a:visited{background:#000; width:130px; color:#00ff00; font-size:12px; font-family: arial,Times New Roman; font-weight:bold; text-transform:normal; float:none; margin:0px; padding:4px 10px 4px 10px; border-bottom:1px solid #1994E6;}
#nav-menu-label li li a:hover, #nav-menu-label li li a:active{background:#333333; border-bottom:1px solid #1994E6; color:#00ff00; font-size:12px;font-weight:bold;padding:4px 10px 4px 10px}
#nav-menu-label li{float:left; padding:0px}
#nav-menu-label li ul{z-index:999; position:absolute; left:-999em; height:auto; width:100px; margin:0px; padding:0px}
#nav-menu-label li li{}
#nav-menu-label li ul a{width:100px}
#nav-menu-label li ul a:hover, #nav-menu-label li ul a:active{}
#nav-menu-label li ul ul{margin:-31px 0 0 100px}
#nav-menu-label li:hover ul ul, #nav-menu-label li:hover ul ul ul, #nav-menu-label li.sfhover ul ul, #nav-menu-label li.sfhover ul ul ul{left:-999em}
#nav-menu-label li:hover ul, #nav-menu-label li li:hover ul, #nav-menu-label li li li:hover ul, #nav-menu-label li.sfhover ul, #nav-menu-label li li.sfhover ul, #nav-menu-label li li li.sfhover ul{left:auto}
#nav-menu-label li:hover, #nav-menu-label li.sfhover{position:static}
Onto the other lot of code. I'm not sure if it Javascript or HTML code, actually! Anyway, next thing you do is locate on your blog the exact location where you want to place the dropdown navigation menu bar. Preview your template and ask yourself where you want the dropdown menu bar to be displayed. Okay, close the preview page down and in the template code itself locate the area directly below where you wanted to place it. For example, if you want to add the dropdown menu bar directly above your header, then locate the code for the header. You have to scroll down passed all the css code to locate it. Normally the header code is right below the <body> code but every template differs so you need to locate your template's version of <body>.
The second lot of code is placed where you want it to be displayed, in this example, directly above the code for the header, or somewhere within the opening and closing body tags <body></body>. Below is the second lot of code to add to your template:
<div class='mta_bar bar-menu-label'>
<div id='NavbarMenuleft'>
<ul id='nav-menu-label'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://www.blogger.com/home'>Dashboard</a></li>
<li><a href='#'>Settings</a>
<ul>
<li><a href='http://www.blogger.com/edit-profile.g'>Edit Profile</a></li>
<li><a href='#'>Edit Template</a></li>
<li><a href='#'>New Post</a></li>
<li><a href='#'>Design</a></li>
</ul>
</li>
<li><a href='#'>Tools</a>
<ul>
<li><a href='#'>Activity</a></li>
<li><a href='#'>Blogs</a></li>
<li><a href='#'>Bookmarks</a></li>
<li><a href='#'>Friends</a></li>
<li><a href='#'>Gallery</a></li>
<li><a href='#'>Info</a></li>
<li><a href='#'>Notes</a></li>
<li><a href='#'>Notices</a></li>
<li><a href='#'>Pages</a></li>
<li><a href='#'>Photos</a></li>
<li><a href='#'>Videos</a></li>
</ul>
</li>
<li><a href='#'>News</a>
<ul>
<li><a href='#'>News 1</a></li>
<li><a href='#'>News 2</a></li>
<li><a href='#'>News 3</a></li>
<li><a href='#'>News 4</a></li>
<li><a href='#'>News 5</a></li>
<li><a href='#'>News 6</a></li>
<li><a href='#'>News 7</a></li>
<li><a href='#'>News 8</a></li>
<li><a href='#'>News 9</a></li>
<li><a href='#'>News 10</a></li>
</ul>
</li>
<li><a href='#'>Resources</a>
<ul>
<li><a href='#'>Blogger Help</a></li>
<li><a href='#'>Templates</a></li>
<li><a href='#'>UFO templates</a></li>
<li><a href='#'>CSS tutorials</a></li>
<li><a href='#'>HTML codes</a></li>
<li><a href='#'>HTML tutorials</a></li>
</ul>
</li>
<li><a href='#'>Site Updates</a></li>
<li><a href='http://www.blogger.com'>Login</a></li>
</ul>
</div>
</div>
Once you have copied and pasted the codes into your template, preview it. Does the navigation menu bar display at all? Is it in the right location? If it does not display at all then you have a minor problem. Check to see where you added the code and remove it from that location. Just highlight it and select "cut". The second lot of code must be placed by itself, therefore, it should be placed after any closing divs for the section above the header (if any). If you have nothing above your header, in the template, then make sure it is placed just after the "outer wrapper" id, which will look something like this:
<div id='outer-wrapper'>
If that still does not work, then highlight and cut the second lot of code, then save your template. Once saved, click on the "Expand template" option. Scroll down to where the same section is again, to find the header code (HTML/Javascript? code). Now, right at the top of the header code will be something like this:
<div id='wrap'>
<div id='header-wrapper'>
<div class='header'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Your code will look different to this one. Paste the entire second lot of code directly above the <b:section class='header' line of code.
For example:
<div id='wrap'>
<div id='header-wrapper'>
<div class='header'>
All the second lot of code goes here.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Click on "Preview template" to see if it will display/load the page. Does it? If yes, save the template. If you get an error "The template could not be parsed .... because of whatever problem... usually about "body" and it needs to be closed, do this:
At the very bottom of the second lot of code are two closing divs
</div>
</div>
Cut one of the closing divs and preview the template. If the page loads, save the template. If the problems persists, paste the cut </div> at the bottom of the header code. The header code will have it's own closing divs. Paste the cut </div> after the header's closing divs, then preview the template. If it still won't load the page, repeat the process with the remainding dropdown navigation menu bar's closing div. Cut it and paste it at the bottom of the header's closing divs. Preview the template. This time it should load the page and you can preview it. If it still does not display, delete one of the closing divs </div> from the bottom of the header's code (where all the closing divs are). Preview the template and this time it will display.Once you got the Preview template page displayed, close it down and save the template.
Usually, by deleting one of the closing divs </div> to the dropdown navigation menu, the "Preview template" loads, and the "template could not be parsed" problem goes away. USUALLY!
Anyway, now you can go ahead and start editing the links to your new dropdown menu. I've provided a link for a live demo of this dropdown menu, but this tutorial has been altered slightly from the original live-demo version. This tutorial example does not contain the image on the left; the search bar; nor the live time/date function on the far right. Nor does it have a transparency over the dropdown menus, which is visible when using the Internet Explorer web browser. I have added an additional dropdown menu list to the tutorial example. Everything else is exactly the same. It's the one at the very top of the live-demo blog.
Bookmark / Share
RSS Posts
View my profile
Photos
twitter
facebook
