Olá galera.
Bem, eu estava estudando jQuery quando vi este tutorial de um menu onclick, que desliza e mostra todas opções:
http://www.clarklab.net/blog/posts/animated-drop-down-menu-with-jquery/
Foi então que eu tentei modificá-lo para fazer um menu horizontal, mas não sei o que modificar no código para fazê-lo. Eu adicionei mais listas no menu, mas ele não funciona corretamente.
O problema é o seguinte: Ele puxa pela classe para poder deslizar, mas como eu adicionei mais itens na lista (ul), ele abre todas ao mesmo tempo, mas com o layout quebrado.
Vocês sabem o que posso fazer pra ajeitar isso ?
Este é meu código:
*************CSS**************
@charset "utf-8";
/* CSS Document */
body{
background:#534741;font-family:Arial, Helvetica, sans-serif; font-size:12px;
}
ul, li{margin:0; padding:0; list-style:none;}
.menu_head{border:1px solid #998675;}
.menu_body {display:none; width:147px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;text-align:center;}
.menu_body li{background:#493e3b;}
.menu_body li.alt{background:#362f2d;}
.menu_body li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}
.menu_body li a:hover{padding:15px 10px; font-weight:bold;}
.container {text-align:center;}
*****************CSS*******************
****************Código*****************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Animated Drop Down Menu with jQuery</title>
<link href="inc/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jsfiles/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("ul.menu_body li:even").addClass("alt");
$('img.menu_head').click(function () {
$('ul.menu_body').slideToggle('medium');
});
$('ul.menu_body li a').mouseover(function () {
$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
});
$('ul.menu_body li a').mouseout(function () {
$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
});
});
</script>
</head>
<body>
<div class="container">
<ul class="lista">
<li class="inicio">inicio
<ul>
<li><a href="#">Cadastro</a></li>
<li><a href="#">Ginásios</a></li>
<li><a href="#">Anunciar</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Ajuda</a></li>
</ul>
</li>
<li>cadastrar</li>
</ul>
<img src="imagens/but_home.gif" class="menu_head" />
<ul class="menu_body">
<li><a href="#">Início</a></li>
<li><a href="#">Cadastro</a></li>
<li><a href="#">Ginásios</a></li>
<li><a href="#">Anunciar</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Ajuda</a></li>
</ul>
<img src="imagens/but_cadastrar.gif" class="menu_head" />
<ul class="menu_body">
<li><a href="#">Usuário</a></li>
<li><a href="#">Empresário</a></li>
<li><a href="#">Ginásios</a></li>
<li><a href="#">Quadras</a></li>
</ul>
<img src="imagens/but_ginasios.gif" class="menu_head" />
<ul class="menu_body">
<li><a href="#">Buscar</a></li>
<li><a href="#">Mapa Geral</a></li>
</ul>
<img src="imagens/but_anunciar.gif" class="menu_head" />
<ul class="menu_body">
<li><a href="#">Ginásio</a></li>
<li><a href="#">Quadra</a></li>
</ul>
<img src="imagens/but_contato.gif" class="menu_head" />
<ul class="menu_body">
<li><a href="#">Email</a></li>
<li><a href="http://www.twitter.com/duuuduu">Twitter</a></li>
</ul>
<img src="imagens/but_ajuda.gif" class="menu_head" />
<ul class="menu_body">
<li><a href="#">Como alugar quadras</a></li>
<li><a href="#">Como anunciar ginásios</a></li>
<li><a href="#">Perguntas Frequentes</a></li>
</ul>
</div>
</body>
</html>
****************Código*****************
Desde já agradeço a ajuda.
abraços.