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

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="#" ><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

<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/AVvXsEgP8p8Ac9OOTVsUu-owaj4eDuKvprH-RHgwpJUFyMBXf1FOw2wATXpMUJGVcrqY2Hvw-UrC2xKam0g54KeewvYtTXy9x-UC_1y40yYhsWB4LJAn12Tp1OlzLMZbnkjAyF9S_jABHQoiQE4/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/AVvXsEgIkMPduoiF0ai3Cn_lC4D4nWKOHo22yv3YyRV6ywRFoR-RLHRahxvUbyhaCZxUqykGXSvDUxwzzRWa9AseuLswycBcHGJYW5w4b_HxE9KCJOX3WVoc9psPr49NN66Qk9jVWz_-7OVXDZ4/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/AVvXsEheSOxt6h_QPUvLeh8AMVbNHlLqY87lsPVNzVYkLCz5zOvUALvinCr6wjCBdV7hM4kCj-AZI_vDJH_SIJAFxZ16PnTM3yyUxTG9f8dzoO_b5TKYdmC2VWP5iKfAsnSIxJKdYYu1CeRb1DM/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/AVvXsEh94yk2HMWBOIAgE303Zz2Yb_IqNEGH0ZKmbOGy117FoOiEuu-HppTfShAfYcUTZu6UpNzZoG3rHFBEb0xuTga8aGtAFSpqXpTjK80ZyD0_d0G0yNaFkqlMq9KI4N7KKAQhUyYWQpc3SZ0/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/AVvXsEjLSlgQ5Yu41WkLIp-r-AR0mqkjFUrlfFovNO4jVlg1D5-JYf1GYA-RVuz3vsYra-Engj6pcWethx9ACHW9Ej24XrlUOvPldWtp6RCxJLnZnDehvhkKCZt4xCYabpyR9eg0171KDCEmuMw/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/AVvXsEiKbXLcy68KW_Pq560J6IEWmNehGMGoJuMSlMgODJSHog4O8aC5unezL6IlgKe8dJDHaBQJGUb2l9dLQPkTgmnAwPzOYQK7mE4ODL5kGVPo1iZ2h_e_An8JpFJ2_48FnCKe8TsaWovtarA/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/AVvXsEid30MXV7Z0UquR4fCXZokM-xaNU4EYX_mcGP1suzgzCq6WF0M7KIk71Yewbsv3y6JUlS1uyC0HonIjaG2c3FGndSc6kHDEeQSCDuqytbTUZpS8EoeFcetNnQOSPhyphenhyphenhgdgIh_vzhrkS4OQ/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/AVvXsEgEdwiyiQh_HcxFdYeY2l-Tuki535r70oZtsaV1VulbSWqru1i7mG6axCx0vrMmTHV9_XqQeCtcX7Fm3ZwiEFbc1z8uqw0XYdc4g1Pyg5lsnu5UuarxC8DRV6ogPfk6ft33j29bMxTnvXU/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/AVvXsEhNML724IWgSoQLnpQAD8wuiXbtRW1bZxqdENVcgTRlpE0B6_I_W2sFal2rIq-D2d2gG7d9PXWXIpdiHQ3AcyrJ2BskjBJh7evpY3UP5des1eQdR0V1A18w93rqOMM4f1x1MlpXj_lsHIQ/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/AVvXsEiktablOTT3nSM3LXWkJcjxgEEEVNzyHXte1qzCk5pSSnh_I2aPwSHB1uIX2gBUP3ZDxjUV0mOR0CJG0CwYYQrMJr8bBcQzXgeRVND_D6J33dG0BeOvpO7_BEPtQA4Qt1c_CycKsdrOfWc/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/AVvXsEjbKaSefsYxML56wEioLbcEy1E7FEcw-M2wEba8ql3oIFTCyTkABz3-mWFYU86LOIlXerbyZIVQcvV5m-ONCza3VorGREWfyNUoo1mG0qQE6fHQ6njCzEMf_TLuXFdpsL4SdZhEe3eKQXc/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/AVvXsEjkymr5Hmaq1UC5fv__zT6E0ok-94Ln1yOFySOEYoulyPyWnbe7z3hsv0tSOfW2bP-smTAIE0QkN4VJvB-YrIAck9xMoQKWcTaEFQBWlLfcHmXGvjkgwZNFqVJcM5nt5m6CZxB_iOAVoVs/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/AVvXsEgWb_cGq5SBdjQeYw1DcDoQ1-GW_M8sS0GeRky0_6sPV5oNzUR8ZQKINsONxRk4bS7T8j2Yflbx0cmOE9igp1rdF8dkgD1ed3bcsbzw7LfiezOgGMhbDOaiDsoMTI-uJlk1IFgkQu6dHfQ/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/AVvXsEgHVTlLfJKzhbpLFZl4vtAsAjuB9kD6rnJ6tIg12TBC9p9hB7_WgknRSC-mXWzrJHyM_thE9Rx1GZhLPuuKrMAoqcAOsY3CjTVUVUBBUN9EYoAuf8y54jnfELn44mW2yqMkBlyCAaqUsYg/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/AVvXsEju8OUVAe6b7VdOFtoSzeButBHIfs_mUq1iWqdRG8aBYWTHgosv5QdQmCcoJNhhxK6NPbKgNnlGLu0X_hsL5JipX4Hq1azYjENiyYxmrdS-fEv9ePRz8LpphG35sKc0v3a9glwYyUSpYak/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/AVvXsEjsw8XIZwgsv6AT1AyZfFWxSQzvLL7vrE9T3szqzqUFOa9vpKQNuMcXQC1CFRkf5U0_txr0RNfh_BDzySVMENmHhGZv42t4NHb_LPUn3hx71tIn71-X3k_pwFECOrCs1KyIlHl3Seoklzo/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/AVvXsEj7rf8eciZxODR2DRWjl6gFb9nz7_df51U3wHV5rmWpAPMiXCtCsyHMACp29lXTp49-BzCuh-LcEJFYfPJuq5MgvqY_gty0vXH0qwjaJYdYPq140qdg0kKBazZFPFe_WHo5Wfqeb0Rld24/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/AVvXsEjIkAqFj4kshyphenhyphenJenMZZLh6f-jY82e-JRKSp4uJypdfER_pRGLIBOX16yXU8wuIN9XU_ozfZkNQbjcstvqxz9fMf1pJUJfBl_TKsWAg2C_cE_gCYDisokEwwu_m1eM8uLMclT5_DuFgDT1Q/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/AVvXsEjlBjVP9GjA7WUaDG9PLufMQwmK1fmbc7ucm8BUKPwD9RgGRQo8YAhTxNi7mM_VbAMfVdEJTgYsx_dJ4zlpSGw_OqGR6RECxG96HUGrPcStJYJq6B4Kt_ZlzabiZWhlsucxu8HSnmcgCoU/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/AVvXsEinaRz82y7mMa1OlZ1EcOlYZXREZMCAl_Qy8d8Aa3473RUtJYQnsALHXRvlyQygXhVNpBZ3-ORsO1hoI9flpKFtZFFPNFHjHa7SbXZ5zIBq6SGQLcBA7InhuvjQ1mP72D1WVYJIbO9EyFQ/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/AVvXsEhMdPdalqBBzsQLR5ZGxQYgBetJhdnQ3g25F7xWQmsmee03zNXYnQv8SaZVnXSDjBwjdOz6u0yxSjaSQrDP3P2zO1JFqlC-oUKQ726WCTVOMVR5nbcA_1gL_HQZJJLBc-7tYvkwK9Zq6b0/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/AVvXsEjSphEoqvWuDdPqgCrcDCwPUBK_xgf86CpIHhI4O_O9Am1ndlePEc80zdyaiQiGimMkEgtyRYUT-HFP5tLkLr1OqPCzF3Wpxk_rC2PoRgypW7TlOGmLRH2vP9ctxyIyYPaXJgueAMO-bOM/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/AVvXsEjeb0yapg8WUn_OvI4dSPEUwkI5ONHOTSusKtsZFosv5eA2JGn4-3X4EwIvN5CVUftkaj9UXq6praCNR6EVDdHkhaCG0a1cY_-egQuswCiM1I1fnuwD2DTd6M5nbBgK5fVRJCUX9l9BzZc/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/AVvXsEgP0MInDHghIHxDWffoqGp9fpFHRjS75cpMn2vluQvIaz72r91WidCut583dkO4VvwOlNTYmCDJhecl1YxLDZcvQanXGB1CNu3CX0my4eSe1Zoml5qFaMxUaQd2UF-uP0NzazeBSCaVVqI/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/AVvXsEjYkq-UqzlJzVLlZhUE4xZGhh_kRaEhnEHM1RAMw956zzLjsHmHn5UERUpqnGzdNehKJrgHrSsWMeoAOfDzGmLi-GXF2EU2DWv9JZd3PkxSUfAIr22TWmkOxgz7_5bnF-mxFREApDJnXdA/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/AVvXsEhW-pc1F2mtat3SXDih6eGebWKu8kDtDRzLBU4HFHPiqJ9JxQY-acf3JhreQGmO-tByUaQOgi1vEYvYngLHIqyR3w20Jmbh7kr4ig_GOhAS2pKz5yDSsl6HRgO4SqxSq_pYtjY_ag3dIRM/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/AVvXsEijkftkCRZkANe3CJAD3g0n9ZgBHx3EeYZdCCjfKkwZ63W3qbYKv6Hz4ciNT4A3ZeIcxLdTMqYU0VQbGgV2wfI1thuaWJcw8oedPAXt8VgNMHiCNJyi2BZjppqjwnNTT1xsJCmu34JuGt8/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/AVvXsEhz8SYx0vbLEAXPFsgDSxeGkjKc6bgyPDjRqTCas6XybcaLvmR-30s1bInI_4bDQBaJsWSox2sjgWgpf2mMn0Id1Rtza-30oBhUoJcDhvRNh7fpDFUETbu7ZaAvtgkOAfi4UmaPBrz3q8w/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/AVvXsEiTwtof5xYbafuoV5yfMvsDk2j1f6eBvj4-oifJJ9G43JN8qGySA5IyWaZWAHeu6z_NBR_c9Ok-eD8la4sl9zBfN64R9s4zjEoa0QEJrvCC11iLCOSiYV4aFzlCLHyyN0o9pByuT07SjMo/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/AVvXsEh3bMEDZ3hHnC_GTKNpZlbLc3iZ7X_DbYcVIP2em0Nw_CYRIOHdSH1iXEDDzBW51ca5XiADgm8kSMbOXYyT3CGVDN0nilsMpriL5Uhzor9cH8g0cFO7Jqz8K1tFRG7Rvd36rZn3kQRQL7w/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/AVvXsEgAiMRu8T_Hkc3w_UgXBcSDpj3ANKJPXWk_zMT5D9hKyhYGjK-TunRRnr0R26S5aVX1ZcAhtYqAFmpjwFkAmNnbKorQXxETvltyE25GJo-klOFFL7E_pwdlx6QT5mmbWd8rjkzLPx-8i_U/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/AVvXsEhN8EH5rw9rKEZp5oQa5TL75XGiVTwOPB7oHngpjb3k4o242r8x7V9QMLhKPlPsCeOQpFYXFnCVhm6yhvZq7RuCdoXQYUjJleDVkrkCt9MocHmKSkO6cMHoggBWr4pJcdfJR1PZP5nfnNc/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/AVvXsEjqA_R-dWBJBrsFlqPuXjUB_9_TbUbb2LWsbpI125ya7hmmmlNiJ0V2V6I2IL0KaRtGu_L3tZ7XoTfEhSTKGa4XC9kmt61rrAWMcjG73teJJefy-azGbF0xfd2wxPYDJSUqSAUIMJ3UKFw/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/AVvXsEiekDRePNgF_-62rGQRkE_ctAckCc_E3LXufXy0l35yxIFoxvLZ50BeWlmew019Sv57Z2-OxkMHPz-EQu_6SNgbW8ezKqeMvshjiHvrxfiN6IAXEwsEDDFC3WYnJcsqQKk4d4SPkjh5_98/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/AVvXsEiCqb0ytyMkfNVq5ZZrHxvSS_BQ-TsKG93ckBAGDF_-dsvkp7SZpHmFd2ctXKCmKxVYIW7r6yF4JFD6U8AxH1xSmDDpgUhWxvunOca9PPkvrmzzhiMGRoz-kNgv9LU8i15N3RtZ2oHJmB4/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/AVvXsEi_MQ6W0QddoZNm0SxoiTdKtKY61OcLIET1Se89aNhKWWWAaoJOg2z1bd0xC7A58_x2QnwPfvQ4jCZ4qJ4fJScAlyBaXv2iEhPlH_qdX1qDMssjiSDnqvDOUDwIRp62H4sEXyL9Fhsqdhc/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/AVvXsEgj9UqAWlgs6muyDdDJrRSHvWTjZoXg3Uu8MAqqlIIDRhaWeYS-w-BwDhA58j-eM4GEXZvNJnuGxu6Il0GWthp6jp1OgOSrkaXavd6vy4ocF33P5BmcODHs5sLIBHVQlEdMNNroGUHgGOM/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/AVvXsEgZ28vMw_yxbrGrbyJ9-ttZyRwQMjINwCpTZ9DJEGxHIxHpTnIEqX97NnN1270AkATBePc3nzdJ0La-n6TbHyYzu32ZT39-oiiRaE3auEsZ53qQOjT5-YF4FPBQtHX0syk-os0qwv2iF_s/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/AVvXsEhEK-YLxBZyLYIYZ4bUHZqBxZRoJmyVBU17_6ujIXNxinKjP4hJQWJBHQ08fLz5FLwO3gTl4UAbcUpFY02B09ApReUIiCpDNqUGPBjPOlitRaZDOv3Wj4igpU9LyMy830plp9M8I_jpbKo/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/AVvXsEjStZE_g-zjSQRy1T4hF0DWk7pdl-7uYZP24F-n8dHhyphenhyphenlXPIkbaTToRbIcJ6bvUAo9iruOw589TZwC4m-nrMlg7OLFqrjqsUArY0PLMe1znTM2B_N8k5exiaIQN0plbo-M-3adw_AN7fbM/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/AVvXsEj_KnMxPKJwk6n_CTGpsugPP-gvKiHNCiFn5ZpcAb2mdyowt4oQRgjRjTWYDveojxxnSPBsm5QbhxecK0gGffLeJgDLGKWw9mBFdHoTEeOWyzkQa9s0TKqVhupLSBfShi8k-z8XSKdEtjw/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/AVvXsEgdAy4dkNF-H7spd53EArDCswWvXng1pPu87ofEHLqqvO737KpJUPwMHFZlM9TCTp9Vrx4PJ-b54WDWoBfabhw6ihdGMciayX8YuO_Sa9EGxEwOpT93-qKYtpr-3SmujPS_96P4z4WYguE/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/AVvXsEhcx1JtSmzGgg7lKc59d1Jynu23fDCcyZI8wkpxQOiE07ce1uPNBIWGoiW0Rjg_3AXrQb4_24krT1VlQMu8erGwMDhBidF049KnKulrOLzDSJq3NdwsvGpARnEqQN8Ct9qExjcKeos6HBI/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/AVvXsEj8-4bkC3uVxYRFQVysCNN6A5r1UWRthDVmRAlKSUTXpIlg6FwHQCl9Ubr2KVps-E-uCcn9FddeqWhxk4RWsutzXOSEZT4jw-IQjt6i9jZBqVv0cGmgi-RmYfyKEp1nVLSbMjqJ5Wp7f3Y/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/AVvXsEjqvWpR7rwtkPeV65d7KEwf2hQmLSXGgAhoymLgDIMgffHpAeWhNn5g63VA0swjvpw1kSgxjhQ7CunEN5mgK5r9tXEjSRfpY2tRFDdZW0TwFSSKAMagypG22z6lobTqw282BDSVbnRMxG0/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.

Pin it

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 1/01/2010 CSS and HTMLTricks

59 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

JayarajJan 1, 2010, 7:31:00 AM
happy new year to you mohammad i wish this yaer will be a prosperous year for u and for all the readers bye nice post
ReplyDelete
Replies
RAHULJan 1, 2010, 10:08:00 AM
HEY THIS IS AFTER A LONG TIME I M COMMENTING

I JUST WANTED TO SAY THAT THIS IS THE POST PEOPLE LIKE THE MOST

ONE MORE THING YOU CAN EASILY BUILD THOUSAND OF BACK LINKS WITH THIS MEDIA STUFF JUST INSERT YOUR SITE URL IN THE CODE WITHOUT HYPER LINKING

THIS IS THE BEST POST GOING TO BE COMMENTED BY THOUSAND OF YOUR VISITORS GIVING YOU A LOT OF THANKS

THIS HAVE BEEN INCLUDED IN MY TOP FAV

THANKS ALOT AND HAVE A GREAT NEW YEAR
ReplyDelete
Replies
NILJan 1, 2010, 12:13:00 PM
hi mohd wish you and your family happy new year may this year brings for u lots of happiness,success,lots of smile on your face and of course lots of readers

regards,
NIL
ReplyDelete
Replies
Ms Hetal PatilJan 1, 2010, 12:18:00 PM
Hello Mohammad,

Happy New Year !!!

Thanks for sharing these beautiful navigation menus. I would like to use one of them, but i am using MBT Church Theme, so please guide me how it can be used?
ReplyDelete
Replies
Mohammad Mustafa AhmedzaiJan 1, 2010, 2:56:00 PM
I wish a splendid 2010 to all you lovely friends. May you see nothing but love and success in this year.

Thanks everyone for the appreciation of the post.

@Hetal Patil

Just give me a day, I am working on further 29+ navigation menus. You can then make a better selection :>. Will help you out with everything that will go on.
ReplyDelete
Replies
Hetal Patil RawatJan 1, 2010, 4:13:00 PM
I will be waiting, no probs.....
ReplyDelete
Replies
SreejeshJan 1, 2010, 4:14:00 PM
Wish you a great New Year 2010. Thanks for the post
ReplyDelete
Replies
SreejeshJan 1, 2010, 4:26:00 PM
Can I have one like this? http://we-fix.blogspot.com/
ReplyDelete
Replies
UnknownJan 1, 2010, 6:12:00 PM
Man! Happy New Year! You helped me a lot with my website, I mean with your tutorials. I wish you a good year and the biggest success that is around!

I made a good move by subscribing months ago!

Have fun and keep on groovin'!
ReplyDelete
Replies
Mohammad Mustafa AhmedzaiJan 1, 2010, 7:27:00 PM
@Hetal Patil

Patience is a virtue :>>

@Sreejesh

Thanks for the greetings.
Do you really like that navigation menu??

@Lucky Flaush

Thank you so much for those motivating words. I wish the same to you.
ReplyDelete
Replies
SreejeshJan 2, 2010, 7:56:00 AM
Yes, I was looking for something like that. Actually, I was thinking of asking you but you posted it already. mind really talks and thanks for the menu.. keep posting and keen growing ... good day. :)
ReplyDelete
Replies
SreejeshJan 2, 2010, 8:00:00 AM
I need an appointment when will you be online?? please leave a msg here http://www6.shoutmix.com/?srjcoooldude
ReplyDelete
Replies
Mohammad Mustafa AhmedzaiJan 2, 2010, 11:27:00 AM
@Sreejesh

These navigation menus will further be equipped with a vertical set. Make sure you keep track :>
You can always catch me online at my ID mustafa.stc during night.
ReplyDelete
Replies
Manisha.Rautela.BishtJan 5, 2010, 2:15:00 PM
Mohd ,How can I change it with my present Tanzanite template ? Do i have to tweak CSS and HTML both ?Simply adding the Html in page element does not help .
thanks.
ReplyDelete
Replies
AnonymousJan 6, 2010, 3:51:00 PM
want to know mohd if we can remove the double navigation and replace it with the above modified navigation in Tanzanite template ?
ReplyDelete
Replies
Mohammad Mustafa AhmedzaiJan 6, 2010, 4:23:00 PM
@Manisha

Well for that you can do this,

1. Backup your template
2. Inside your template search for,

/*-------Navigation Menu---*/

And delete the entire code from /*-------Navigation Menu---*/
to /*----------------SEARCH----------------*/

3. Now copy the css code for your prefered Navigation menu from the above collection and paste it just above

Note:- The CSS Code is between <style> and </style> in the above code collection

4. Now search for this,

<div id='nav'>
<div id='navleft'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Sitemap</a>
<ul>
<li><a href='#'>Sub Page 1</a>
<ul>
<li><a href='#'>Sub Sub Page 1</a></li>
<li><a href='#'>Sub Sub Page 2</a></li>
<li><a href='#'>Sub Sub Page 3</a></li>
</ul>
</li>
<li><a href='#'>Sub Page 2</a></li>
<li><a href='#'>Sub Page 3</a></li>
<li><a href='#'>Sub Page 4</a></li>
</ul>
</li>
<li><a href='#'>Contact</a>
<ul>
<li><a href='#'>Sub Page 1</a></li>
<li><a href='#'>Sub Page 2</a></li>
<li><a href='#'>Sub Page 3</a></li>
<li><a href='#'>Sub Page 4</a></li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='http://www.mybloggertricks.com'>Download Tanzanite</a></li>
</ul>
</div>

and replace it with the HTML part of your Navigation code from the collection above. The HTML code starts just after </style>

5. Now search for this and delete it,

<div id='subnavbar'>
<ul id='subnav'>
<li>
<a href='#'>Quick Tour</a>
</li>
<li>
<a href='#'>Other Webs</a>
</li>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
</ul>
</div>

6. Done!

I hope that was clear. Feel free to ask anything unclear Manisha.
ReplyDelete
Replies
Gedi JunctionJan 24, 2010, 12:16:00 PM
Double Thumbs Up, for such an Informative Post
ReplyDelete
Replies
Hetal Patil RawatJan 24, 2010, 7:25:00 PM
Hello Mohammad,

I saw your post of vertical navigation menus today, but still i would prefer going with horizontal navigation menus, do let me know how can i use them in MBT Church theme for all my blogs.

Thanks...
ReplyDelete
Replies
MaryFeb 4, 2010, 8:50:00 PM
thank you again for a wonderfull and handy post.

this is my favorite website about tutorials :D
ReplyDelete
Replies
doc rogersFeb 11, 2010, 4:53:00 PM
brilliant! thankyou for some great menus.

quick question ... on the tab menus they seem to refer to images stored on another site. is it possible to host those myself in photobucket. i did try but it seemd to mes up the menu.

rgds
ReplyDelete
Replies
Mohammad Mustafa AhmedzaiFeb 14, 2010, 4:38:00 PM
@doc

Of Course you can do that. But I have saved all images in blogger which means they will load fast and will remain there forever. So dude why take the hectic of saving them on any other server ? =D

I will never recommend Photobucket due to their limited bandwidth!

If you faced an alignment issue then make sure you are using the images in their original size in pixels.
ReplyDelete
Replies
Twin PoppyMar 8, 2010, 11:12:00 AM
Hi, i've added such menu but i've got one problem. when the browser is loading the page for first time the menu jumps some 20px down, and then i reload the page and it is in the right position. Any idea what is wrong? Thanks in advance!
ReplyDelete
Replies
Mohammad Mustafa AhmedzaiMar 12, 2010, 12:42:00 AM
@Analyst
Dear you have added it to your right sidebar despite at the top. Your template has bullets customized by default by Arrows. Since the codes do use bullet code therefore arrows are appearing. If you shift it to top, it will look as shown in the demo.
A solution is to find and delete this code,

background-image:url(http://2.bp.blogspot.com/_vZagjBLs2Ws/SyIYkyOS0oI/AAAAAAAABq8/SyV4NFxw1cQ/s1600/11.png);

Make sure to backup your template.

@Backpackers
Dear share the blog URL where you have applied it. This is happening because your header might not be aligned properly with enough height length.
ReplyDelete
Replies
Mohammad Mustafa AhmedzaiMar 15, 2010, 8:04:00 PM
@doc rogeres

Apologies brother for a late reply. really sorry! :>

For your first question find edit the code below to align them to right or left,

float:

For your second question Use this code instead,

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

Just chill even further now! Enjoy :D
ReplyDelete
Replies
AnonymousMar 24, 2010, 4:20:00 AM
Hi Mohammad! Your page is so useful, thanks for the great post! I really really love Tabs menu #8 but I can't see where I can change the hovering color of the tab?? It is blue right now but I would like to change the color in the HTML code.
ReplyDelete
Replies
Mohammad Mustafa AhmedzaiMar 25, 2010, 3:53:00 PM
@Anonymous

Thanks for the kind remarks bro!
The hovering effect is due to two images which are,

1)
http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5iiWmCI/AAAAAAAACv0/4lAk0jar62Q/s1600/tableftF.png

2)

http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5jIWoBI/AAAAAAAACv4/1TJsSRUoYes/s1600/tabrightF.png

Simply change the colours of these two images according to your preferences in photoshop and then upload them and replace the current image links with your customized images. That's it! :>
ReplyDelete
Replies
mohamedApr 2, 2010, 4:38:00 PM
thanks man its nice
ReplyDelete
Replies
Fathimath Jumana HaadheeMay 11, 2010, 1:53:00 PM
Hi Mohammad.
How can I change menu tab font??
Thanx
ReplyDelete
Replies
JEspanaJun 27, 2010, 10:58:00 AM
How can I center the menu, I am using 21 or 25 I can not remember.
ReplyDelete
Replies
AnonymousAug 23, 2010, 1:46:00 PM
i took the first type code. it works well. but i want a one more effect in it. when click a tab for a page I want to highlight that tab only for that particular page...how to highlight the tab for a particular page?
ReplyDelete
Replies
Lindush Von BergeracNov 27, 2010, 1:26:00 AM
Hello Mohamed, here Linda from Europe, Slovakia. I used your Tabs Menu #22 for my blog, I just love it!!! it fits my blog in style and even in color. The only issue I have is that I do not know how to center the menu. It is going to left...And I would like to have it in center. Could you advise me, please? Thanks in advance and all the best! xoxo
ReplyDelete
Replies
Mohammad Mustafa AhmedzaiDec 26, 2010, 1:53:00 AM
@Jespana @Linda
To center the menus kindly encompass the code with these two extra codes,

<center>

Paste the Navigation Code here

</center>
ReplyDelete
Replies
nguyenthucJan 17, 2011, 8:49:00 AM
Hello Mohammad. My name is Tyler, from California, USA. I love your toturial. I like Tap Menu # 6 and using it. Please tell or show how to center it in the miđle of blog header. I think it will be nicer if I could move it to center.
Thanks and appreciate your reply....
ReplyDelete
Replies
Mohammad Mustafa AhmedzaiJan 18, 2011, 12:47:00 AM
@nguyenthuc

Welcome to MBT Tyler,
I have already to that query in my last comment i.e comment#34
And you can play with the code using our HTML Editor
If you needed any help please do not hesistate to let me know. Peace :)
ReplyDelete
Replies
AnkitMay 20, 2011, 11:16:00 PM
hi, great tutorial
i want to add drop down sub menu on Tabs Menu #9
please sir help me i will grateful to you

Thank You
ReplyDelete
Replies
UnknownJul 21, 2011, 11:16:00 PM
hai sir,
how can i add dropdown menu for pages in my blog?
please help me.......
i am a new user...please
ReplyDelete
Replies
masterxypAug 29, 2011, 10:39:00 AM
i am using this script at my site... it look good.. thank men..... http://heartwillsing.com
ReplyDelete
Replies
LavishSep 4, 2011, 6:40:00 PM
Amazing Cool Horizontal menus Thanksss A Lot.........:)
ReplyDelete
Replies
UnknownSep 15, 2011, 4:51:00 PM
How to have a navigation menu on top of the header?
ReplyDelete
Replies
UnknownOct 9, 2011, 4:23:00 AM
thank you mohammad, great job...
ReplyDelete
Replies
AnonymousNov 22, 2011, 11:28:00 AM
very like it Mohammad..
ReplyDelete
Replies
Ahmad MaryukiDec 2, 2011, 5:45:00 PM
thanks, i like it
ReplyDelete
Replies
Kunal GautamDec 24, 2011, 5:11:00 PM
How to create taabs in drop down menus
ReplyDelete
Replies
UnknownJan 11, 2012, 11:25:00 AM
I put the menu but how to link it to post according to the title is there any way to link automatically
ReplyDelete
Replies
UnknownJan 25, 2012, 4:37:00 PM
Thanks for tutorial...
its very helpfull...
i will adapted for my blog...
ReplyDelete
Replies
Shafqat MehmoodFeb 13, 2012, 9:00:00 PM
very ala
ReplyDelete
Replies
Team GharestraMar 10, 2012, 7:46:00 AM
Thanks bro its the easiest way to enter a horizontal menu bar I ever found.
ReplyDelete
Replies
heysummahApr 7, 2012, 9:52:00 AM
thank you so much for your time and effort! now i have my menu bar beautifully arranged.. ♥
ReplyDelete
Replies
UnknownJun 27, 2012, 12:05:00 AM
Hi Mohammad,

I have a blog and I wanted to add my own tabs...but when I pasted the CSS code for the menu I liked, I tried few of them, but it didn't really show any difference between each one of them. All looked the same. :( I realy liked the "Tabs Menu #8", when I applied the css and html code to the blog it didn't really look the way it looks like at ur blog. Pls help!
ReplyDelete
Replies
UnknownJul 1, 2012, 11:01:00 PM
Hello Mohammad, I would like to move my menu to the center. (It's the fourth one, and i transformed it to a drop-down menu.) I tried the center code that you were talking about here, but it doesn't work. :< Please, help me!
ReplyDelete
Replies
AnonymousSep 5, 2012, 5:00:00 AM
Thank you for a wonderful post. but please i added all my labels which numbered 11 but it is only showing 7 labels on top of my page. i used case sensitive eg; Entertainment and i am still getting 7 labels instead of the 11 that i added. i use watermark template. please i will appreciate it if you can tell me what to do.
ReplyDelete
Replies
eviOct 23, 2012, 8:06:00 PM
Hi Mohammad,
thanks for sharing your work.
I just added the menu #10.How I will make the tabs larger, because after the 5th tab, the words do not fit and it shows only some letters of the words. I want to add more tabs but If I can not see the first 7 how I ll see more?Do I have to add a second horizontal menu underneeth? You can check my menu in my blog www.mycakesbyevi-evibelle.blogspot.com
Pls help me out!!!
Thanks
Evi
ReplyDelete
Replies
Bhupendra SinhaJan 5, 2013, 9:14:00 AM
sir ji happy new year

mujhe navigation menu me home,contact,work etc. menu dalna hai aur jab usme click kare to uske ander aur kuchh detail rahe. kaisa kare samajh nahi aa raha. sir please help me
ReplyDelete
Replies
AnonymousJan 27, 2013, 9:05:00 PM
You are Impressive Muhammad, try to be a part of this world like you are.
ReplyDelete
Replies
The GradStopMar 2, 2013, 8:41:00 PM
Hey, thanks for this great post. I know i'm really late but i've only just started blogging. I wanted to create different pages on the website where posts can go according to their nature. i.e News, Culture, Style, Entertainment. I've tried using the codes given above but it doesnt let me paste into the html widget. Would appreciate any help on this topic.
Thanks
ReplyDelete
Replies
AnonymousMar 6, 2013, 6:30:00 AM
Thank you. and very-very big Thanks. i find this tutorial. sorry for may bad englis.
ReplyDelete
Replies
UnknownDec 5, 2013, 11:36:00 AM
Hello... I am new to blogs. I tried out to find stuffs for making my blogs attractive. Here I found good ideas and tutorials. And I found your website to be last station for newcomer to blogs.
ReplyDelete
Replies
AdminFeb 28, 2014, 6:13:00 PM
where are the codes.
ReplyDelete
Replies
AdminMay 24, 2016, 7:25:00 PM
Thanks you for your coding :)
ReplyDelete
Replies

Add comment

Subscribe to: Post Comments ( Atom )