Cool Apple Style Navigation Buttons for your network

[dave]

A few weeks back i was running through some css to change my Nav buttons to look my like apple Navigation,I gave this code to George to work a little magic and as usual he came up with all sought's of ideas :-)
Here is my little spin on that Enjoy :-)
This is the Dark Version.


DIV#xg_navigationul,
DIV#xg_navigation li,
DIV#xg_navigation span,
DIV#xg_navigation a {
margin: 0!important;
padding: 0!important;
position: relative!important;}
DIV#xg_navigation A:hover {
background: #646464 url(images/grad_dark.png) repeat-x left bottom!important;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%)!important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a))!important;
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%)!important;
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%)!important;
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%)!important;
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%)!important;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0)!important;
box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222!important;
-moz-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222!important;
-webkit-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222!important;
filter: none!important;
transition:all 1s ease-out;
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;}
DIV#xg_navigation li a {
box-shadow: inset 0 0 0 1px #8a8a8a!important;
-moz-box-shadow: inset 0 0 0 1px #8a8a8a!important;
-webkit-box-shadow: inset 0 0 0 1px #8a8a8a!important;
background: #4a4a4a url(images/grad_dark.png) repeat-x left top!important;
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%)!important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878))!important;
background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%)!important;
background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%)!important;
background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%)!important;
background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%)!important;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0)!important;
border-bottom: 1px solid #5d5d5d!important;
border-top: 1px solid #5d5d5d!important;
border-right: 1px solid #5d5d5d!important;
line-height: 34px!important;
filter: none!important;
transition:all 1s ease-out;
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;}
DIV#xg_navigation a {
border-radius: 5px 0 0 5px!important;
-moz-border-radius: 5px 0 0 5px!important;
-webkit-border-radius: 5px 0 0 5px!important;
border-left: 0px solid #5d5d5d!important;
color: #ffffff!important;
display: inline-block!important;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif!important;
font-size: 12px!important;
text-align: center!important;
text-decoration: none!important;
text-shadow: 0 -1px 0 #333333!important;}
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_navigationul,
DIV#xg_navigation li,
DIV#xg_navigation span,
DIV#xg_navigation a {
margin: 0!important;
padding: 0!important;
position: relative!important;}

DIV#xg_navigation a {
border-radius: 5px!important;
-moz-border-radius: 5px!important;
-webkit-border-radius: 5px!important;
transition:all 1s ease-out;
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;}
DIV#xg_navigation ul li A{
text-align: center!important;}
DIV#xg_navigation a {
border-top: 0 none!important;
border-left: 1px solid #5d5d5d!important;
display: block!important;
line-height: 120%!important;
text-align: center!important;}
DIV#xg_navigation UL{background-color: transparent!important;}
DIV#xg_navigation {background-color: transparent!important;}


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{min-width:100.4px!important;}

[Sean Kilbane]

Hi

Many thanks for this - I love it!

One thing that I hope you can help me on though. It looks fine on my mac but since I've used this menu if I display it on an iPad it duplicates the main tab in the sub menu as well.

Hope you can help!

[dave]

Hello Sean, Make sure you have upgraded to the minimum requirement of Flash :-)  Glad you love the Nav buttons and thank you for your comment :-)

[Shesh Dhar Tiwari]

can i change the color of tab text ?

[dave]

Hi if you want to change just the Text colour ....change the very last code on this page.

Example 1 original

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{min-width:100.4px!important;}

Now change that top line of code to look like this

DIV#xg_navigation .xg_subtab SPAN{color:#639af2!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{min-width:100.4px!important;}

Thats going to change the text to a nice blue, Have fun and have a great Christmas :)

[Shesh Dhar Tiwari]

Thanks dave, I tried several colors but .......... black, the existing one is the best........till i could get some color better than this one.

[dave]

Sweet,   try this link out for colour codes :)  

http://html-color-codes.info/#HTML_Color_Picker

[Paul Corona]

an amazing tool from Adobe for helping select color palettes....https://kuler.adobe.com

select Create to see how colors relate to each other