Creating Liquid CSS Tabs for Menus
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: Demo Don't forget to take a look at the Source Code of the Demo too... (Right-Click and View Source)
Trackback URL for this post:
Visualize
Check them out!
Comments
In my opinion, nobody (at least in the rich world) cares about saving every last cent's worth of energy, particularly when that saving is more than offset by the cost. I think that people are conscious of things they can do for free - turn off the air conditioner when you're not at home, buy more efficient light bulbs. But it seems like today, "green" bloggers and vendors are asking me to buy a $40 energy saving power strip to eliminate the few cents worth of power used by my printer in standby.
rtertertert
The liquid tabs really look cool and sexy. The designer does awesome work in the tab, but the question is that, are these tabs capable of doing the same function as done by the previous version of the tabs. To replace them the tabs have the much more function the previous tabs
Alice - Writes about Leadership Speaker
The liquid CSS tabs for menus are really awesome to watch and eye catching. The designer does a great job and the tabs will provide better ideas and may be some designer will create something more innovative from the design. It improves the graphics quality of the system.
Tom - Writes about is Kanetix
Creating Liquid CSS Tabs for Menus is look awesome and it improve the graphic quality of the system and gives a new look to the graphic and multimedia world. Liquid tabs is new idea and innovative also. Every user would like it..
Tom - Writes about folding tables
This is an excellent tutorial. I love liquid design!
Nice clear presentation. Hey I was wondering how do you make a hover over color appear over text using CSS. www.tristanstroud.com is my first website. I'm trying to spice up my portfolio page. I'm studying web design at Uni. Any tips or critiques would be greatly accepted thank!
What a great explanation for a beginner/hobbyist. Thank You Very Much.
Also, Thanks to Shaun Morrison for his input.
Online daily for three months or more before you if it is almost time for your next dose, wait finasteride is in the fda pregnancy category x.
oklahoma city accutane lawyer
:-p I'm going to be taking a lot of medicine for a while, which makes me unhappy, but works out for the best, probably.
pittsburgh accutane attorney
The truth, frankly, is much more absurd than my erroneous jokes.
welldone dude,
more work in less words. I like that.
Post new comment