Creating Liquid CSS Tabs for Menus
(28 votes, average: 4.5 out of 5)
Loading ...CSS Tabs based menu systems are really improving instead of all the classic button based navigation. This small tutorial will help you create a image based liquid tab using CSS and xHTML.
Yes… there are lot other ways getting this done… but for those who are new, this could sure help.
We just tried representing this whole process in a 3D view… not sure if we have messed it up but sure you will understand as you go on below (don’t forget the DEMO).
We are just adding a SPAN tag into the standard xHTML based navigation + a few CSS Attributes to them.
The CSS:
ul li{
float:left;
padding:0 5px;
list-style:none;
}
ul li a{
background:url(/* LEFT IMAGE */) no-repeat left top;
height:45px;
display:block;
float:left;
padding-left:20px;
text-decoration:none;
color:#000;
}
ul li a span{
background:url(/* RIGHT IMAGE */) no-repeat right top;
display:block;
padding:15px 20px 0 0;
display:block;
height:30px;
float:left;
}
Hope you understood the concept behind this… If still NO, take a look at the Live Demo below:
Don’t forget to take a look at the Source Code of the Demo too… (Right-Click and View Source)
fresh Said:
July 14th, 2008 at 2:17 am
useful article, thanks
website design Said:
May 26th, 2008 at 9:02 pm
Yeah this is the best way make tabs (sliding doors).
Bridges Said:
April 22nd, 2008 at 5:08 am
Nice tutorial! I have a better understanding how tabs can be achieved with css.
How did you make your tabs with out the rounded corners on the bottom of the tab? I can’t seem to figure this out other then slicing it.
Thanks
One Winged Angel Said:
March 7th, 2008 at 9:09 pm
Hi. Can you be more specific for the ’span’ part? Plus, how to apply this if i’m using wordpress menu function? (wp_list_pages)
Geoserv Said:
February 23rd, 2008 at 9:24 am
Very nice tutorial.
DOTTED - http://www.newsdots.com/tutorials/creating-liquid-css-tabs-for-menus/
Thanks.
Web Designer Group Said:
February 22nd, 2008 at 12:37 pm
Very nice tutorial. Many ways to implement the smae effect, but this is one is very fine. Thanks