JQuery é uma biblioteca JavaScript que veio para ajudar os desenvolvedores a criar efeitos, animações, interações, etc, em qualquer documento HTML de uma maneira bem mais fácil e eficiente. Vou fazer uma série de tutoriais onde usaremos JQuery para dar aquele "toque especial" em uma aplicação.
Hoje vou mostrar um menu drop down bem fácil de ser feito e leve.
A) Colocar a chamada para JQuery em seu template
A primeira coisa a ser feita é colocar o arquivo JavaScript em seu template. Para isso, utilize a biblioteca API do Google. Assim você não precisa se preocupar com hospedagem de JavaScript e deixa sua página mais rápida.
Como usaremos a versão 1.3.1 do JQuery e em outras aplicações usaremos também a versão 1.5.3 do JQuery UI, já escreva sua chamada carregando os dois scripts:
<script src='http://www.google.com/jsapi'/>
<script>
google.load("jquery", "1.3.1");
google.load("jqueryui", "1.5.3");
</script>
Coloque o código logo após a tag ]]></b:skin> .
Importante!
Nem todos os scripts conversam bem entre si. Se você colocar JQuery em seu template e estiver usando Prototype, script.aculo.us ou MooTools pode ter problemas de funcionamento de algumas aplicações. Atualmente, muitos scripts desenvolvidos em Prototype, script.aculo.us ou MooTools já tem versão semelhante em JQuery (como o Lightbox e galerias de imagens animadas, por exemplo). Portanto, você precisa verificar o que é mais interessante para você usar.
B) Colocar o script de carregamento no template
Logo abaixo da chamada descrita no ítem acima coloque o código para carregar o script para o menu :
script type='text/javascript'>
//<![CDATA[
function topmenu(){
$(" #navlist ul "). css({display: "none"});
$(" #navlist li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(200);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function(){
topmenu();
});
//]]>
</script>
C) Código HTML - Lista de Links
Devemos montar agora a lista de links não-ordenada de 2 (ou mais) níveis, por exemplo:
<div id='topmenu'>
<ul id='navlist'>
<li><a class='home' href='http://home-link' title='Voltar à Página Inicial'>Home</a></li>
<li><a href='Link Principal 1'>Titulo 1</a>
<ul>
<li><a class='first' href='Link Secundário 1.1'>Sub-título 1.1</a></li>
<li><a href='Link Secundário 1.2'>Sub-título 1.2</a></li>
<li><a href='Link Secundário 1.3'>Sub-título 1.3</a></li>
</ul>
</li>
<li><a href='Link Principal 2'>Titulo 2</a>
<ul>
<li><a class='first' href='Link Secundário 2.1'>Sub-título 2.1</a></li>
<li><a href='Link Secundário 2.2'>Sub-título 2.2</a></li>
<li><a href='Link Secundário 1.3'>Sub-título 2.3</a></li>
</ul>
</li>
<li><a href='Link Principal 3'>Titulo 3</a>
<ul>
<li><a class='first' href='Link Secundário 3.1'>Sub-título 3.1</a></li>
<li><a href='Link Secundário 3.2'>Sub-título 3.2</a></li>
<li><a href='Link Secundário 3.3'>Sub-título 3.3</a></li>
</ul>
</li>
<li><a href='Link Simples'>Link Simples</a></li>
</ul>
</div> <!-- end TopMenu -->
D) CSS
Esta é a parte mais complicada para ensinar menus drop-down pois são muito sensíveis às medidas e cada template é diferente de outro. Vou tentar ser o mais didática que eu puder - vamos lá...
/* TopMenu */
#topmenu { /* container geral do menu - altere medidas e cores */
float: left;
width: 980px;
height: 45px;
border-bottom: 1px solid #191919; }
#topmenu #navlist ul { /* Lista Principal - não altere */
position: relative;
width: 100%;
line-height: 1.5em; }
#topmenu #navlist a { /* estilos do Link Principal - altere medidas e cores */
display: block;
padding: 10px 15px 10px 15px;
color: #fff;
text-decoration: none;
font-weight: bolder;
font-size: 16px;}
#topmenu #navlist a:hover { /* Link Principal ao passar o mouse - altere cores */
background-color: #393939;
color: #fff; }
#topmenu #navlist a.home { /* coloca estilos no link HOME */
color: #01B0F0;
font-size: 15px;
font-variant: small-caps;
padding: 10px 15px 10px 15px; }
#topmenu #navlist li { /* ítens de lista Principal - não altere */
float: left;
position: relative; }
#topmenu #navlist li ul { /* Lista Secundária */
position: absolute;
display: none;
width: 12em; /* VEJA OBSERVAÇÃO 1 */
top: 3em; /* VEJA OBSERVAÇÃO 1 */
border: 1px solid #ccc; /* altere cores */
padding: 0 5px 0 5px;
background: #000; /* altere cores */
line-height: 1.5em; }
#topmenu #navlist li ul a { /* estilos do Link Secundário */
width: 10em; /* VEJA OBSERVAÇÃO 2 */
height: auto;
float: left;
background-color: #000;
color: #fff;
border-top: 1px solid #fff;
padding: 3px 2px 3px 2px;
margin-left: 3px; /* VEJA OBSERVAÇÃO 2 */
font-size: 13px;
text-indent: 12px; /* VEJA OBSERVAÇÃO 2 */
font-variant: small-caps;
letter-spacing: .1em; }
#topmenu #navlist li ul a.first { /* retira a borda do topo do 1º ítem */
border: 0; }
#topmenu #navlist li ul a:hover { /* links secundários ao passar o mouse */
background: #01B0F0;
color: #00529B!important; }
Observação 1
A medida de largura (width: 12em) refere-se a largura da "caixinha" onde ficarão os links secundários.
Importante!
A medida "top: 3em" é muito sensível. Você deve adapta-la às medidas de fonte, padding e altura de linha que escolheu para o link principal. Se você colocar uma medida muito pequena, a "caixa" dos links secundários irá se sobrepor aos links principais. Se você colocar uma medida muito grande, os links secundários não se fixam (o cursor "escorrega"). Essa medida significa o quanto o "topo" da lista secundária deve se relacionar a lista principal, portanto tem que ser bem precisa.
Observação 2
A medida de largura (width: 10em) deve ser menor do que a medida da "caixa" para que os links "descolem" das bordas. O "text-indent" e a "margin-left" também posicionam os links de maneira mais centralizada, para obter uma aparência melhor.
Lembre-se que as medidas devem estar bem relacionadas para um efeito bonito. Faça testes para conseguir as medidas mais adequadas dependendo do menu que deseja.
Script desenvolvido por Lucas para o Fórum Webly.
Technorati Marcas: JQuery,é uma,biblioteca,JavaScript,que,veio,para,ajudar,os,desenvolvedores,a criar,efeitos
0 comentários:
Postar um comentário