glossy navigation

here is the codes for the js file

Quote :

// GLOSSY NAV
olala=" <div align='center'><ul class=\"glossymenu\"><li><a href=\"http://www.friendster.com\"><b>Home</b></a></li><li><a href=\"http://profiles.friendster.com/user.php\"><b>My profile</b></a></li><li><a href=\"http://www.friendster.com/friends.php\"><b>Friends</b></a></li><li><a href=\"http://www.friendster.com/logout.php\"><b>Logout</b></a></li></ul></div><br>";

var aha = document.getElementById('0');
var aye = document.createElement("li");
aye.innerHTML=olala;
aha.parentNode.insertBefore(aye,aha);

edit the cyan part color for the menu that you want to put for your navigation

for the css formats

http://cowo.bedon.googlepages.com/menug_bg.gif
http://cowo.bedon.googlepages.com/menug_hover_left.gif
http://cowo.bedon.googlepages.com/menug_hover_right.gif

for the css

Quote :

/* glossy nav */
.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(http://cowo.bedon.googlepages.com/menug_bg.gif) repeat-x;
height: 46px;
list-style: none;
}

.glossymenu li{
float:left;
}

.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px;
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px;
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(http://cowo.bedon.googlepages.com/menug_hover_left.gif) no-repeat;
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(http://cowo.bedon.googlepages.com/menug_hover_right.gif) no-repeat right top;
}

edit the red part

other design for your taste
https://2img.net/h/i242.photobucket.com/albums/ff39/Donzy_2007/menub_bg.gif
https://2img.net/h/i242.photobucket.com/albums/ff39/Donzy_2007/menub_hover_left.gif
https://2img.net/h/i242.photobucket.com/albums/ff39/Donzy_2007/menub_hover_right.gif
https://2img.net/h/i242.photobucket.com/albums/ff39/Donzy_2007/menupu_bg.gif
https://2img.net/h/i242.photobucket.com/albums/ff39/Donzy_2007/menupu_hover_left.gif
https://2img.net/h/i242.photobucket.com/albums/ff39/Donzy_2007/menupu_hover_right.gif



enjoy

preview here


credits to hidecodesgalore