[Tutorial] - Menu horizontal

por cяαzy Ter Jul 16, 2013 1:48 pm

Tutorial
Menu horizontal

Menu horizontal para sua web, deve editar os links, e a cor se preferir outra, muito boa para quem coloca atalhos como fórum, etc.

Código criado pela CódigoFonte e editado por Civilization.

CÓDIGO:

Civilization - Menu horizontal

*** type="text/css">
ul{
list-style:none;
margin:0px;
margin-top:5px;
padding:0px;
}

body {
background-image: url(http://brunosouza.wink.ws/resource-1/images/bg3.jpg);
background-repeat: no-repeat;
text-align: center;
}

li{
display:inline;
font-size:1.1em;
letter-spacing:-1px;
font-weight:normal;
color:**;
text-align:center;
float:right;
}
li a{
display:block;
color:**;
background-color:#7EBF00;
text-decoration:none;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
}

$('document').ready(function(){
//--- Menu
$('ul a').each(function(key){
if(key == 0)
$(this).stop().animate({backgroundColor:"#4F8600"}, {duration:1000});
});

//--- menu
$('ul a').hover(
function(){
$('ul a').each(function(key){
$(this).stop().animate({backgroundColor:"#7EBF00"}, {duration:1500})
});

$(this).stop().animate({backgroundColor:"#4F8600"}, {duration:1000});
},
function(){
$('ul a').each(function(key){
if(key == 0)
$(this).stop().animate({backgroundColor:"#4F8600"}, {duration:800});
else
{
$(this).stop().animate({backgroundColor:"#7EBF00"}, {duration:1500})
}
});
}
);
});