Slick Sliding Subtabs (with borders & background Img)

[Fire-Tech]

I always wanted more options for the subtabs in DS (at least border options). I finally got around to playing around with mine and figured I'd share.

This is what my subtabs looked like before (boring):

Here's some tweaks to give your subtabs some borders, background images and sliding animation (text file). Add it to your Advanced / Custom CSS.

End result:

Use what you want out of it. I suggest you use a small pic & optimize it to keep the size down for response times.

Have fun!

Update:

I threw together some background images & optimized them. Here's a new example of mine.

Save the image you want and upload it to your own site. They are the same colors as the Floating Quick Navigation If you are using that too.

[soaringeagle]

actualy corection i do nit see any asdd status update areaat all wird 1 sec

[soaringeagle]

im not sure whats going on take out the code for tghe links  for a momment see if the status uodarte comes back if not  remove any custom styling you did ti that work backward till you figur4e out whats interfering then bit by bit put back the code that probably wasnt interfering

im not seeingthe status update thing at akll wether i hover over subtabs or nit let me test 1 more thihg

[soaringeagle]

wasnt thinking straight i wouldnt see the status update form unless i was loggedin.. being sick my brains not working

ill join tomorow and take a look if you dont figure it out

im sure its something so[imple

[Fire-Tech]

Thanks for your help Soaringeagle. I've been extremely busy lately :)

[Patrick Chappelle]

Thanks for sharing brother! I'll have a go at it tomorrow.

[Fire-Tech]

Thanks Thunderbreath...lol. WTF? This is the one we were talking about the other day. Let me know if you see anything  act up on KX & I'll do the same \m/

[Fire-Tech]

JZ was asking about using this for the main tabs. Here's what you need to change if you want that too:

#xg_navigation ul div.xg_subtab ul li a

Change to...

#xg_navigation ul li a

I also checked a few sites that are using it and I think some of the sites that were having some glitches were from a bug at the time. Everyone is good now as far as I know.

If you have maxed out your CSS and are pulling this from a remote file, you can speed up the effect if you keep the transformation, but get rid of the transform / translate.

-webkit-transform: translate(1em,0);  -moz-transform: translate(1em,0);


It won't slide, but It loads much quicker and you still get the other good parts.

[J.Pedro Henriques]

The right code at the right time for me.

Thank you

J.Pedro

[Fire-Tech]

Glad you like it :)

[Mandy P.]

omg I <3 this so much, totally gave my site a much needed makeover! check it out here: http://www.glam-express.com/

would love more of these types of tutorials, please share!

thanks, Mandy

[Fire-Tech]

Thanks Mandy. I'm glad you like it :)

[Fire-Tech]

Here's another one that's simple but handy...