Depois de muito tempo sem postar nada e se quer eu mesmo visitar o blog agora venho mostrar como fazer menu simples com efeito slideDown e slideUp do jQuery.
Antes de começar a fazer tudo você tem que ter a biblioteca jQuery adcionada entre a tag HEAD do documento.
Ex:
<head>
<script type=“text/javascript” src=”scripts/jQuery.js”></script>
</head>
1° vamos ao css do menu:
ul{list-style-type:none;}
ul#menu{
width:600px;
margin:0 auto;
padding-top:20px;
}
ul#menu li{position:relative;float:left;}
ul#menu li a{
display:block;
float:left;
padding:0 30px;
height:30px;
line-height:25px;
color:#fff;
text-decoration:none;
text-shadow:#000 0 1px 0;
background:#090;
outline:none;
}
ul#menu li a:hover{background:#999}
ul#menu li ul{
display:none;
position:absolute;
top:30px;
left:0;
opacity:.5;
}
ul#menu li:hover ul{display:block;}
ul#menu li ul a{
width:120px;
display:block;
border-bottom:1px solid #333;
background:#000;
}
ul#menu li ul a:hover{background:#333;}
ul#menu li ul a.rounded{border-bottom:none;}
Vamos agora ao script que fará o efeito:
<script type=”text/javascript”>
$(document).ready(function(){i3_menu(); // controls the dropdown menu
});
function i3_menu(){
$(“#menu a, li a”).removeAttr(‘title’);
$(“#menu ul”).css({display: “none”}); // Opera Fix$(“#menu li”).each(function(){
var $sublist = $(this).find(‘ul’);//var $sublist = $(this).find(‘ul:first’); original$(this).hover(function(){
$sublist.stop().css({overflow:”hidden”, height:”auto”, display:”none”}).slideDown(400, function(){
$(this).css({overflow:”visible”, height:”auto”, display:”block”});
});
},
function(){
$sublist.stop().slideUp(400, function(){
$(this).css({overflow:”hidden”, display:”none”});
});
});
});
}
</script>
Vamos ao menu:
<ul id="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Serviços</a>
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Manutenção</a></li>
<li><a href="#">Cartões</a></li>
</ul>
</li>
<li><a href="#">Tutoriais</a>
<ul>
<li><a href="#">Eu</a></li>
<li><a href="#">Manutenção</a></li>
<li><a href="#">Cartões</a></li>
</ul>
</li>
<li><a href="#">Contato</a>
<ul>
<li><a href="#">Eu</a></li>
<li><a href="#">Manutenção</a></li>
<li><a href="#">Cartões</a></li>
</ul>
</li>
<li><a href="#">Web</a></li>
</ul>
Comentários em: "Menu DropDown com efeito slideDown/slideUp jQuery" (2)
[...] .Articulo Indexado en la Blogosfera de Sysmaya [...]
Valew por compartilhar muito bom este pequeno efeito.
Abçs