Horizontal Tab Menus With CSS & HTML

30+ “Horizontal” Navigation Menus For Blogger With CSS & HTML Codes

Before that I never post how to create a horizontal navigation menu tab . May exist between blogger friends who find difficulty in putting the CSS code in the template editing stages, for it to post this time I tried to give a mild solution of dish 30 horizontal menu tab instant ready-made gadgets just by adding a HTML / JavaScript and placed the code tab on the item, as well as emphasize the navigation tabs will be urgent functions on a template.

How To Add These Navigation Menus To Blogger

To add your selected navigation menu to your blogger template follow these steps,

1. Go To Blogger > Layout
2. Click Add a Gadget or Add a Page element
3. Choose HTML/JavaScript widget
4. Simple Paste the Navigation Menu Code inside HTML/JavaScript widget
5. Hit Save
6. Drag HTML/JavaScript widget and drop it just under your Blog Header, as shown below,
   
   To change the links, Edit this part of the HTML in all codes below,
   <li><a href="#" ><span>Link 1</span></a></li>
<li><a href="#" ><span>Link 2</span></a></li>
<li><a href="#" ><span>Link 3</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
<li><a href="#" ><span>Link 5</span></a></li>
<li><a href="#" ><span>Link 6</span></a></li>
<li><a href="#" ><span>Link 7</span></a></li>
   Replace the hash(#) sign with your Page Links /URL and replace Link1, Link2, Link3 etc with your Page Titles. If you wish to add or delete a tab then simply add or delete this line,

   <li><a href="#" ><span>Link n</span></a></li>

   Finally do not forget to save and save. See the results on his blog.

   Here's the code 30 horizontal tab navigation menu

   MBT Navigation Menu #1

   No Image Used
   
   
   <style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #fff; background-color: #FE9C54; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

And many many more in.....

http://bdlab.blogspot.com/2010/08/30-horizontal-navigation-menus-for.html