Laion Camargo: Menu simples com JQuery

Opa! Bom dia,

Bom agora vamos uitilizar alguns dos eventos que aprendemos para montar nosso primeiro Menu em JQuery.

Exemplo do MENU

Vamos lá...

Primeiro importe a biblioteca jquery.js
Eu criei com a versão 'jquery-1.1.3.1.mim.js'

Nosso HTML:

>CODE <<>

<html>
<head>
<title>Menu JQuery</title>
<link rel="stylesheet" href="arquivo.css" type="text/css" media="screen">
<script type="text/javascript" src="jquery-1.1.3.1.min.js"></script>
<script type="text/javascript" src="slideMenu.js"></script>
</head>

<body>
<ul>
<li id="a-home1"><a href="#">Home 1</a></li>
<li id="a-home2"><a href="#">Home 2</a></li>
<li id="a-home3"><a href="#">Home 3</a></li>
<li id="a-home4"><a href="#">Home 4</a></li>
</ul>
<br /><br />

<div id="cont">
<div id="menu-details-home1" class="menu-details">
MENU 1
</div>
<div id="menu-details-home2" class="menu-details">
MENU 2
</div>
<div id="menu-details-home3" class="menu-details">
MENU 3
</div>
<div id="menu-details-home4" class="menu-details">
MENU 4
</div>
</div>
</body>
</html>

Até aqui está facil hehehe..

Crie um arquivo chamado 'slideMenu.js' e coloque dentro da mesma pasta do html

abra o arquivo 'slideMenu.js' e cole este código:

>CODE <<>

$(document).ready(function() {

$('.menu-details').hide();
$('#menu-details-home1').show();

/**HOME 1**/
$('#a-home1').click(function() {
var answer = $('#menu-details-home2');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home3');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home4');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home1');
if (answer.is(':not visible')){
answer.slideDown();
}
});

/**HOME 2**/
$('#a-home2').click(function() {
var answer = $('#menu-details-home1');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home3');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home4');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home2');
if (answer.is(':not visible')){
answer.slideDown();
}
});

/**HOME 3**/
$('#a-home3').click(function() {
var answer = $('#menu-details-home1');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home2');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home4');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home3');
if (answer.is(':not visible')){
answer.slideDown();
}
});

/**HOME 4**/
$('#a-home4').click(function() {
var answer = $('#menu-details-home1');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home2');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home3');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home4');
if (answer.is(':not visible')){
answer.slideDown();
}
});

});

Bico!!!
;D

falta pouco, agora vamos ao nosso CSS só para deixar um menu bonitinho na horizontal hehehe

Crie um arquivo chamado 'arquivo.css' e coloque na mesma pasta do html
Abra o 'arquivo.css' e copie este código pra lá..

>CODE <<>

#cont{
position: relative;
width: 780px;
height: 369px;
text-align: justify;
}

.menu-details{
width: 780px;
height: 369px;
position: absolute;
border: 1px solid #000;
}

li{
float: left;
list-style: none;
width: 80px;
margin-left: 15px;
}

Pronto Pronto!!

qualquer dúvida post no comentário..
Até mais
;)

21 de janeiro de 2008

Menu simples com JQuery

Um comentário: