Docstoc

jQuery Menu Colorful Tabs

Document Sample
jQuery Menu Colorful Tabs Powered By Docstoc
					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.pn
g) 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.pn
g) 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/enterta
inment-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-sub
nav-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/technolo
gy-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:

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:29
posted:9/27/2012
language:English
pages:7
Description: jQuery Menu Colorful Tabs