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.

[Fire-Tech]

Looks great with your colors too :)

[jz]

Cool site for Jesus, Noelle! Quick few questions, please...

Curious...what are you using for the radio piece? How long do you make your programs?

Thx. -jz

[soaringeagle]

i made a couple minor changes

/* Subtab Animation & Borders*/
#xg_navigation ul div.xg_subtab ul li a {border: 3px solid #444444!important; }
#xg_navigation ul div.xg_subtab ul li a:hover {Border: 3px solid #c5c5d1!important;
-webkit-transform: translate(1em,0);
-moz-transform: translate(1em,0);
-webkit-transition:all .4s ease-out;
-moz-transition:all .4s ease-out;
-webkit-border-radius:25px !important;
-moz-border-radius:25px !important;
border-radius:25px !important;
}
/* End Subtab Animation & Borders*/

just made it fit what i already had lil better slowed the tranjhsition a tiny bit

changed the border style to =solid

just lil minor adjustments

[Fire-Tech]

Yeah, I just posted what looked best on mine. I agree. your changes look better on your site that way. That's the cool thing. Very simple code & easy to change :)

[soaringeagle]

yea  but something i never would have thought of

well done

[Fire-Tech]

Thanks Badan

[Scott Bishop]

Hey Fire Tech, what's your website address? I'd like to take a look if you don't mind.

[Fire-Tech]

Hey Scott. Sorry, but it's 100% private business network & invite only.  I need to keep ideas from competition. I usually share my design ideas on here or JS though. Feel free to PM me if you want.

[Scott Bishop]

Hey Fire-Tech,

The reason I asked was to check out your store that I can see from your pic. No biggie. 

But I do want to ask you if you can place a .jpg or .gif picture inside.

Check out how I did one using a DW8 designed website: www.surfershot.com (on the Surf Videos tab)

Then check out the boring one on my Ning designed website: www.surfer-shot.com (on the Surf Videos tab)

Can this be accomplished using your code?

[Fire-Tech]

You could do those too (I just used png's) but this code is to cover the entire background.

My GIF's & widget are in a text box. I haven't tried to add to a subtab.

I think that finding a way to insert a GIF "After' your text itself versus the entire background is probably more along the line of what you are looking for. Something similar to the tip used to add "addthis share button". I want to say that Jen had a tip on JS to insert images that might get us pointed in the right direction. I'm running out the door,but I'll try to play with it this weekend.

[Michael Thompson]

I tried it and it looked great. However, it removed the custom quick add icons at the top of my activity feed. Has anyone else experienced this problem? I wanted to use this tip, but I also want to keep the icons at the top of the activity feed. 

[Fire-Tech]

That's really strange. First time I heard of that. One of the reasons I like the code is because it's pure CSS (including the animation). It shouldn't have an effect on anything else.

I have mine at the bottom of my Advanced CSS. Originally I pulled it from a remote CSS file, but it responded a bit too slow. I'm not sure. Maybe move it to the top, reload the page & invalidate your network cache?

Is anyone else seeing the same thing?