Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

jQuery Menu Colorful Tabs

jQuery Menu Colorful Tabs

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

3,236 views

My feature of the day is an amazing tutorial from Mohammad Mustafa Ahmedzai, which is about adding colorful tabs with jQuery.

Here are the steps:

  • Go to Blogger Dashboard > Template.
  • Edit HTML > Proceed
  • Search for <head> then copy the code below:
<script src='http://mybloggertricks.googlecode.com/files/jquery-pack-colourful.js' type='text/javascript'></script> 
 <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>
  • Look for the body class. Sample below.
body {

----

---

)
  • Paste these values inside the body class.
body {

margin:0px

padding:0px;

---

---

} 
  • Then search for <body> or <body expr:class=’&quot;loading&quot; + data:blog.mobileClass’>
  • Under <body> or <body expr:class=’&quot;loading&quot; + data:blog.mobileClass’> paste the following codes:
<!--START OF COLOURFUL TABS BY MBT-->

<style>

/*------- Colourful Tabs Menu by www.MyBloggerTricks.com -------*/

.MBT-Nav-container {

border: 1px solid #cfcfcf;

 background: url(http://1.bp.blogspot.com/-hQ4r1kqybdw/UEIRnGogqyI/AAAAAAAAHeI/tPZ2FXRUO98/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(http://1.bp.blogspot.com/-hQ4r1kqybdw/UEIRnGogqyI/AAAAAAAAHeI/tPZ2FXRUO98/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(http://3.bp.blogspot.com/-GhdMtMAzybA/UEIRnwbrOqI/AAAAAAAAHeU/fShdjYuWetk/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(http://2.bp.blogspot.com/-IuFcujZl650/UEIRm1ja0uI/AAAAAAAAHd8/g3llMl2_RA8/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(http://2.bp.blogspot.com/-IuFcujZl650/UEIRm1ja0uI/AAAAAAAAHd8/g3llMl2_RA8/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(http://4.bp.blogspot.com/-gRDfUUsFFvo/UEIRmB-rQHI/AAAAAAAAHdk/PnpJ42Y5ylk/s400/business-subnav-bgd.png) top left repeat-x; }

ul#nav li#link-entertainment ul.sub-nav { background: #d46b8e url(http://4.bp.blogspot.com/-x-W--ENCpB4/UEIRmWbi1WI/AAAAAAAAHdw/VWjPx1M9Fow/s400/entertainment-subnav-bgd.png) top left repeat-x; }

ul#nav li#link-news ul.sub-nav { background: #e28a67 url(http://1.bp.blogspot.com/-mow7_vOvv4Y/UEIRwMycevI/AAAAAAAAHeg/Cc6h-0Hv-7Y/s400/news-subnav-bgd.png) top left repeat-x; }

ul#nav li#link-life ul.sub-nav { background: #aa8eac url(http://2.bp.blogspot.com/-UmuzlpeD1EM/UEISysxvDbI/AAAAAAAAHe4/N78T1ifkhug/s400/life-subnav-bgd.png) top left repeat-x; }

ul#nav li#link-technology ul.sub-nav { background: #67d0e2 url(http://2.bp.blogspot.com/-ZrSwFUKdaJE/UEIRwVZsdKI/AAAAAAAAHes/M8UCU-GrSoI/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='mbt'><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 MBT-->
  • bSave.

Note: Backup your template first before editing it.

Check out the DEMO.

Source:

Liked It ? Please Share

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here