After having published and designed over 100+ Navigation Menus
for Blogger, both with horizontal and vertical list view, today we
would like to share a beautiful menu that has remained the favorite
choice of all WebTrickz.In clients so far. This menu changes color for each tab
on mouse hover. It uses simple JavaScript functions to produce neat and
clean transition effects.
Instead of displaying the sub menu items in traditional vertical drop down list, we aligned them with one another to fit into a single line. Unlike other menus, this widget would easily fit any BlogSpot template without design conflicts. It is positioned at the top most section of your blog to attract readers the most. The installation steps are fun to try and extremely easy. The Menu works fine on all major browsers i.e: IE7+, Safari, Chrome, Mozilla and Opera. Lets add it to your blogs and get rid of any existing bulky menu that proved no less than a trouble.
Live Demo
Inside this class paste the following values:
7. Just below it paste the following compressed code:
8. Hit Save and all done!
Visit your blogs to see a complete new change to the site layout. The menu will blend both light and dark themes. Have fun. :)
Instead of displaying the sub menu items in traditional vertical drop down list, we aligned them with one another to fit into a single line. Unlike other menus, this widget would easily fit any BlogSpot template without design conflicts. It is positioned at the top most section of your blog to attract readers the most. The installation steps are fun to try and extremely easy. The Menu works fine on all major browsers i.e: IE7+, Safari, Chrome, Mozilla and Opera. Lets add it to your blogs and get rid of any existing bulky menu that proved no less than a trouble.
If you are interested to learn how to create a menu from scratch and add
Jquery effects to it then read the previous part of this series.
Add it to blogger
- Go To Blogger > Template
- Backup your template
- Click Edit HTML > Proceed
- Search For <head> and just below it paste these scripts:
<script src='http://mybloggertricks.googlecode.com/files/jquery-pack-colourful.js' type='text/javascript'></script>5. Now search for the body class. i.e: Looks similar to this with some code inside it
<script src='http://mybloggertricks.googlecode.com/files/jcarousel-colourful.js' type='text/javascript'> </script>
<script src='http://mybloggertricks.googlecode.com/files/mt-colourful.js' type='text/javascript'></script>
body {
----
---
)
Inside this class paste the following values:
body {6. Next search for this:
margin:0px
padding:0px;
---
---
}
<body>or this:
<body expr:class='"loading" + data:blog.mobileClass'>
7. Just below it paste the following compressed code:
<!--START OF COLOURFUL TABS BY WebTrickz.In-->
<style>
/*------- Colourful Tabs Menu by www.WebTrickz.In -------*/
.MBT-Nav-container {
border: 1px solid #cfcfcf;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7XcyfvXtTS8IERmm253HOf6HkgiXsUIpRRmRr7Mx-oUIZMqq9Omrp71dR2JUXFR3I8pNxYuiHLm160cZHlasLqhq1WP33Fh5xW-Wdujo3l1UGt1PqM4-lyiftZ-e7Wp26kurOE-cd8_I/s400/menu-bgd.png) bottom left repeat-x;
position: relative;
margin: 0; padding: 0;
border: 1px solid #cfcfcf;
}
ul#nav {
border-left: 1px solid #cfcfcf;
border-right: 0px solid #cfcfcf;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7XcyfvXtTS8IERmm253HOf6HkgiXsUIpRRmRr7Mx-oUIZMqq9Omrp71dR2JUXFR3I8pNxYuiHLm160cZHlasLqhq1WP33Fh5xW-Wdujo3l1UGt1PqM4-lyiftZ-e7Wp26kurOE-cd8_I/s400/menu-bgd.png) bottom left repeat-x;
position: relative;
font-size: 12px; font-family: helvetica, arial, sans-serif;
list-style: none; margin: 0 auto; padding: 0;
width: 960px;
}
#nav ul {
margin: 0;
}
:focus {
outline: 0;
}
*html ul#nav { clear: both; height: 1%; }
ul#nav li a {
display: block;
float: left;
text-transform: uppercase;
font-weight: bold;
line-height: 33px;
padding: 0 13px 0 10px;
color: #333;
text-decoration: none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDpC-bl-VPrxhpjb0LG590ciktxDplhclqK7ERw1QrKFJAegFgqs32KdAHp9rTHhVlZSUBIDJMbtSkT5e6Azbwgyqq-AegSYGgJv7imGlRAmF_asJQVq_XmGotT8puw-uI0M4Rpy6CLjQ/s400/menu-rule.png) right 2px no-repeat;
}
*html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }
*:first-child+html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }
ul#nav li a:hover, ul#nav li a.open { color: #fff; }
ul#nav li#mbt a:hover, ul#nav li#mbt a.open { background: #0f1f37; }
ul#nav li#link-entertainment a:hover, ul#nav li#link-entertainment a.open { background: #b70943; }
ul#nav li#link-news a:hover, ul#nav li#link-news a.open { background: #cf3c02; }
ul#nav li#link-life a:hover, ul#nav li#link-life a.open { background: #724375; }
ul#nav li#link-technology a:hover, ul#nav li#link-technology a.open { background: #02b0cf; }
ul#nav li#link-top10 a:hover, ul#nav li#link-top10 a.open { background: #353533; }
ul#nav li#links-1 a:hover, ul#nav li#links-1 a.open { background: #b70943; }
ul#nav li#links-2 a:hover, ul#nav li#links-2 a.open { background: #289728; }
ul#nav li#links-3 a:hover, ul#nav li#links-3 a.open { background: #666666; }
ul#nav li#links-4 a:hover, ul#nav li#links-4 a.open { background: #b70943; }
ul#nav li#link-home a {
padding: 0 33px 0 10px;
text-indent: -9999px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVPpNbCs5kHbqo5O1qYSzIGfGM1BeVetfg57NafcL3-T1aRPgWGWoZ5b1x9oznT5wTgc1fqwp395tWaDbWBbRSQos42kEJHosPVXWg8dul99CM0NzOU3F6VmfpeF_i6K2fpWahR8ZX62I/s400/home-icon.png) right 0px no-repeat;
}
*html ul#nav li#link-home a { padding: 0; width: 43px; }
ul#nav li#link-home a:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVPpNbCs5kHbqo5O1qYSzIGfGM1BeVetfg57NafcL3-T1aRPgWGWoZ5b1x9oznT5wTgc1fqwp395tWaDbWBbRSQos42kEJHosPVXWg8dul99CM0NzOU3F6VmfpeF_i6K2fpWahR8ZX62I/s400/home-icon.png) right -33px no-repeat; }
/* Sub-Vertical Navigation */
ul.sub-nav {
position: absolute;
top: 33px;
left: -1px;
overflow: hidden;
width: 960px;
display: none;
z-index: 999;
list-style: none;
padding-left:0px;
}
ul#nav li#mbt ul.sub-nav { background: #6f7987 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikVKwJCMp9vp4WSXflL-Ji-i4McnMQHIV7r4GjaOG4Asq6MwN1Z2s6iV3sHO97uWAukKLkmfyktAIm6RbmqvE2_zVZHsBlD0I1JUPIGqvVCZFCFkbUwB5GqY9RjFrKnq0gzxFi_-muDh0/s400/business-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-entertainment ul.sub-nav { background: #d46b8e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbfwqTRhJs1mYhlohkbFyp8BuuMlZaJFvrS14QNR1oksO9Sm2v1U1irmKkjhkYJFkXknNcrrpHR5unqKIwrZs4Cdf8KTqSG2RZDWoQxfOE9BhcjK4YFbffxxnfNhluWLHl09O6wYow338/s400/entertainment-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-news ul.sub-nav { background: #e28a67 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih87GbhHLUVqitrrZ2RQwjlPCQ4I3bK5fBogFeU0OZtXnuKHCT-q_yD74T_0VWqZsORLocKU8u_9N-bPsOnDJXvbWPdKBgjPQsaDrXwk3yGOp5y39FoXcxFAfokPzToNuZcmP83h47j44/s400/news-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-life ul.sub-nav { background: #aa8eac url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrN2o0GNB64oPF7DS1pHxqaR3-54tVEu6XSuWKydgncVxcXPMg7eSdg1uZK5rPYY58366t10dLDHnUof2rOSOY1snUtnNAO6b8b13kV6qRNi_qsP9bAUk62A2cYXOkWq6CLoonp-lb1uk/s400/life-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-technology ul.sub-nav { background: #67d0e2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLUYCVSgUnh-VzF6e9wMA-zfsM7o7UDRLELifBy8xTb2Jh4UmgXs7ejPMjizySnW54cyH03ym_Cyl58CLrOleRbZLDHosIUVkZ9HU9c6J3J-AMyqTGfJij_wf3atp1kKHx5HD-0k6zM7w/s400/technology-subnav-bgd.png) top left repeat-x; }
ul#nav li ul.sub-nav li { float: left; }
ul#nav li ul.sub-nav li a {
float: none;
background: none;
font-size: 11px;
text-transform: none;
color: #fff;
line-height: 25px;
}
ul#nav li#mbt ul.sub-nav li a:hover, ul#nav li#mbt ul.sub-nav li a.active-cat{ background: #0f1f37 !important; }
ul#nav li#link-entertainment ul.sub-nav li a:hover, ul#nav li#link-entertainment ul.sub-nav li a.active-cat { background: #b70943 !important; }
ul#nav li#link-news ul.sub-nav li a:hover, ul#nav li#link-news ul.sub-nav li a.active-cat { background: #cf3c02 !important; }
ul#nav li#link-life ul.sub-nav li a:hover, ul#nav li#link-life ul.sub-nav li a.active-cat { background: #724375 !important; }
ul#nav li#link-technology ul.sub-nav li a:hover, ul#nav li#link-technology ul.sub-nav li a.active-cat { background: #02b0cf !important; }
</style>
<div class='MBT-Nav-container'>
<ul id='nav'>
<li class='non-vertical-link top-link' id='link-home'><a class='open' href='#'>Home</a></li>
<li class='top-link' id='WebTrickz.In'><a href='#'>TAB 1</a>
<ul class='sub-nav'>
<li><a href='#'>SUB TAB 1.1</a></li>
<li><a href='#'>SUB TAB 1.2</a></li>
<li><a href='#'>SUB TAB 1.3</a></li>
<li><a href='#'>SUB TAB 1.4</a></li>
</ul>
</li>
<li class='top-link' id='link-entertainment'><a href='#'>TAB 2</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='#'>SUB TAB 2.1</a></li>
<li><a href='#'>SUB TAB 2.2</a></li>
<li><a href='#'>SUB TAB 2.3</a></li>
<li><a href='#'>SUB TAB 2.4</a></li>
<li><a href='#'>SUB TAB 2.5</a></li>
</ul>
</li>
<li class='top-link' id='link-news'><a href='#'>TAB 3</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='#'>SUB TAB 3.1</a></li>
<li><a href='#'>SUB TAB 3.2</a></li>
<li><a href='#'>SUB TAB 3.3</a></li>
<li><a href='#'>SUB TAB 3.4</a></li>
</ul>
</li>
<li class='top-link' id='link-life'><a href='#'>TAB 4</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='#'>SUB TAB 4.1</a></li>
<li><a href='#'>SUB TAB 4.2</a></li>
<li><a href='#'>SUB TAB 4.3</a></li>
<li><a href='#'>SUB TAB 4.4</a></li>
<li><a href='#'>SUB TAB 4.5</a></li>
<li><a href='#'>SUB TAB 4.6</a></li>
<li><a href='#'>SUB TAB 4.7</a></li>
</ul>
</li>
<li class='top-link' id='link-technology'><a href='#'>TAB 5</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='#'>SUB TAB 5.1</a></li>
<li><a href='#'>SUB TAB 5.2</a></li>
<li><a href='#'>SUB TAB 5.3</a></li>
<li><a href='#'>SUB TAB 5.4</a></li>
<li><a href='#'>SUB TAB 5.5</a></li>
</ul>
</li>
<li class='non-vertical-link top-link' id='link-top10'><a href='#'>TAB 6</a></li>
<!--
<li class='non-vertical-link top-link' id='links-1'><a href='#'>TAB 7</a></li>
-->
<!--
<li class='non-vertical-link top-link' id='links-2'><a href='#'>TAB 8</a></li>
-->
<!--
<li class='non-vertical-link top-link' id='links-3'><a href='#'>TAB 9</a></li>
-->
<!--
<li class='non-vertical-link top-link' id='links-4'><a href='#'>TAB 10</a></li>
-->
<li style='clear: both;'/>
</ul>
</div>
<!--END OF COLOURFUL TABS BY WebTrickz.In-->
8. Hit Save and all done!
Visit your blogs to see a complete new change to the site layout. The menu will blend both light and dark themes. Have fun. :)
Customizations Guide:
The code is written in a neat way so that any one may easily change, add or delete the tabs.- Replace # with URL of the page and replace TAB names with Page Title
- To change the width of the menu edit width: 960px
- To create a new tab in any sub menu simple paste this code above </ul>
<li><a href='#'>SUB TAB</a></li>
- Tab 7 to Tab 10 are disabled. If you want to activate any one of it then simply remove the comment tags across it. i.e <!-- before it and --> after it
- For more customization tips, just post me a comment!
Is it SEO friendly?
Simple CSS and HTML menus
are way better than flash menus because they use the hyperlink tag
along with anchor text. Search engines crawl them better and they appear
clearly in SITE LINKS. This menu has everything that robots would love.
It has a Clear structure and uses no fancy Jquery functions which could
lead to High load time.
0 comments:
Post a Comment