2009/05/28

Colorful tab menus

Hello everybody , today I will publish the next type of menu-Colorful Tab Menu.This is the 2nd kind of CSS menu with easy steps to add to your source template.

The previous version is Colorful Stock Menu, you can put the stock menu on right or left column,but I think you still need a menu on top of your template.


I bring you 11 kinds of tab menu with different color but adding code is the same, so I just guide you 3 kinds of menu for example, so the 8 other menus, you just have to follow this example to add by yourself.



Style A:

Ok go to your source code , find the code ]]></b:skin> add paste this code before it:

body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}

h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}

/*- Menu Tabs--------------------------- */


#tabs {
float:left;
width:100%;
background:#BBD9EE;
font-size:93%;
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("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("tabright.gif") 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;
}


Next ,Save it and create a HTML/Javascript then add this code:

<div id="tabs">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>

<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>

</ul>
</div>


Style B:

go to your source code , find the code ]]></b:skin> add paste this code before it:

body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}

h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
/*- Menu Tabs B--------------------------- */

#tabsB {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
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("tableftB.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsB a span {
float:left;
display:block;
background:url("tabrightB.gif") 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;
}


Next ,Save it and create a HTML/Javascript then add this code:

<div id="tabsB">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>

<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>

</ul>
</div>


Style C:


Go to your source code , find the code ]]></b:skin> add paste this code before it:

body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}

h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
/*- Menu Tabs C--------------------------- */

#tabsC {
float:left;
width:100%;
background:#EDF7E7;
font-size:93%;
line-height:normal;
}
#tabsC ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsC li {
display:inline;
margin:0;
padding:0;
}
#tabsC a {
float:left;
background:url("tableftC.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsC a span {
float:left;
display:block;
background:url("tabrightC.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#464E42;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsC a span {float:none;}
/* End IE5-Mac hack */
#tabsC a:hover span {
color:#FFF;
}
#tabsC a:hover {
background-position:0% -42px;
}
#tabsC a:hover span {
background-position:100% -42px;
}


Next ,Save it and create a HTML/Javascript then add this code:

<div id="tabsC">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>

<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>

</ul>
</div>


Keep doing the rest styles with the same code.....

*Important Note:

The red code :That's the image URL , you will get them in the file you have downloaded above,just open that file , upload it to your favorite image host then paste the URL link instead the red code, if you don't add the image URL, it will be worked

The pink code: That's the name of every style, if you use style B, change all the id into tabsB, if you want to use style F, change to tabsF, you have to change exactly if you want it to work.





You like it ? Please subscribe me to get more amazing tips.If you have any problem please leave me a comment below , I will help you.Have a gooday friends.
Zen

Website: http://exploding-boy.com
Author:Christopher Ware
Bring to Blogger: Zenplate

14 comments:

Dr Praveen Kumar Shrivastava said...

God Style
Keep it up
praveen

Pream Kumar /HSE -Engineer said...

it`s worth da...

काशिफ़ आरिफ़/Kashif Arif said...

WOW! the designs are superb..

I need your help can you tell me How can I make Link List In Blogger Blog With Scroll Bar...

vuluganck said...

@Kashif Arif
I don't know what you mean ? Can you tell me clearly ? you mean you want to add a blogroll in which kind of scroll bar ?

Oecil_Kritingz said...

hii... i recently come across of your nice blog,
i wanna request link exchange

here is my blog Free Web 2.0 Templates

vuluganck said...

@Uc1l3l3k
Amazing, your blog is so great even it is blogspot.You are welcome

Selvi said...

Hi,

I have created this kind of menu for my blog but How do i create multi level menus? For example sub menus for each of the main menu...

My blog: http://idhayakaviyam.blogspot.com

Selvi said...

Hi,

How do i created the navigation menu same as what you have on your blog? The multi level menus!

vuluganck said...

@R. Thamilselvi
Thanks for your comment, this menu is just a 1 sub menu , not multiple sub, in the near future (next few days) I will publish much more about menu and many kinds of menu for you to choose so don't worry.

You just have to keep joining and waiting for new menu.you will not be disappointed.

And I want to tell you that the next menu will be the multisub (3 sub like Zenplate) but using the Jquery effect,you will like it.
Thank you
Zen

Dragonblogger said...

Nice detailed article for adding custom color CSS tabs to your blog, is this wordpress compatible? Do you have instructions for making such a thing with a wordpress blog?

vuluganck said...

@Dragonblogger
All the tips here can be used on wordpress.All of these tips are from website and all can be used for website,wordpress and blogger.
You just have to do 1 thing that is feeling free for these.

Selvi said...

Hi Zen,

Can you teach me how to create a sub menu by just using this menu type?

From, Selvi

Selvi said...

zen,

your menus look different when it is viewed in mozilla and IE....

vuluganck said...

@Idhaya Kaviyam
This kind of menu is not a multi subs menu.It is just a normal menu and if you want to make subs for it.It is very complex.Why don't you have a look at my Jquery 3 subs menu and the latest Css menu name "multi subs and direction".

You can view it at the home page, the newest one.
And yes I have change a little look about my menu.Is it nice?

Post a Comment

Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard
Zen

 
.