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






30 High Quality Navigation-Menus Navigation menu or tab menu is the heart of every web page or blog. It provides the path way to all important pages of the website. To create a Navigation menu you must have good knowledge of CSS and HTML. But since more and more designers are sharing their tutorials online, coding has become far easier. I have brought to you a total of 30 High class navigation menus along with their CSS and HTML Codes from across the web. You just need to copy and paste the codes and that’s it!


The Horizontal Navigation Menus below are mostly created by Christopher and Highdots and some by me. I have modified most of the codes in order to make them work in blogger and have also made them pretty easy to be understood by most of you. Further all images are uploaded in my Picasa web album so no effort required on your side.




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,


Add-Navigation-Menu-In-Blogger


    7.   Finally view your blog to see something hanging below your Blog Header/Logo.


See Live Demo of MBT Navigation Menu #3


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>



As a designer I always look for inspiration that can be useful for both my readers and for my designing projects.  I hope the resource below will be of great use to Bloggers from all platforms and to designers. Start choosing your favorite Navigation Menu and do not hesitate to ask me if you needed help in customizing it.




Live demo 1 :: Live Demo 2
 


Tip:- To See Demo Of Other Menus, Simply Copy Paste The Code Inside MBT HTML Editor and Hit Preview To See It Live.


MBT Navigation Menu #1



No Image Used

Black-Orange








MBT Navigation Menu #2



No Image Used


Purple-White-Navigation






MBT Navigation Menu #3



No Image Used


Boxed 1






MBT Navigation Menu #4



 No Image Used


LIGHT-GREY




MBT Navigation Menu #5



 Bulleted-top-Navigation






Tabs Menu #6


Tab Menu I 




Tabs Menu #7


Tab Menu G




Tabs Menu #8


Tab Menu F

CSS CODE:




Tabs Menu #9



No Image Used

ZDnet Emulation






Tabs Menu #10


Tab Menu E




Tabs Menu #11


Tab Menu D




Tabs Menu #12


Tab Menu 12






Tabs Menu #13


Tab Menu 11 




Tabs Menu #14


Tab Menu 10




Tabs Menu #15


Tab Menu 9




Tabs Menu #16


Tab Menu 6




Tabs Menu #17


Tab Menu 8




Tabs Menu #18


Tab Menu 7




Tabs Menu #19


Tab Menu K




Tabs Menu #20


Tab Menu 4 




Tabs Menu #21


Tab Menu 3 




Tabs Menu #22


Tab Menu 2 






Tabs Menu #23


Square 




Tabs Menu #24



 No Image UsedHorizontal Buttons 




Tabs Menu #25


  Tab Menu H








Tabs Menu #26


Tab Menu 1




Tabs Menu #27


Tab Menu A 






Tabs Menu #28


Tab Menu 5




Tabs Menu #29



 Tab Menu B




Tabs Menu #30


Tab Menu J





Happy New To All my Readers! I know I could give you no special gift other than my tutorials. This was my last post of year 2009 :>. I thank everyone for making 2009 a memorable year for me. Wishing best of luck to everyone.

No comments:

Post a Comment