Desenvolvimento - CSS
Menu horizontal com jQuery
Neste artigo trago um menu horizontal em jQuery com efeito muito bacana similar ao flash.
por Rafael AmaralOlá pessoal, neste artigo ensino a criar um menu horizontal bem simples com efeito similar ao flash, utilizando as bibliotecas j-Query e j-Query UI.
Primeiro passo:
- Criamos o código HTML.
<!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=iso-8859-1" />
<title>Menu Horizontal</title>
</head>
<body>
<div id="Menu">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
</body>
</html>
Entre as tags <body> e </body> inserimos o código HTML, responsável pelo nosso menu.
Segundo passo:
- Criamos o CSS.
O segundo passo é criar o código CSS, entre as tags <head> e </head>
<!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=iso-8859-1" />
<title>Menu Horizontal</title>
<style type="text/css">
ul{
list-style:none;
margin:0px;
margin-top:5px;
padding:0px;
}
li{
display:inline;
font-size:1.1em;
letter-spacing:-1px;
font-weight:normal;
color:#FFF;
text-align:center;
float:left;
}
li a{
display:block;
color:#FFF;
background-color:#7EBF00;
text-decoration:none;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
}
</style>
</head>
<body>
<div id="Menu">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
</body>
</html>
Terceiro passo
- É acrescentar o Javascript, pela biblioteca j-Query. (lembrando que é preciso copiar os arquivos jquery-ui-1.8.2.custom.min.js e jquery-1.4.2.min.js para o diretório principal)
<!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=iso-8859-1" />
<title>Menu Horizontal</title>
<style type="text/css">
ul{
list-style:none;
margin:0px;
margin-top:5px;
padding:0px;
}
li{
display:inline;
font-size:1.1em;
letter-spacing:-1px;
font-weight:normal;
color:#FFF;
text-align:center;
float:left;
}
li a{
display:block;
color:#FFF;
background-color:#7EBF00;
text-decoration:none;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
//--- Menu
$("ul a").each(function(key){
if(key == 0)
$(this).stop().animate({backgroundColor:"#4F8600"}, {duration:1000});
});
//--- menu
$("ul a").hover(
function(){
$("ul a").each(function(key){
$(this).stop().animate({backgroundColor:"#7EBF00"}, {duration:1500})
});
$(this).stop().animate({backgroundColor:"#4F8600"}, {duration:1000});
},
function(){
$("ul a").each(function(key){
if(key == 0)
$(this).stop().animate({backgroundColor:"#4F8600"}, {duration:800});
else
{
$(this).stop().animate({backgroundColor:"#7EBF00"}, {duration:1500})
}
});
}
);
});
</script>
</head>
<body>
<div id="Menu">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
</body>
</html>
Com o código montado é só realizar um preview no HTML.
É preciso fazer os downloads dos plugins jQuery e jQuery UI no site: http://jquery.com/
Quaisquer dúvidas só entrar em contato pelo meu e-mail email@rafaelamaral.com.br ou pelo meu site www.rafaelamaral.com.br.
Rafael Amaral - Analista Web, com conhecimentos nas seguintes tecnologias:
PHP, Programação Orientada a Objetos, Arquitetura MVC, CakePHP, ASP, SQL, Ajax, JavaScript, jQuery, CSS, HTML, Delphi, C++, SEO, Web service, MySql, Postgre, Análise essencial e análise estruturada, Windows e Linux.
Para mais informações, acesse meu site: http://www.rafaelamaral.com.br/ ou mande um email: email@rafaelamaral.com.br
