Menu CSS com jQuery Round Corners
Olá amigos, estou adicionando agora um menu que é super legal e bem simples de fazer. O que terá de novidade é que o menu terá bordas arredondadas através do jQuery e usará a propriedade text-shadow, que é uma propriedade do CSS para fazer a sobreposição. O menu será baseado no menu do site jQuery.com, aquele azul. Vamos fazer ele no modo horizontal e no modo vertical para atender a demanda para qualquer tipo de aplicação.
Veja os menus em funcionamento.
Menu com jQuery
O menu é bem simples de fazer. Siga os passos seguintes para criação.
Vamos ao que interessa. No passo 1, crie o arquivo html, que é a estrutura do menu. Vamos primeiro fazer o menu horizontal. Você precisa baixar o plugin jQuery Corner, e a Biblioteca jQuery. Feito isso vamos a estrutura do html.
<!DOCTYPE html>
<html language="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alexandre Mattos | Menu com jQuery</title>
<link href="menu.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="menu-h">
<ul>
<li><a href="#">Download</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Bug Tracker</a></li>
<li><a href="#">Discussion</a></li>
</ul>
</div>
</body>
</html>
Agora vamos ao CSS, crie o arquivo menu.css. Note que ele já foi referenciado no código acima com este nome.
menu.css
<pre>* {
margin: 0;
padding: 0;
font-family: arial;
font-size: 12px;
}
a{
outline: none;
}
/* menu horizontal */
body{
background: #0F1923;
}
#menu-h {
float: right;
margin: 30px;
background: #0f67a1;
}
#menu-h ul {
float: left;
margin: 0;
background: none;
padding: 0 2px 0 2px;
}
#menu-h ul li {
float: left;
list-style: none;
border-right: 1px solid #0d5995;
border-left: 1px solid #1175ae;
height: 34px;
background: none;
}
#menu-h li a {
float: left;
padding: 0 12px;
color: #eee;
text-decoration: none;
line-height: 34px;
position: relative;
background: none;
}
#menu-h li:first-child {
background: none;
border-left: none;
}
#menu-h li:last-child {
background: none;
border-right: none;
}
#menu-h li a:hover {
color: #fff;
text-shadow: 1px 1px 1px #000000; /* sombra */
}
Repare que na última linha tem o código text-shadow, que faz a sombra do link. Tudo pronto, mas ainda não está com as bordas arredondadas. O que fazer?
Simples! Agora faremos as referencias do jQuery Round e criaremos os scripts. Eu usarei ele refereciado nos sites listados acima.
Inclua dentro da tag head do seu html, logo abaixo da tag title o seguinte código.
<script language="JavaScript" src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script language="JavaScript" src="http://www.malsup.com/jquery/corner/jquery.corner.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// Arredonda a borda do elemento menu-h
$('#menu-h').corner("3px");
})
</script>
Como vocês podem ver, somente inclui o js do jQuery, o js do plugin corner e abaixo fiz uma função para arredondar a borda da div que criamos, que no caso é menu-h. Com essa função você pode arredondar qualquer elemento que possui uma borda.
Muito simples não? Então agora vamos fazer o outro exemplo que é o menu vertical. Como já definimos que o menu horizontal, feito ainda pouco, se chamou menu-h, o vertical será chamado de menu-m. Este já será criado com o jQuery embutido, para posteriormente não ter que adicionar os scripts.
<!DOCTYPE html>
<html language="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alexandre Mattos | Menu com jQuery</title>
<link href="menu2.css" type="text/css" rel="stylesheet" />
<script language="JavaScript" src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script language="JavaScript" src="http://www.malsup.com/jquery/corner/jquery.corner.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// Arredonda a borda do elemento menu-m
$('#menu-m').corner("round 3px");
})
</script>
</head>
<div id="menu-m">
<ul>
<li><a href="#">Download</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Bug Tracker</a></li>
<li><a href="#">Discussion</a></li>
</ul>
</div>
</body>
</html>
Agora vamos fazer o arquivo css, note que o nome do arquivo css é menu2.css.
menu2.css
* {
margin: 0;
padding: 0;
font-family: arial;
font-size: 12px;
}
a{
outline: none;
}
/* menu horizontal */
body{
background: #0F1923;
}
#menu-m {
background: #fff;
float: right;
margin: 30px;
background: #0f67a1;
}
#menu-m ul li {
list-style: none;
border-top: 1px solid #0D5995;
border-bottom: 1px solid #1175AE;
}
#menu-m li a:link, #menu-m li a:visited {
color:#ffffff;
text-decoration:none;
display: block;
text-align: left;
padding: 8px 10px 8px 10px;
}
#menu-m li:first-child {
border-top: none;
}
#menu-m li:last-child {
border-bottom: none;
}
#menu-m li a:hover {
color: #fffffe;
text-shadow: 1px 1px 1px #000000; /* sombra */
}
Repare que a última linha tem o código da sombra. Agora sim está pronto seus menus.
O que foi feito neste menu é que, em vez de colocar para cada link o float left, eu mantive o inline, não citando a propriedade float.
E é isso, qualquer dúvida só perguntar. Abaixo tem o arquivo para download.
Download: Menu com jQuery.
Abraços!
Ninguéam comentou ainda.
Deixar um comentário
Pesquisar no Blog
Tópicos recentes
Calendário de Posts
Arquivos
- fevereiro 2010 (1)
- dezembro 2009 (14)
