Creating Liquid CSS Tabs for Menus

Wed, 10/17/2007 - 22:12 — dfadmin

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.

Liquid Menu Tabs

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.

Liquid Button

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:

http://www.dezinerfolio.com/trackback/154

Similar entries

Tips n Tutorials

dfadmin's blog
Login to post comments

Comments

Much thanks to you for the embodiment of an otherworldly online journal. Where else might any individual get that sort of data composed in quite an impressive maculate way? I have a presentation that I am quickly finishing up, and I have been on the search out for such informative content, and I a large number of Thank to you.

sizzling hot kostenlos (not verified)

Fri, 11/30/2012 - 12:25

I just could not go away your site before suggesting that I actually loved the usual information
a person supply to your guests? Is going to be back frequently in order to inspect new posts

palani (not verified)

Fri, 05/10/2013 - 17:02

I got this web site from my buddy who informed me
regarding this site and at the moment this time I am
visiting this site and reading very informative posts
here.

palani tourism (not verified)

Fri, 05/10/2013 - 13:36

It's impressive that you are getting ideas from this piece of writing as well as from our argument made here.

DLL-files.com Fixer License Key Generator v1.6 Download (not verified)

Thu, 04/25/2013 - 02:53

Thanks for your personal marvelous posting! I genuinely enjoyed reading it,
you can be a great author.I will make certain to bookmark your blog and will eventually
come back very soon. I want to encourage you continue your great writing, have a nice holiday weekend!

Online Marketing (not verified)

Sat, 04/06/2013 - 19:20

Hi, Neat post. There's a problem with your web site in web explorer, might check this? IE still is the marketplace chief and a big element of people will omit your fantastic writing because of this problem.

www.layeredlinks.com (not verified)

Sat, 04/06/2013 - 11:28

Just wish to say your article is as astonishing. The clearness in your post
is just great and i could assume you're an expert on this subject. Well with your permission let me to grab your feed to keep up to date with forthcoming post. Thanks a million and please carry on the gratifying work.

Skin Whitening Huge Market New (not verified)

Tue, 04/30/2013 - 15:28

Hi еvery one, hегe every one is shагing thеsе kindѕ
of knowleԁge, thus it's nice to read this webpage, and I used to visit this blog all the time.

faux finishing techniques (not verified)

Fri, 04/05/2013 - 18:59

Thanks for finally talking about > Reply to comment
| Dezinerfolio < Liked it!

淘宝排行榜 (not verified)

Fri, 04/05/2013 - 09:09

Hey Webmaster & People! Read this before you buy! About Gold Box New
Deals. Every Day. Lightning Deals! Deal of the day!
Check it at http://amzn.to/Olis1g

Read This Before You Buy At AMAZON (not verified)

Tue, 04/02/2013 - 15:30

Dezinerfolio