Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá companheiros do imasters,
Estou tendo problemas com a criação de um menu usando as funções slideUp() e slideDown() do jQuery.
Eu faço o uso dessas funções do evento .hover() também do jQuery mas nada acontece.
Segue o código:
HTML:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>PhoneGap</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<link rel="stylesheet" href="css/estilo.css"/>
</head>
<body>
<nav id="menu">
<ul id="menu">
<li><a href="#">Home</a>
<ul>
<li><a href="#">Quem somos</a></li>
<li><a href="#">Útimnas noticias</a></li>
<li><a href="#">Nosso objetivo</a></li>
</ul>
</li>
<li><a href="#">Sobre nós</a>
<ul>
<li><a href="#">Depoimentos</a></li>
</ul>
</li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Produtos</a>
<ul>
<li><a href="#">Produtos 1</a></li>
<li><a href="#">Produtos 2</a></li>
<li><a href="#">Produtos 3</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</body>
</html>O CSS:
* {
margin:0px;
padding:0px;
}body {
background: #FFF;
color: #8D8C8C;
font: 11px Arial, Helvetica, sans-serif;
}nav ul {
list-style:none;
}nav ul li {
position:relative;
float:left;
}nav ul li a {
color:#9D9D9D;
width:98px;
height:33px;
text-align:center;
padding:15px 0 0 0;
display:block;
font-size:15.5px;
text-decoration:none;
border:1px solid #DCDCDC;
}nav ul li a:hover {
color:#000;
background:#DCDCDC;
}ul li ul{
position:absolute;
top:47.5px;
left:-1px;
}li li {
display:none;
}li ul li a{
border-bottom:1px solid #DCDCDC;
border-left:1px solid #DCDCDC;
width:140px;
height:0px;
padding:10px 0 30px 25px;
margin:0px;
text-align:left;
}O JS:
$(document).ready(function() {
$("#menu ul li").hover(function {
$(this).children("ul").slideDown();
},
function() {
$(this).children("ul").slideUp();
}
);
});Obs.: Todos os scripts foram chamados corretamente.
Carregando comentários...