Menu em jQuery
Enviada por Eduardo Nunes Roveré
|
Eduardo Nunes Roveré
Menu em jQuery 21 de March de 2011 às 12:05PM |
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.
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.
|
Marcos Regis
Re: Menu em jQuery 21 de March de 2011 às 01:40PM |
O correto seria você adicionar apenas os <li> e não mais <ul> Pois o <ul> é o menu inteiro.
Para que o resultado que você quer seja possível você deve modificar o estilo do <ul> para ser flutuante a esquerda.
Tente adicionar um float:left para a classe .menu_body
Tem o item online para ver como ficou?
Para que o resultado que você quer seja possível você deve modificar o estilo do <ul> para ser flutuante a esquerda.
Tente adicionar um float:left para a classe .menu_body
Tem o item online para ver como ficou?
|
Eduardo Nunes Roveré
Re: Menu em jQuery 21 de March de 2011 às 06:22PM |
|
Marcos Regis
Re: Menu em jQuery 21 de March de 2011 às 07:51PM |
|
Emilio Caveari
Re: Menu em jQuery 16 de September de 2011 às 03:27AM |
Eduardo Nunes Roveré, boa noite.
Dei uma olhada no site que passou com os codigos, dei uma mexida nos codigos..
modifiquei o seguinte
++++++++++++++++++++++
HTML:
<div class="container">
//-- ul inicial, todo o restante esta contida dentro dessa ul
<ul class="ini">
//--primeira li que será a exibida no menu
<li><img src="http://prg.ufpel.tche.br/eduardo/menuteste/imagens/but_home.gif" class="menu_head" rel="inicio"/>
//--ul do primeiro li (no caso o menu inicial)
//--repare que ul tem id="inicio" e a imagem tem rel="inicio", usei isso para abrir o menu no Jquery
<ul class="menu_body" id="inicio">
<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>
</li>
//--Inicia-se novamente uma li para o segungo menu (cadastrar) e assim por diante
//-- ao finalizar todas as li de menu fecha o ul inicial
</ul>
</div>
+++++++++++++++++++
JS:
$('img.menu_head').click(function () {
//--pego o valor do rel da imagem e salvo na variavel rel
var rel = $(this).attr('rel');
//--abro o ul com class menu_body que contem o id=rel
$('ul.menu_body[id="'+rel+'"]').slideToggle('medium');
});
+++++++++++++++++
no CSS modifiquei pouco, apenas configurei o .ini e seus children e coloquei um width no container pra ele nao descer o menu.
Espero ter lhe ajudado.
Dei uma olhada no site que passou com os codigos, dei uma mexida nos codigos..
modifiquei o seguinte
++++++++++++++++++++++
HTML:
<div class="container">
//-- ul inicial, todo o restante esta contida dentro dessa ul
<ul class="ini">
//--primeira li que será a exibida no menu
<li><img src="http://prg.ufpel.tche.br/eduardo/menuteste/imagens/but_home.gif" class="menu_head" rel="inicio"/>
//--ul do primeiro li (no caso o menu inicial)
//--repare que ul tem id="inicio" e a imagem tem rel="inicio", usei isso para abrir o menu no Jquery
<ul class="menu_body" id="inicio">
<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>
</li>
//--Inicia-se novamente uma li para o segungo menu (cadastrar) e assim por diante
//-- ao finalizar todas as li de menu fecha o ul inicial
</ul>
</div>
+++++++++++++++++++
JS:
$('img.menu_head').click(function () {
//--pego o valor do rel da imagem e salvo na variavel rel
var rel = $(this).attr('rel');
//--abro o ul com class menu_body que contem o id=rel
$('ul.menu_body[id="'+rel+'"]').slideToggle('medium');
});
+++++++++++++++++
no CSS modifiquei pouco, apenas configurei o .ini e seus children e coloquei um width no container pra ele nao descer o menu.
Espero ter lhe ajudado.
Você precisa estar logado no PHPBrasil.com para poder enviar mensagens para os nossos fóruns.
Faça o login aqui.
Faça o login aqui.
Copyright © 2000-2022 João Prado Maia