Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Cleiton Pereira

[Resolvido] jQuery - slideUp() e slideDown()

Por , em Javascript

Recommended Posts

Cleiton Pereira    1

Cleiton Pereira
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Andrey Knupp Vital    136

Andrey Knupp Vital
Postado

Erro de sintaxe aqui 

$("#menu ul li").hover(function {

 

Faltou o () .. faça assim:

$(document).ready(function(){
   $('#menu ul li').hover(function(){
          $( this ).children( "ul" ).slideDown();
   }, function(){
       $( this ).children( "ul" ).slideUp();
   }); 
});

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cleiton Pereira    1

Cleiton Pereira
Postado

Mostre como está o seu HTML.

 

O HTML está em meu primeiro post amigo.

 

Segue o mesmo:

 

<!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>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito