Bloggers Festival Guru

Thursday, April 12, 2012

How To Add These Navigation Menus To Blogger

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,

Go To Blogger > Layout

Click Add a Gadget or Add a Page element

Choose HTML/JavaScript widget

Simple Paste the Navigation Menu Code inside HTML/JavaScript widget

Hit Save

Drag HTML/JavaScript widget and drop it just under your Blog Header, as shown below,

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="#" >Link 1</a></li>
<li><a href="#" >Link 2</a></li>
<li><a href="#" >Link 3</a></li>
<li><a href="#" >Link 4</a></li>
<li><a href="#" >Link 5</a></li>
<li><a href="#" >Link 6</a></li>
<li><a href="#" >Link 7</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="#" >Link n</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

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

MBT Navigation Menu #2

No Image Used

<style> #navcontainer { float:left; width:100%; background:#fff; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; } 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: #6659A7; 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: #666; background-color: #fff; } </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>

MBT Navigation Menu #3

No Image Used

<style> #tabs { font: bold 7.5pt Verdana; } #navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#575656; font-size:93%; line-height:normal; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; } #navlist a, #navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; } #navlist a:hover { color: #fff; border: 4px solid #fff; } </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>

MBT Navigation Menu #4

No Image Used

<style> #tabs1 { font: bold 7.5pt Verdana; } #tabs9 img { border: none; } #navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color: #666; text-decoration: none; display: block; text-align: center; font: normal 10px/18px verdana; } #navcontainer ul li a:hover { color: #6659A7; background: #eeeeee; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } </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>

MBT Navigation Menu #5

<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGyUS6BuWGGlQjocX2UHWTxzcn1pfs-K2Fk6Z6wkerr8zr_AYuSoz0Ep5cPWvhIdU8DUvujaK-PKlzUW8myiMuw10osIaelh78NbydVyTykP_kBVF5YVWPjH82LoIvJKsfSpbTJtPYWX4/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"> <ul id="nav"> <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>

Tabs Menu #6

<style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHjAurlHI-VR_QXbTXmuevTPPYSrVM3VLs13KXjd53KZQmXicOHrJ_Rrsv_mzXGbC7BLrjOLzBqlDVTVkQIj6ArJdDeEzKt9bP3NrQaIn7s1JMXD9FewDp7xkOkwZOS_pUTuiTm_5e7nw/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisQMh3KqWmW8RmJQkP7wZI3QVV6MrtZl-yrXGnpA18hgmTek_ORe9-EiBrU-b5OAinRzzgkZN9wD4SvBC00sUggpU4pLTGRHEECUCdxoRbm5gCnwMdxg10VXqzbk24ow11yjKR320F5oY/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style> <div id="tabsI"> <ul> <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>

Tabs Menu #7

<style> #tabsG { float:left; width:100%; background:#666; font: bold 7.5pt Verdana; line-height:normal; } #tabsG ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsG li { display:inline; margin:0; padding:0; } #tabsG a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitVzHCk-3PHK3ZSJLHWhUFDcL0eV3SMFUfQV0hyphenhyphenRPFcyNO3KSqUd4YrUe-88_2HQ6fhRuQmfX4su8dybKpLmws3k_JDLqpoQ6ZtPdZIbE77U_6_uUFkUxxmNTLvGkpLNWoePNDEPCucR8/s1600/tableftG.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsG a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtgBowMFqZs9GjBnA6nIDIxZoD7XDIygEsd7fMa_C1j_Yj2tt8nwDligtPelWqHYq-8EDV2UYUYmKdN0xqYOgwOuKpBiXXg9OX2eN9rQ2vYYlWfDG3c5cVWP85hSK4hiG3Te9v9QVI25g/s1600/tabrightG.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsG a span {float:none;} /* End IE5-Mac hack */ #tabsG a:hover span { color:#FFF; } #tabsG a:hover { background-position:0% -42px; } #tabsG a:hover span { background-position:100% -42px; } </style> <div id="tabsG"> <ul> <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>

Tabs Menu #8

CSS CODE:

<style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSQoQQcQO84ifN9WtFHQp14H57EkSlmhewyFnuEi9R0t_Hgfs3OJY80_NybBQiJEXnmyrjZK5R3vsI0N-CPRdn8EdrSbVQ49rmOJRsLeIGKCsZiDm9Xe0FlNPROE5-ol8TiKHoE3zFA0Y/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcZXbLVNQcpfm5iUPvdOb2bjMl38yd2YgEBCH1JVmg7hjmYW60Y-M6CdqHzn7k2EF6ZlCYZ44b_SN0EkLptU_PjZnWRtJo8ZJ_Gef7DT9sr2gbhPD1wqRTUFwM4q5TsR5dbhvzRaSrN4A/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } </style> <div id="tabsF"> <ul> <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>

Tabs Menu #9

No Image Used

<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </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>

Tabs Menu #10

<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcDDnfVGnc9MFH-xCNtcWVWY9nJ7xgEpES9DtbDne8eFbHor8rR37VqVZnetkRX3Dj4c1ELiM7fNAakSMQf7LC-zEUKXw3OCYf-q7IK2J1Lgz06xtZBDShoLujOzpq_nD0D8pBK1o3BF8/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpDSD1vkNn8Zvj8TDiuvkS5a2bWGEQQs4UrEaK_TkKTKxZrBpIrypfmazB49yfwhzMScbkL6imD41SRUlRb0HWSaoylL2UFEu4Zs4pUxJckHfDXERW-3LqmGQEuAFqy8W6kAe4FL_YmiI/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"> <ul> <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>

Tabs Menu #11

<style> #tabsD { float:left; width:100%; background:#FCF3F8; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #F4B7D6; } #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsD li { display:inline; margin:0; padding:0; } #tabsD a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd9g6xqV7x7aU8R7DdhwPD-7Oq590lF8E4VhQ6d3_4iXwyFEpTfLQSy7jMGaEjP0wG6J_xcPky_R-J8muE-T-KQwgMrvzLGuCkyk2kbFKjsTwCaFYjf8_aROoJOOdgWdZWI4hJ0eLx3p0/s1600/tableftD.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsD a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg285uKKK9HnHEcRQQYUYiHlQT5nDiKZEpLTvF4UCmzZMQCRrPLBJXSc3XB_sd5TwGlGBKVN34MlOeq7bHDkZgyb8IGCGWhBltPjfYoat01D1DxtsPsvPkWDxYPeQhCkeYAoCtJQDUkc5Q/s1600/tabrightD.png) no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsD a span {float:none;} /* End IE5-Mac hack */ #tabsD a:hover span { color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD a:hover span { background-position:100% -42px; } </style> <div id="tabsD"> <ul> <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>

Tabs Menu #12

<style> #tabs12 img { border: none; } #tabs12 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs12 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs12 li { display:inline; margin:0; padding:0; } #tabs12 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNelqj5LYLY-W_5whcp0wWyR7VqTGumy_pqLSEpI6f7o9yP7CMPkhGwaoN8BtVLC09LrVbhYrpKK-pOmx6p7a7h1nubY_q_5LPPJ9SZLUMJu_PKoJwv8IppPJtIvNoDlCnIR8S2ASYTq4/s1600/tableft12.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs12 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQSffAwrlb8n7qZCszwzqcvpsntwSRGMcsZMlk1K4HOhvrOWnZNTu83kUYa61l52GQ0_4wLSEcxbaVgKTiBHKF0j79tlC5y6AP7Xo0-JiUtDNvXfSZWWPZK0mZ92xVpw6tXzl1bHN7N30/s1600/tabright12.png) no-repeat right top; padding:5px 15px 4px 6px; color:#E4D6CD; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs12 a span {float:none;} /* End IE5-Mac hack */ #tabs12 a:hover span { color:#FFF; } #tabs12 a:hover { background-position:0% -42px; } #tabs12 a:hover span { background-position:100% -42px; } #tabs12 #current a { background-position:0% -42px; } #tabs12 #current a span { background-position:100% -42px; } </style> <div id="tabs12"> <ul> <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>

Tabs Menu #13

<style> #tabs11 img { border: none; } #tabs11 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs11 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs11 li { display:inline; margin:0; padding:0; } #tabs11 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtDf6oPBPAW8xp7kCi17o5v2Se82ULtdT_PFeGANGmVRHItZA9fgGZnhZUH9Uv4X_lT9t8s12puFApnUEIn_O6y-FyAdXGTBvHAt7zvc_g2DEPCn0GcoMxYeouo_RX5NV5D8mfnCA10go/s1600/tableft11.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs11 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0snnlDJqWoAnJi0P5wfquTbIOhiNgXK1R2XbYNZQJ8UCXpdQVdqZsxEKpnGiExD7MEUcDzNMrfmcRkDHgJSedzH9rdgUU4DcXhCLP0jynX6j6UfrBN2feMF040OiQYozSpT_WikOUPoc/s1600/tabright11.png) no-repeat right top; padding:5px 15px 4px 6px; color:#9F9584; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs11 a span {float:none;} /* End IE5-Mac hack */ #tabs11 a:hover span { color:#FFF; } #tabs11 a:hover { background-position:0% -42px; } #tabs11 a:hover span { background-position:100% -42px; } #tabs11 #current a { background-position:0% -42px; } #tabs11 #current a span { background-position:100% -42px; } </style> <div id="tabs11"> <ul> <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>

Tabs Menu #14

<style> #tabs10 img { border: none; } #tabs10 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMyS-FTtT45alfCruU7HJTQl9WxjMGhlxQ4SF6h-1xISAWaUveCYHhah_ZM6Uvj5pmEpAXBs4Cyg5O2pd7b7YrqBp79FXvXL11whgqtBFjTkmtJKm6bsopz3DcRi9p-avxnALZmY9Db6w/s1600/tableft10.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY40Jl8V65MRU7Srt2pQ2AGVrSRUhdR9I0XxFx6V8Y_fg5Jl8UHhoFt0-9-yooMy_R257WIW682Nnqol-2yfRhNVefL6csfR1scAKz1V3PmT7UbSUO00ZwUMAK5SuCBVliLR4I1Li0aew/s1600/tabright10.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; } </style> <div id="tabs10"> <ul> <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>

Tabs Menu #15

<style> #tabs9 img { border: none; } #tabs9 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #F45551; line-height:normal; } #tabs9 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs9 li { display:inline; margin:0; padding:0; } #tabs9 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdy2jUi52Su4EZv1BBRHcN_7CVjE8sqx5KSQ8IQiD3S3CE8rXAr2lXZ_PFEVKIpDJgXT3XtQXvtkM2BdgvgDC7qbb0LBEmqLM1MYDSc4nJPY3XGpIylLEQidkSg8aHPkkokDGz9xV9S-E/s1600/tableft9.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs9 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilE-qk6zkNRwf4ytkl6vvFIUsK0hmEQX3J1c9nsJNXTqNUl7qiIcXZZavg_b6eEWMEYnvcZd9SpVGlFQ79InXlH3_ND9DAW0G7VulOiCOtjeydfosXe__kPpy58y5Nu1t1BEniD6evFxo/s1600/tabright9.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs9 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs9 a:hover { background-position:0% -42px; } #tabs9 a:hover span { background-position:100% -42px; } #tabs9 #current a { background-position:0% -42px; } #tabs9 #current a span { background-position:100% -42px; } </style> <div id="tabs9"> <ul> <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>

Tabs Menu #16

<style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDReUoPL0hiDv11QHUXOXACCFV_o2VZ15ePPVT2Rs607rZKEIRu-9MxS8Gwrl5eXhtUKQTl-P-X6IoHxfKro9RDIMEYz6RleCYjz-A-GX_ENMENo2bRUbP5TJ0Ez6hzb8uOyERWmZ2puE/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLZN8usKMyA5EUL2H9LC1aRThbIoH8cKc29cCuO3LSp0GqV8MBusL2yW7b81s7j09LxCPHuOnSPZeBS3rlRGyaYroxJernESeUxVaiZtEBdkVXo9JlLoREVBl5xO1gv2wxXoXp0QsEYws/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } </style> <div id="tabs6"> <ul> <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>

Tabs Menu #17

<style> #tabs8 img { border: none; } #tabs8 { float:left; width:100%; background:#FCF1F6; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #E276A7; } #tabs8 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs8 li { display:inline; margin:0; padding:0; } #tabs8 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxgVJbSSwmUwhL8tDSK1UaCav6S4MjfG5jvG6W6ofykZ8k9G1IoZbAVqgwke6Fhob6vXuLwAnLGXUhISCUwFIPL8a1voPoyar9sQ7GcnRqVC3OtAaR599Gv_PjuiioS1ChQbcWa4npEDY/s1600/tableft8.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs8 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS3pb1Xkfl4WIvsXMnWsRPdm0xDbROtNAyv2AmI7Pzuj9ES5wB1E0n7P4uIJ3CgJbopolxGdHsZxnL_65zR4FOX0JykvWeAtZD9awspClVFD_5H_n2H2T0gt8V5a-XTBLon7nVKQ4z18c/s1600/tabright8.png) no-repeat right top; padding:5px 15px 4px 6px; color:#333; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs8 a span {float:none;} /* End IE5-Mac hack */ #tabs8 a:hover span { color:#591333; } #tabs8 a:hover { background-position:0% -42px; } #tabs8 a:hover span { background-position:100% -42px; } #tabs8 #current a { background-position:0% -42px; } #tabs8 #current a span { background-position:100% -42px; } </style> <div id="tabs8"> <ul> <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>

Tabs Menu #18

<style> #tabs7 img { border: none; } #tabs7 { float:left; width:100%; background:#D4DAE7; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #333B66; } #tabs7 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs7 li { display:inline; margin:0; padding:0; } #tabs7 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEZZWBCxUrcxEFLCS-4qS_mlYYWvekZS1IicEeCJRV5vL2iBWqJN4ICDIeEJYgPV1i9z6OAAN_YLNZxC6wZg5_jcUmd-DnPcZ-SR0NPocoqFiVtf16kSH2LAptQ8eeVp6tdlMcLCkTfU0/s1600/tableft7.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs7 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHWvZ9InZ0z2J-pBpd7sS6kcz2hSmLLPVP4cn9tGPsVOhORqVXmqcWiMUruEhos0a7nCyf-E4eZjmgHknxR2TPcxSnAytfoB4qtj7k2qTKWxvsv4we8yv6pzJ7JI87WBWmhoTXbEITHOw/s1600/tabright7.png) no-repeat right top; padding:5px 15px 4px 6px; color:#999; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs7 a span {float:none;} /* End IE5-Mac hack */ #tabs7 a:hover span { color:#ECB546; } #tabs7 a:hover { background-position:0% -42px; } #tabs7 a:hover span { background-position:100% -42px; } #tabs7 #current a { background-position:0% -42px; } #tabs7 #current a span { background-position:100% -42px; } </style> <div id="tabs7"> <ul> <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>

Tabs Menu #19

<style> #tabsK { float:left; width:100%; background:#E7E5E2; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #54545C; } #tabsK ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsK li { display:inline; margin:0; padding:0; } #tabsK a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqIKPGkSx0Isisw3qoMR-OjcvhF_52UJu2bvqCdTsvbdVbsTyQraCTm_8lQHIfCh4P8fVn5UHnfvGiHmhH0hl9uBYYULLy5Z3-iLbPdHn7ybzyM4wCn7UXAufWIcLfFWpdEVdYW6yIqDA/s1600/tableftK.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsK a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdwn67bNzTlZ-dolGbHAwrM-tUJCBrPFW27rFmcDUAMJzm9qcN-k7dcIj3_8khTOqRV7DGJJJUAENIis7GtbXrrYf1T-cnVZW7Z7rt8kqODjULx-hpzzKOvbOwWOH80ANCeKYqAbLFh6k/s1600/tabrightK.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsK a span {float:none;} /* End IE5-Mac hack */ #tabsK a:hover span { color:#FFF; background-position:100% -42px; } #tabsK a:hover { background-position:0% -42px; } #tabsK a:hover span { background-position:100% -42px; } </style> <div id="tabsK"> <ul> <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>

Tabs Menu #20

<style> #tabs4 img { border: none; } #tabs4 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6B78A9; } #tabs4 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs4 li { display:inline; margin:0; padding:0; } #tabs4 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyKmd8iRQgQhifGqjgO_liXSzLo9r8_sYt5v0ZMj79vCVNCi8WF7JsSToyLmNX66eP7RDPMolfTnMrXUiaAuds4rkMnXJQAID9L45L4jawYOB8Z34memyZmYS6xohdd9YHlGiEPFxaheo/s1600/tableft4.gif) no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none; } #tabs4 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn1qE9GLidsob-hmLfL93eoAMlErS7V44yW711Ez-qGHaEWs2bfkZ0ViKL3wN8FyKb7-H7JcHw2T__-apNN7mrqLv2zMP96pGdT2RroEso92b8iZvFDlzQXfHLTFoVkdYiVWHyTo08U2I/s1600/tabright4.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs4 a span {float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span { color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4 a:hover span { background-position:100% -42px; } #tabs4 #current a { background-position:0% -42px; } #tabs4 #current a span { background-position:100% -42px; } </style> <div id="tabs4"> <ul> <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>

Tabs Menu #21

<style> #tabs3 img { border: none; } #tabs3 { float:left; width:100%; background:#E4E6EB; font: bold 7.5pt Verdana; line-height:normal; } #tabs3 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs3 li { display:inline; margin:0; padding:0; } #tabs3 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyFg4k-cZFAy8g7Sa9dMFBPseSM_W_tCG_4gTm6KblNaC_8H44eguWqyjBE0x0lM84WSA6FnLOUXW-Q3IspzmD-ekjGPJXEn6h1bKZsbosUOYLzGrR_MMYTJu0Fy-clDA_cXE8T-86POQ/s1600/tableft3.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs3 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJGpdhflTPAqFZSpJ-3TEd6k-ugjFoNg63LbAU_X-f_QOE2IXDIA_LjTQ1XLy4ELel6EaXSIHyNe5TZjdB0gFT0bgEBHHI5LarRutG6SBb2vzp6I_EAAjkMkqVTWEyAaHs2bUyU4Iv0S0/s1600/tabright3.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs3 a span {float:none;} /* End IE5-Mac hack */ #tabs3 a:hover span { color:#FFF; } #tabs3 a:hover { background-position:0% -42px; } #tabs3 a:hover span { background-position:100% -42px; } #tabs3 #current a { background-position:0% -42px; } #tabs3 #current a span { background-position:100% -42px; } </style> <div id="tabs3"> <ul> <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>

Tabs Menu #22

<style> #tabs2 img { border: none; } #tabs2 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #84776B; } #tabs2 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs2 li { display:inline; margin:0; padding:0; } #tabs2 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihHQMeWDucZrnI3uHWvbCAoIrp2jBDvSVB0ARxW7uvBDwEcSloCIUcnW3BFhwcJEYOVwg2ASjoCwxTsu0zs3dGk5GupzNXbexuCgKZJl4qdGR5zsP85xjiSTj9WSgaFsOFT3dpqIcBGmk/s1600/tableft2.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs2 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHQAyYlK-9barlJxxNGMeYku3FzKh78tVjf3W-kL_OsGo39W1viF5ep_AqLCO1GUPddSBcmlOMoefOxITHIuZx5nELM6HSLWOeR0njv5SQlStVtf8xpmKeuaUp-G_47HT7MvquLvBXdk4/s1600/tabright2.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#84776B; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs2 a span {float:none;} /* End IE5-Mac hack */ #tabs2 a:hover span { color:#74675B; } #tabs2 a:hover { background-position:0% -42px; } #tabs2 a:hover span { background-position:100% -42px; } #tabs2 #current a { background-position:0% -42px; } #tabs2 #current a span { background-position:100% -42px; } </style> <div id="tabs2"> <ul> <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>

Tabs Menu #23

<style> .container { width: 500px; padding: 15px; margin: 3px 0 20px 0; border: 1px solid #ccc; background: #fff; } /* square */ #navSquare { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #9FB1BC; } #navSquare li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navSquare a:link, #navSquare a:visited { float: left; font-size: 12px; line-height: 14px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; } #navSquare a:link.active, #navSquare a:visited.active, #navSquare a:hover { color: #000; background: url(file://localhost/C:/Program%20Files/CSS%20Tab%20Designer%202/styles/Square/Square.gif) no-repeat bottom center; } </style> <div class="container"> <ul id="navSquare"> <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>

Tabs Menu #24

No Image Used

<style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Liddddnk 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>Linddddkdd 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>Linddddk 7</span></a></li> </ul> </div>

Tabs Menu #25

<style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRk2VlTcllzDaA39Rgwv1Pk60zeKaYVwLGHBLnhAWC4WwxuL23mWW6DGmY3t524zpSGQAl0D9NksJU9MIalPJPgEEE2WzF8gfVE06KqRBtRHYUhAOVmng0oMr2cYZIM51oEpGxixoBx20/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZPkGf6sdPQdEnDL-QNQoy_fzbCZqV-_W37p2loflC4PE51nLon2lpzRKvXJh2F5QsWaWlMI8XAnznofv2DD5ur9fmqy7VGlupkX1FdUDb0JSPoqH2KZY0oGrkH24fccwN-Ed5oFHKi5A/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <ul> <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>

Tabs Menu #26

<style> #tabs1 img { border: none; } #tabs1 { float:left; width:100%; background:#F4F7FB; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs1 li { display:inline; margin:0; padding:0; } #tabs1 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX2mPVMW2wtuciOZq4cMxZNT3DiUTBMecdAvo8hjkh527NBvgaBieVYwiqvSEtkoVxGkkPcxXrZlnecL_EacSq1tPBaz2Ir2NhStlK3zDlV8qUHPgY7w4oQHJJrNWU1cHId8lp-LY7B4E/s1600/tableft1.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs1 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuEDhTe17FnxZlXgPdnYYVV8vZmjLOJa1aKYoiWtNEuaVsNR7DtmIBCiQCmjrrhZCkMOw16FkzigXZ8HesZ8z5SKx2KRXsoBM1zVTgweABhQ-sg2T0hGgc-SC6pjhtt_T8NVuN7YjCvD8/s1600/tabright1.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px; } #tabs1 #current a { background-position:0% -42px; } #tabs1 #current a span { background-position:100% -42px; } </style> <div id="tabs1"> <ul> <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>

Tabs Menu #27

<style> #tabs { float:left; width:100%; background:#BBD9EE; font: bold 7.5pt Verdana; line-height:normal; } #tabs ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzdbS2nXEPIbkp2_TADZkw4iYtlAxk3K2zwJ58G-2d_UmASQxd2FpcsDSB0cpkfbupizKTd_wPOFfMhXOiP4HYp4aK4O91EZWnFcP7E8H_DDSmz9Dg98wLHpLaEmTQNageiwHWGOBhwTA/s1600/tableft.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOjtC7WU9Qgzmi5u8ewCJOtvBjndd2WVMI6-bXO16l-2-sjUALTBrRXdG18fE2wEvwyRrRV_U33n0YfwtYzJLad1DozZ89gtqyZ8AGSpmEWTwy3Brg5EzeQiSNS58cRtRJNLwhFzQJspc/s1600/tabright.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#FF9834; } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; } </style> <div id="tabs"> <ul> <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>

Tabs Menu #28

<style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line-height:normal; } #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0; padding:0; } #tabs5 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUDVDXYvEyQWWLYwLYKqEwfmxPQgBMpx6EtoyErIJw9Y1mIyRdunBsdYPYvgHq-lhKJxCyU3in0PNoRoTlugwCvHbyG5zd-WEWEm2shaq9yfRB97uqi5qFSdXnzOzXbyqnEsyM0LPZmZc/s1600/tableft5.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs5 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ2QRg8GuwFHaZNVEjZlRzg-a6JpBKe87QZVsHmQ5omWgNXB3p0wZ2Cox7e8MIRDZdyNsZoNHl9rmK_9Upnlm_Zf_0Hyv3OkEEbpWlPkv4unJn_DXZMZbDkjL3FlkWwgKbd9nac6L3bDo/s1600/tabright5.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs5 a span {float:none;} /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span { background-position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background-position:100% -42px; } </style> <div id="tabs5"> <ul> <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>

Tabs Menu #29

<style> #tabsB { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; } #tabsB ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsB li { display:inline; margin:0; padding:0; } #tabsB a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8MzfbI-zUjLckbnXpxlZcfKO2CSwFqTPgsqxfNK_VkFg3uryoh13Ur-PGYziRzFnTrOjKSROLVlW1Nx6UBHkpaN-A-V1vQwk-5MyPzhI6jm0Vb-PRkTnlsQ7SDZzor1N3V_8_OAwqLg0/s1600/tableftB.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsB a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSMndSkU0E-DHtbxMtS1d1hWr4ZjUyNJReZB88jlCx8aAQ-VP0LWDk9V6mSOR-sTxa4jkRAL4YpFiK_m09ylxttuguZq76Z8FSwOoyvBNk29baeBST5-IDCUS9ziVJ6LWKmCdgGmCHEbQ/s1600/tabrightB.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsB a span {float:none;} /* End IE5-Mac hack */ #tabsB a:hover span { color:#000; } #tabsB a:hover { background-position:0% -42px; } #tabsB a:hover span { background-position:100% -42px; } </style> <div id="tabsB"> <ul> <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>

Tabs Menu #30

<style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAJ71BQpTv7JvVe5ulisDkzMjZKSnLTANtseRdgiq7UHXvSBf-5-aY714wxWod1iKfoSnmLpvRzJs_Bu1TIElKzqywg_rEsRBSinAbhhhllBrnnYUKhP3T55h_LSpgw1E4GcyNEIJA6A8/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg64vbpSl2XiDp_z5OqMlf5PSg_KIEyFvzP3i1Ok0o4Tp68-ZIBD813prg-n77nZBi4eEYkHS-rki0DgW6SkYoEryTGhvtH-SyauCyMKvWxLp84z1FGpSKYtByc4uA877TCnpxqmOQmoLE/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ"> <ul> <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>

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.
Visit PsPrint.com to get the best deals in online printing services!

Thursday, April 12, 2012 by Wajahat · 0

How To Add A Vertical Navigation CSS Menu To Blogger?

After the release of 30+ Horizontal Navigation Menus, we head forward to a beautiful collection of some of the best looking vertical navigation menus that will put soul to anyone’s weblog or website! I have modified the codes made by Christopher and Highdots and have made them compatible with Blogger. I hope this collection will be of interest to most of you simply because these navigation menu tabs can easily be installed, customized and multiplied! I hope it will be of great help to new designers :>

How To Add A Vertical Navigation CSS Menu To Blogger?

Well the process is as simply as it can be. Simply follow these steps carefully,

Go To Blogger > Layout > Edit HTML
Back-up your template

All Navigation Menus below uses two pieces of codes. One is The CSS code which is responsible for the look and feel of the menus and the second is the HTML code which is responsible for positioning the menus. So lets know where to add each code!

3. Paste the CSS code for your selected Menu just above ]]></b:skin>
4. For the HTML code there can be two positions either your right sidebar or left sidebar. Depends how many columns you have.

If you have a right sidebar then paste the HTML code just below <div id='sidebar-wrapper'> or this <div id='sidebar-wrapper-right'>
If you have a left sidebar then paste the HTML code just below <div id='sidebar-wrapper-left'>

Note:- Since most templates use different coding therefore if you could not find the above codes then don’t worry simply share your blog URL in the comment box and I will view your template coding and will tell you instantly which code to search for!

5. Finally save your template and see a beautiful Navigation Menu hanging on your sidebar :D

Editing The Links In The Navigation Menu

To change the Tab Menu Links and Titles, simply edit this bolded part of the HTML code,

<li><a href="#1" >Link 1</a></li>
<li><a href="#2" >Link 2</a></li>
<li><a href="#3" >Link 3</a></li>
<li><a href="#4" >Link 4</a></li>
<li><a href="#5" >Link5</a></li>

Replace #1, #2, #3 etc 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 from the HTML code,

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

Live Demo
For Live Demo of Other Navigation Menus Simply use our HTML Editor and Copy and Paste the CSS and HTML code at right areas and then start playing with the code :>>

See Demos With MBT HTML Editor!

Navigation Menu #1

CSS CODE:

 #menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-mQ5zNiQZuNjUB-5O-2dLLfoKJkQZ0E0Odp36-OFKE6BA64kLhAdaIgyxA4cjKvNYAAmYBQ1XEuAP2BiZGwWYNtzN-Ys6Sy09-DusO3l7t6ePROLdEhmrh4gfIW8nDPOmDUwVaLzEGY/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-mQ5zNiQZuNjUB-5O-2dLLfoKJkQZ0E0Odp36-OFKE6BA64kLhAdaIgyxA4cjKvNYAAmYBQ1XEuAP2BiZGwWYNtzN-Ys6Sy09-DusO3l7t6ePROLdEhmrh4gfIW8nDPOmDUwVaLzEGY/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }

HTML CODE:

 <div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #2

CSS Code:

#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitflbyuHtBTug8XWYAvP5MhtjFySX8EQs9F7YVf9KDDwV8Z4C-EhlUtgLGu4onRfwE2zATbP68b_lPWGQvYiisnBWRtu-C2UUM7pwN-5pEyktQmO5T_FGh-uLLKqkz1mTJTlv80zlDyLY/s800/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitflbyuHtBTug8XWYAvP5MhtjFySX8EQs9F7YVf9KDDwV8Z4C-EhlUtgLGu4onRfwE2zATbP68b_lPWGQvYiisnBWRtu-C2UUM7pwN-5pEyktQmO5T_FGh-uLLKqkz1mTJTlv80zlDyLY/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }

HTML Code:

 <div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #3

CSS Code:

#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1rohwuAnI52c6lMWB7dx7AESLYFMCamHKkFzKIFhto05OBTp9lzIB290cSvpyjZzmfshAgK9pu18YpdFXPJkMBM-om5SR3vgrCL040N6g_KwwP5tJHcHP4Jt0BzLATrmRNvTLe_I0sK4/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1rohwuAnI52c6lMWB7dx7AESLYFMCamHKkFzKIFhto05OBTp9lzIB290cSvpyjZzmfshAgK9pu18YpdFXPJkMBM-om5SR3vgrCL040N6g_KwwP5tJHcHP4Jt0BzLATrmRNvTLe_I0sK4/s800/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }

HTML Code:

 <div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #4

CSS Code:

 #menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu7unBkvxQ1uvr-m9Kr8N95V-rKExVQKrzTI5eazPO6e2PCNkBnFNpckaCaRzorRZhiExUrQdvhz2bnKRqy7nUmtNj6kH1rmAiYqKzk-f2KBIQCR0iauFegOew0_b3YZpSRCvVB_DdtlY/s800/menu6.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu7unBkvxQ1uvr-m9Kr8N95V-rKExVQKrzTI5eazPO6e2PCNkBnFNpckaCaRzorRZhiExUrQdvhz2bnKRqy7nUmtNj6kH1rmAiYqKzk-f2KBIQCR0iauFegOew0_b3YZpSRCvVB_DdtlY/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }

HTML Code:

 <div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #5

CSS Code:

 #menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAL282kuxbcrRKxH5ivgMNToOrDb_ESQ6bBoCvJN-XxNn99ujvpddqYkP3ayC-ioRjAOfXu8rkMCALZkMQpqG5jIBUmy0Xa9e6QNLKdbcZiy3V_02u7QAJeY9Oh55E19K0biWioPGYEyw/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAL282kuxbcrRKxH5ivgMNToOrDb_ESQ6bBoCvJN-XxNn99ujvpddqYkP3ayC-ioRjAOfXu8rkMCALZkMQpqG5jIBUmy0Xa9e6QNLKdbcZiy3V_02u7QAJeY9Oh55E19K0biWioPGYEyw/s800/menu14.gif); padding: 8px 0 0 10px; }

HTML Code:

 <div id="menu14"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #6

CSS Code:

 #menu7 ul { list-style: none; margin: 0; padding: 0; } #menu7 img { border: none; } #menu7 { width: 200px; margin: 10px; } #menu7 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO8JtzA5X1sKY-AriSmp1SjY98mqdhJE8ZdwvoyxusTncUpJNm7yw2ojZlCu0aPaAbl6gIdPbI4XfxzQMt1190gY1tCWV35OXF4OeVqot5Bh8ADaP1FulPq45igg2uEJJnl_5HhlpsjxM/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO8JtzA5X1sKY-AriSmp1SjY98mqdhJE8ZdwvoyxusTncUpJNm7yw2ojZlCu0aPaAbl6gIdPbI4XfxzQMt1190gY1tCWV35OXF4OeVqot5Bh8ADaP1FulPq45igg2uEJJnl_5HhlpsjxM/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; }

HTML Code:

 <div id="menu7"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #7

CSS Code:

#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; margin: 10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnfzWTDE4xkR8PIQm3D5OJvUq5_rnPQtVaTVME00SznjRSmd9X7I0BQc-ll6en9fuXkd8Gzc1hoMrTfd9jM-TNUaCXnm8orRDFdTyV_ViQjcAtC2CmdJNmT8GQlcdTbqMqCzrczuum_L8/s800/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnfzWTDE4xkR8PIQm3D5OJvUq5_rnPQtVaTVME00SznjRSmd9X7I0BQc-ll6en9fuXkd8Gzc1hoMrTfd9jM-TNUaCXnm8orRDFdTyV_ViQjcAtC2CmdJNmT8GQlcdTbqMqCzrczuum_L8/s800/menu2.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnfzWTDE4xkR8PIQm3D5OJvUq5_rnPQtVaTVME00SznjRSmd9X7I0BQc-ll6en9fuXkd8Gzc1hoMrTfd9jM-TNUaCXnm8orRDFdTyV_ViQjcAtC2CmdJNmT8GQlcdTbqMqCzrczuum_L8/s800/menu2.gif) 0 -64px; padding: 8px 0 0 10px; }

HTML Code:

 <div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #8

CSS Code:

 #menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP5dN3gbSBRYv0PbitanlNdMODC5zfAwv4ku58FQeRbshaNV-T56r3rkNrIKmtB3WcdH-VzLEuK1fP9-iLb0WEBqbWshZ3SN5q_3cX0DluiEbP-q8Dxo4wEJCgBlhZMXThc3WzkqBElaw/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP5dN3gbSBRYv0PbitanlNdMODC5zfAwv4ku58FQeRbshaNV-T56r3rkNrIKmtB3WcdH-VzLEuK1fP9-iLb0WEBqbWshZ3SN5q_3cX0DluiEbP-q8Dxo4wEJCgBlhZMXThc3WzkqBElaw/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP5dN3gbSBRYv0PbitanlNdMODC5zfAwv4ku58FQeRbshaNV-T56r3rkNrIKmtB3WcdH-VzLEuK1fP9-iLb0WEBqbWshZ3SN5q_3cX0DluiEbP-q8Dxo4wEJCgBlhZMXThc3WzkqBElaw/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }

HTML Code:

 <div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #9

CSS Code:

#menu12 ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border: none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs0AMYcz_E6xACGxPkHzFFJz5XJ6Bmr_QJkbdxLLp6mSVfUOVTaWszD0ejh888HqNKvItQ0np240Gmkp6LalGteZqE6soMeTXelKiKPy_NUjkDxqjTiabagHpAW5foNbGfDAj8jYWIZ9k/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs0AMYcz_E6xACGxPkHzFFJz5XJ6Bmr_QJkbdxLLp6mSVfUOVTaWszD0ejh888HqNKvItQ0np240Gmkp6LalGteZqE6soMeTXelKiKPy_NUjkDxqjTiabagHpAW5foNbGfDAj8jYWIZ9k/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; }

HTML Code:

 <div id="menu12"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #10

CSS Code:

 #menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img { border: none; } #menu13 { width: 200px; margin: 10px; } #menu13 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu13 li a:link, #menu13 li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFJMJVljgdCetFMKwWMsfVZkO7udyxDP5WxnlwOYLCwM9AK5VjnIMqhXNeRAFXMdvn56dAtHwPj1j3qJivVOBNBoE8MtF4ZKoUJrgy-8lCzyxCdrD01EQwkxfQwWn0m13zdRKJ6cZO6qo/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFJMJVljgdCetFMKwWMsfVZkO7udyxDP5WxnlwOYLCwM9AK5VjnIMqhXNeRAFXMdvn56dAtHwPj1j3qJivVOBNBoE8MtF4ZKoUJrgy-8lCzyxCdrD01EQwkxfQwWn0m13zdRKJ6cZO6qo/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }

HTML Code:

 <div id="menu13"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #11

CSS Code:

 #menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQmX8ly18TcVAPhsQjq0SHVyk0Jii9scz5sAtGLHbQRcq8BbcmDrLsbfRPRuq2Dh8LvIEWZ7fXEdUVohcQ5lGEbZ1T3fwMDM-hidvUTuzxGpyzicfNmqbyc93rrbY-WZCksQGJvL3qYqk/s800/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQmX8ly18TcVAPhsQjq0SHVyk0Jii9scz5sAtGLHbQRcq8BbcmDrLsbfRPRuq2Dh8LvIEWZ7fXEdUVohcQ5lGEbZ1T3fwMDM-hidvUTuzxGpyzicfNmqbyc93rrbY-WZCksQGJvL3qYqk/s800/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQmX8ly18TcVAPhsQjq0SHVyk0Jii9scz5sAtGLHbQRcq8BbcmDrLsbfRPRuq2Dh8LvIEWZ7fXEdUVohcQ5lGEbZ1T3fwMDM-hidvUTuzxGpyzicfNmqbyc93rrbY-WZCksQGJvL3qYqk/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }

HTML Code:

 <div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #12

CSS Code:

#navlist { color: white; background: #17a; border-bottom: 0.2em solid #17a; border-right: 0.2em solid #17a; padding: 0 1px; margin-left: 0; width: 12em; font: normal 10px Verdana, sans-serif; } #navlist li { list-style: none; margin: 0; font-size: 1em; } #navlist a { display: block; text-decoration: none; margin-bottom: 0.5em; margin-top: 0.5em; color: white; background: #39c; border-width: 1px; border-style: solid; border-color: #5bd #035 #068 #6cf; border-left: 1em solid #fc0; padding: 0.25em 0.5em 0.4em 0.75em; } #navlist a#current { border-color: #5bd #035 #068 #f30; } #navlist a { width: 99%; /* only necessary for Internet Explorer */ } #navlist a { voice-family: "\"}\""; voice-family: inherit; width: 9.6em; /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */ } #navcontainer>#navlist a { width: auto; /* only necessary if you use the hacks above for the Internet Explorer */ } #navlist a:hover, #navlist a#current:hover { background: #28b; border-color: #069 #6cf #5bd #fc0; padding: 0.4em 0.35em 0.25em 0.9em; } #navlist a:active, #navlist a#current:active { background: #17a; border-color: #069 #6cf #5bd white; padding: 0.4em 0.35em 0.25em 0.9em; }

HTML Code:

 <div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #13

CSS Code:

 #menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin-top: 10px; } #menu8 li a { text-decoration: none; height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; } #menu8 li a:link, #menu8 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNNLhriowcWerqcWJoEbaYOMo_krfg0Tn9d1SUZU50ZjPSJ-cs_JkA3Gi6VSrQA_yZkEDQBX077WEzyrRUdIYcrmEi36ebRw5xl5beOZ7alRMCrHuyBN66LgMfqKAFTulwC_DKkUjkwLo/s800/menu8.gif); padding: 8px 0 0 20px; } #menu8 li a:hover, #menu8 li #current { color: #257EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNNLhriowcWerqcWJoEbaYOMo_krfg0Tn9d1SUZU50ZjPSJ-cs_JkA3Gi6VSrQA_yZkEDQBX077WEzyrRUdIYcrmEi36ebRw5xl5beOZ7alRMCrHuyBN66LgMfqKAFTulwC_DKkUjkwLo/s800/menu8.gif) 0 -32px; padding: 8px 0 0 25px; } #menu8 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNNLhriowcWerqcWJoEbaYOMo_krfg0Tn9d1SUZU50ZjPSJ-cs_JkA3Gi6VSrQA_yZkEDQBX077WEzyrRUdIYcrmEi36ebRw5xl5beOZ7alRMCrHuyBN66LgMfqKAFTulwC_DKkUjkwLo/s800/menu8.gif) 0 -64px; padding: 8px 0 0 25px; }

HTML Code:

 <div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #14

CSS Code:

#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu8 li a:link, #menu8 li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx08dc4BmJoHtw0dETJiDCrFp1m0dxzUnE4uvfoLmAPLRi2LyD76pZmC-lnBPnNq8R1Ke-Y0TQxN5QJHm-194u_wlQpmCYrJ_Ef6T25m7At0PfBg_WqMy7Kfr1yspGwoA8tLrV1CPnHJM/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx08dc4BmJoHtw0dETJiDCrFp1m0dxzUnE4uvfoLmAPLRi2LyD76pZmC-lnBPnNq8R1Ke-Y0TQxN5QJHm-194u_wlQpmCYrJ_Ef6T25m7At0PfBg_WqMy7Kfr1yspGwoA8tLrV1CPnHJM/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }

HTML Code:

 <div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #15

CSS Code:

#menu9 body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; } #menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #3D261D; border-size: 1px; border-width: 1px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #E4D6CD; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjClvPn6fsU0rBwIUQfKIRr-qQq6LhSR3IAgjVygXG13C-TVI5d_mAlIeR5VyV3dp2z_MzENp5bWUTmzyzw7B_Lf_JQcrNb4D4eMgwTUnxDD_mKYsSDrBsv8Els2n_UbilDMUNx1iwKELA/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjClvPn6fsU0rBwIUQfKIRr-qQq6LhSR3IAgjVygXG13C-TVI5d_mAlIeR5VyV3dp2z_MzENp5bWUTmzyzw7B_Lf_JQcrNb4D4eMgwTUnxDD_mKYsSDrBsv8Els2n_UbilDMUNx1iwKELA/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; }

HTML Code:

 <div id="menu1"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #16

CSS Code:

#navcontainer { background: #f0e7d7; width: 30%; margin: 0 auto; padding: 1em 0; font-family: georgia, serif; font-size: 13px; text-align: center; text-transform: lowercase; } ul#navlist { text-align: left; list-style: none; padding: 0; margin: 0 auto; width: 70%; } ul#navlist li { display: block; margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em 0 0.5em 2em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; }

HTML Code:

 <div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #17

CSS Code:

 #menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #8BADCF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmaDRS5c23zXxGAnyHAVg4KtoE9X24PjC0L7nylKBdrI1DhWpiyZwxRkYJShsuUNivEx2DqhvrIVyTWyAt00nKMNg06IkVhwGdYaFqdAqvHqCgD08kB98Ljh44FfrSOG-m7HhOhyphenhyphenRqEgc/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmaDRS5c23zXxGAnyHAVg4KtoE9X24PjC0L7nylKBdrI1DhWpiyZwxRkYJShsuUNivEx2DqhvrIVyTWyAt00nKMNg06IkVhwGdYaFqdAqvHqCgD08kB98Ljh44FfrSOG-m7HhOhyphenhyphenRqEgc/s800/menu3.gif) 0 -32px; padding: 8px 0 0 10px; }

HTML Code:

 <div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #18

CSS Code:

#menu11 ul { list-style: none; margin: 0; padding: 0; } #menu11 img { border: none; } #menu11 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; } #menu11 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu11 li a:link, #menu11 li a:visited { color: #889944; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiifVr9v-xzd3jzZpcG29CzXAoq0laXix_lrsnx99hQAy2q9_l67Ti2QsHhIjXicchOySv-CayNKMzXw2PkySZWLw-REizsbsJbkhKNrRxRBzWic-0UQEEl2Gq5QndUIsVkJ0C13VacunY/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiifVr9v-xzd3jzZpcG29CzXAoq0laXix_lrsnx99hQAy2q9_l67Ti2QsHhIjXicchOySv-CayNKMzXw2PkySZWLw-REizsbsJbkhKNrRxRBzWic-0UQEEl2Gq5QndUIsVkJ0C13VacunY/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; }

HTML Code:

<div id="menu11"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #19

CSS Code:

 #button { width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Tahoma, Arial, sans-serif; /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/ font-size : 10px; background-color: #90bade; color: #333; } #button ul { list-style: none; margin: 0; padding: 0; border: none; } #button li { border-bottom: 1px solid #90bade; margin: 0; list-style: none; list-style-image: none; } #button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #button li a { width: auto; } #button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; } #button li #active { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }

HTML Code:

 <div id="button"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #20

CSS Code:

#menu ul { list-style: none; margin: 0; padding: 0; } #menu img { border: none; } #menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu li a:link, #menu li a:visited { color: #5E7830; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9PFPK3X7imTcr6jZ4mQKjozIzcZsDr5Z3r_ek-Tc37mCGdRq25y3LoOOfeOTWRjRAqHwvqg_HEx9odVRenR03N0CftR6vZsfWOlO9ISnpHb1zpWQMGkrjf40kZvvBlgH8UJPaAyIq2hE/s800/menu1.gif); padding: 8px 0 0 10px; } #menu li a:hover, #menu li #current { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9PFPK3X7imTcr6jZ4mQKjozIzcZsDr5Z3r_ek-Tc37mCGdRq25y3LoOOfeOTWRjRAqHwvqg_HEx9odVRenR03N0CftR6vZsfWOlO9ISnpHb1zpWQMGkrjf40kZvvBlgH8UJPaAyIq2hE/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } #menu li a:active { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9PFPK3X7imTcr6jZ4mQKjozIzcZsDr5Z3r_ek-Tc37mCGdRq25y3LoOOfeOTWRjRAqHwvqg_HEx9odVRenR03N0CftR6vZsfWOlO9ISnpHb1zpWQMGkrjf40kZvvBlgH8UJPaAyIq2hE/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; }

HTML Code:

 <div id="menu"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #21

CSS Code:

#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #3688BA; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCaQosfSNmx95gfwEqypBXTPu94pZg7qBt-mOTtKsBL6hDr9B7xygamjjvV4jKXD-p5Ov_48bQezw7ydfDGzAG5-Kq-5PjakoVDnIIEZmMOCoXN6Gs3C4tV2l8Ap9LqQRHQem56SBKCWI/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCaQosfSNmx95gfwEqypBXTPu94pZg7qBt-mOTtKsBL6hDr9B7xygamjjvV4jKXD-p5Ov_48bQezw7ydfDGzAG5-Kq-5PjakoVDnIIEZmMOCoXN6Gs3C4tV2l8Ap9LqQRHQem56SBKCWI/s800/menu2.gif) 0 -32px; padding: 8px 0 0 32px; }

HTML Code:

 <div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #22

CSS Code:

#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ALi-0m9Do5FQsMf0riEWy3LZgoqSJz1xt2u5CQlBxzPPdTECUsL9CFa1UKj36tSDVEmby40hJLCDofyfLMWhHoqaIur8ub8oyvoHwumJ16DrqGfcDDvFzD9zJbF9Vezkr7aX7XbrfPQ/s800/menu5.gif); padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:hover, #menu5 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ALi-0m9Do5FQsMf0riEWy3LZgoqSJz1xt2u5CQlBxzPPdTECUsL9CFa1UKj36tSDVEmby40hJLCDofyfLMWhHoqaIur8ub8oyvoHwumJ16DrqGfcDDvFzD9zJbF9Vezkr7aX7XbrfPQ/s800/menu5.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ALi-0m9Do5FQsMf0riEWy3LZgoqSJz1xt2u5CQlBxzPPdTECUsL9CFa1UKj36tSDVEmby40hJLCDofyfLMWhHoqaIur8ub8oyvoHwumJ16DrqGfcDDvFzD9zJbF9Vezkr7aX7XbrfPQ/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }

HTML Code:

 <div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #23

CSS Code:

 #menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVFAzMuC2zVAp5E9rID0SyZSqBhyphenhyphen2g7BTPDm4oYXX3ie-qvz9-5i5nxVHc_mOIyf141vnCxNBY3jgcx7nPUglYxCALwNQNr5S8lJx7sQGdgNWM-n4_pegxgAmYKc105fvZIohsTxK4ktk/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVFAzMuC2zVAp5E9rID0SyZSqBhyphenhyphen2g7BTPDm4oYXX3ie-qvz9-5i5nxVHc_mOIyf141vnCxNBY3jgcx7nPUglYxCALwNQNr5S8lJx7sQGdgNWM-n4_pegxgAmYKc105fvZIohsTxK4ktk/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }

HTML Code:

 <div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #24

CSS Code:

#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUDIZCmbI7FAE6Oo4zDtjF_o4O_ibQQd7woIUsM1hWi21mPZ_uEPo5nLAy4t8ty7Y_g6TfZO_4x12vnx8EvJk1rdSZyyfM4gYDga0JOCH3igkTun_vTUlm0Ai56ojffdrhAWZkD4crnSA/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUDIZCmbI7FAE6Oo4zDtjF_o4O_ibQQd7woIUsM1hWi21mPZ_uEPo5nLAy4t8ty7Y_g6TfZO_4x12vnx8EvJk1rdSZyyfM4gYDga0JOCH3igkTun_vTUlm0Ai56ojffdrhAWZkD4crnSA/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }

HTML Code:

 <div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #25

CSS Code:

 #menu10 ul { list-style: none; margin: 0; padding: 0; } #menu10 img { border: none; } #menu10 { width: 200px; margin: 10px; } #menu10 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu10 li a:link, #menu10 li a:visited { color: #4D4D4D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEMS__di12Nj9-CbNWwWyASy5gQvE-y5sMzVPC6bHvsfrwxo9HToRdfimZagDwNqBk4ROEgbgGSM01viUEbCL384T0TQ3fpmX9UwtwMvq2PMMkJa2rVDf69tlEEcmm1R1qs3oxNUKamLI/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEMS__di12Nj9-CbNWwWyASy5gQvE-y5sMzVPC6bHvsfrwxo9HToRdfimZagDwNqBk4ROEgbgGSM01viUEbCL384T0TQ3fpmX9UwtwMvq2PMMkJa2rVDf69tlEEcmm1R1qs3oxNUKamLI/s800/menu10.gif) 0 -32px; padding: 8px 0 0 10px; }

HTML Code:

 <div id="menu10"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

That’s All!
Hope you have enjoyed the post. Feel free to ask any question related to these navigation menus. I am happy I fulfilled my promise of publishing this post :>

by Wajahat · 0

Bloggers Festival Guru

Thursday, April 12, 2012

How To Add These Navigation Menus To Blogger

How To Add These Navigation Menus To Blogger

MBT Navigation Menu #1

MBT Navigation Menu #2

MBT Navigation Menu #3

MBT Navigation Menu #4

MBT Navigation Menu #5

Tabs Menu #6

Tabs Menu #7

Tabs Menu #8

Tabs Menu #9

Tabs Menu #10

Tabs Menu #11

Tabs Menu #12

Tabs Menu #13

Tabs Menu #14

Tabs Menu #15

Tabs Menu #16

Tabs Menu #17

Tabs Menu #18

Tabs Menu #19

Tabs Menu #20

Tabs Menu #21

Tabs Menu #22

Tabs Menu #23

Tabs Menu #24

Tabs Menu #25

Tabs Menu #26

Tabs Menu #27

Tabs Menu #28

Tabs Menu #29

Tabs Menu #30

How To Add A Vertical Navigation CSS Menu To Blogger?

How To Add A Vertical Navigation CSS Menu To Blogger?

Editing The Links In The Navigation Menu

Navigation Menu #1

Navigation Menu #2

Navigation Menu #3

Navigation Menu #4

Navigation Menu #5

Navigation Menu #6

Navigation Menu #7

Navigation Menu #8

Navigation Menu #9

Navigation Menu #10

Navigation Menu #11

Navigation Menu #12

Navigation Menu #13

Navigation Menu #14

Navigation Menu #15

Navigation Menu #16

Navigation Menu #17

Navigation Menu #18

Navigation Menu #19

Navigation Menu #20

Navigation Menu #21

Navigation Menu #22

Navigation Menu #23

Navigation Menu #24

Navigation Menu #25

Best WordPress Theme of 2014

Popular Posts

Blog Archive

Follow Us On Facebook

Labels

Followers

Contributors