We use to see several types of navigation around different websites. Tabs are also one of the attractive navigation styles prevailing today. Thought they are stylish and useful to users, they never take up much of your real estate. But whenever you are creating tabs, you should not create fixed-width tabs. Then you will need to assign the maximum width to all items. That is space consuming and many times becomes ugly.
Hence you should design tabs which will take space as per the menu items. Here is how you can do it easily. You can create tabs just as in this image in few minutes. First you have to get the design as you want for your tabs. Now you need to slice them out to get these following pieces which will form your tab.
Here are two sets of tabs, one for inactive tabs and another for active tabs. You can have the third one to set on mouseover condition.
Name these images as activeTabLeft.jpg, activeTabRight.jpg, inactiveTabLeft.jpg, inactiveTabRight.jpg respectively.
Now put your html like this:
Willing to know about your implementations as well as the concerns, if any.
Hence you should design tabs which will take space as per the menu items. Here is how you can do it easily. You can create tabs just as in this image in few minutes. First you have to get the design as you want for your tabs. Now you need to slice them out to get these following pieces which will form your tab.Here are two sets of tabs, one for inactive tabs and another for active tabs. You can have the third one to set on mouseover condition.
Name these images as activeTabLeft.jpg, activeTabRight.jpg, inactiveTabLeft.jpg, inactiveTabRight.jpg respectively.Now put your html like this:
<div id="stylishTabs">
<ul>
<li><a class="active" href="/" title="Home"><span>Home</span></a></li>
<li><a href="corporate" title="Corporate"><span>Corporate</span></a></li>
<li><a href="services" title="Services"><span>Services</span></a></li>
<li><a href="contact" title="Contact"><span>Contact</span></a></li>
</ul>
</div>
Now you have understood that we have created a menu with ul and li tags of HTML. Now that simple conventional display can be totally changed into a stylish tabbed menu with this CSS:
#stylishTabs {
height: 23px;
}
#stylishTabs ul li {
list-style: none;
display: inline;
}
#stylishTabs ul li a {
padding: 3px 1px 2px 10px;
background: url(images/inactiveTabLeft.jpg) no-repeat left top;
color: #fff;
font-weight: bold;
float: left;
}
#stylishTabs ul li a span {
background:url(images/inactiveTabRight.jpg) no-repeat right top;
padding: 3px 15px 2px 6px;
}
#stylishTabs ul li a:hover {
background: url(images/activeTabLeft.jpg) no-repeat left top;
color: #814132;
border: none;
}
#stylishTabs ul li a:hover span {
background: url(images/activeTabRight.jpg) no-repeat right top;
border: none;
}
#stylishTabs ul li a.active {
background: url(images/activeTabLeft.jpg) no-repeat left top;
color: #814132;
}
#stylishTabs ul li a.active span {
background: url(images/activeTabRight.jpg) no-repeat right top;
}
So now you have a unordered list (ul) styled into stylish and attractive tabs. The tabs' widths are not fixed. They take on the width of the text in that menu items. Here I have made the mouseover images same as the active tabs. You can also use a third set of images to show on mouseover.Willing to know about your implementations as well as the concerns, if any.
7 comments:
Interesting tut...useful!
check out www.wisead.net
Hi,
Very good tutorial, so easy to implement and works just out of the box.
Thanks for sharing this amazing trick.
Hi,
The blog entry above is very interesting. They have very well elaborated the items. I really love the above blog entry.
Thanks for your comments.
It's nice to see that it helped.
Thanks and keep visiting.
At first look a great tip! Thanks! But how do you get the background images to grow big enough (with using no-repeat)? I never managed to get it right. Depending on font-size there is always a gap.
That's the trick. Make the image in the right side of such a width which is larger than any menu item of yours. Say about 200px-300px. So whatever big size your text be, it will have the background. And for small texts it will hide the extra part.
Use it, this 100% works. Still if you face problems let me have a look at your page.
The above blog entry is very interesting I really like it....and It is really helpful to make attractive tabs on the site
Thanks for sharing
Post a Comment