"tip" apple navigation tabs, light and dark versions with animation fx's

[George H. Compton IV]

Thanks dave for the idea and the snippets of codes and you're welcome for the tabs  :-)

You can change the color Of the text by changing the colors black and white in the code below. White is the the color of the mouse over affect.

you can change the width of the main tabs by Lowering the numbers in this line of code min-width:165.4px!important; its the very last line

Right click on the images and open it in a new tab to get a better view

Dark tabs

this code goes in your NC custom code box

<link rel="stylesheet" type="text/css" href="http://api.ning.com:80/files/ONa9I9r9VT03F6dWg*AqGEq3O2RvzfkN3kZX-kXkUtYqQy5zyrvIpTnThdlUJX*7reOksFjt0TDAI*oxUNGJcjXxFphDL4ok/apple_tabs_dark.css" />

<style>
DIV#xg_navigation .xg_subtab SPAN{color:black!important;
  transition:all 1s ease-out;
  -webkit-transition:all 1s ease-out;
  -moz-transition:all 1s ease-out;}
DIV#xg_navigation .xg_subtab SPAN:hover{color:white!important;
  transition:all 1s ease-out;
  -webkit-transition:all 1s ease-out;
  -moz-transition:all 1s ease-out;}
DIV#xg_navigation  A{opacity: 0.86!important;
max-width:165.4px!important;
min-width:165.4px!important;}
</style>

light tabs

this code goes in your NC custom code box

<link rel="stylesheet" type="text/css" href="http://api.ning.com:80/files/hFSnUd6hMmoAevf2yj4KOR3544xJXdp9HsaBz96fuZgqYoiBYq4D8NGwY0a8Yn*Do4LJTMd1bQMOgbMV6Ba3MA__/apple_tabs_light.css" />

<style>
DIV#xg_navigation .xg_subtab SPAN{color:black!important;
  transition:all 1s ease-out;
  -webkit-transition:all 1s ease-out;
  -moz-transition:all 1s ease-out;}
DIV#xg_navigation .xg_subtab SPAN:hover{color:white!important;
  transition:all 1s ease-out;
  -webkit-transition:all 1s ease-out;
  -moz-transition:all 1s ease-out;}
DIV#xg_navigation  A{opacity: 0.86!important;
max-width:165.4px!important;
min-width:165.4px!important;}
</style>

[George H. Compton IV]

okay Woody what's going on :-)

[Woody13]

oh hey dang i just saw my sub-tabs freakout corners chopped off saw the topic here somewhere dunno what the hey Glam has done think she gotta go... !

[George H. Compton IV]

the sub on Well Kunnected are Freaking out to lol

[dave]

I saw that woody and there probably the same thing but i found them here 

http://cssmenumaker. com  they have a lot to choose from but i think the dark and light ones are nice. :-)

[George H. Compton IV]

thank you Woody that does tell me where Dave came up with the color codes

[dave]

Is that me dave :-)

[George H. Compton IV]

Yes that's you Dave :-) just click on the name it would take you to your profile

[solo]

george i promise you i was doing this yesterday,great post..

[George H. Compton IV]

thank you Solo :-) you have a great day

[Carlton Finney]

@GC is there any way we can get the sub tabs to flash like that without displaying the apple logo?

[George H. Compton IV]

you can use any image you would like but I edited the Apple tab pic so the Apple does not show.

just add this code to the code above inside the <style> Tags

DIV#xg_navigation UL.xg_subtab A:hover {
  background-image: url(http://api.ning.com:80/files/uHd-JC*0FtPeHia7Y5kp*RLRGmLETFLXWSRLK6Q0sPIRFvFuyJwmeoozX4KPD52DnKguzEtY38maUPMybzdJXuL-*xc7IKfs/Apple2_lvgmain.jpg)!important;
  background-size:100% 100%!important;}

_

_

_

my friend Armani is using my tabs on his network http://wellkunnected.com/

He's using his network logo as the mouse over fx

[dave]

Thanks George for your Magic :-) If i had of seen this thread already started i would of posted here first :-) Maybe you could add this George as part of the code if someone wants to keep it short as this is quite long.

Add this if you want some extra animation :-)

div#xg_navigation li a {
-webkit-animation: cssAnimation 2.561s 1 ease;
-moz-animation: cssAnimation 2.561s 1 ease;
-o-animation: cssAnimation 2.561s 1 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -webkit-transform: rotate(-360deg) scale(1) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -moz-transform: rotate(-360deg) scale(1) skew(1deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -o-transform: rotate(-360deg) scale(1) skew(1deg) translate(0px); }
}

div.#xg_navigation a {
-webkit-animation: cssAnimation 1.9159s 1 ease;
-moz-animation: cssAnimation 1.9159s 1 ease;
-o-animation: cssAnimation 1.9159s 1 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}

DIV#xg_navigation A:hover {
-webkit-animation: cssAnimation 2.561s 1 ease;
-moz-animation: cssAnimation 2.561s 1 ease;
-o-animation: cssAnimation 2.561s 1 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -webkit-transform: rotate(-360deg) scale(1) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -moz-transform: rotate(-360deg) scale(1) skew(1deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -o-transform: rotate(-360deg) scale(1) skew(1deg) translate(0px); }
}