..


Links Patrocinados

jQuery: um menu suspenso com efeito de slide

Artigo escrito por Max Bossi
Página 1 de 2

Neste pequeno artigo eu apresento meu plugin jQuery para criar um simples, mas drop-down, nice menu (menu drop-down) com efeito de slide. Na verdade, devo ser honesto, não é todo o meu trabalho próprio ... meu trabalho, de fato, é na verdade uma reformulação de este plugin que eu estou autorizado a otimizar e expandir adicionando, na verdade, o efeito slides (descontrair).

Vamos ver como implementar o menu drop-down

Primeiro, é claro, precisamos incluir jQuery em nossa página web: 

 



 <script type="text/javascript" src="jquery.js"> </ script>

Sem isso, devemos criar, no corpo do documento (corpo <body> ...</>), o nosso menu que é composto de uma lista com marcadores em que há outras listas (representando o tendão que é "desenrolado" Passe o mouse sobre a mãe item). Aqui está um exemplo de código: 






 <ul id="mrwddm">



  



 <li> <a href="/"> charme-et-provence.com </ a> </ li>



  



 <li> <a href="#"> JavaScript </ a>



    



 <ul>



      



 <li> <a href="/javascript/guide/"> Guia </ a> </ li>



      



 <li> <a href="/javascript/articoli/"> artigos </ a> </ li>



      



 <li> <a href="/javascript/faq/"> FAQ </ a> </ li>



    



 </ Ul>



  



 </ Li>



  



 <li> <a escritura href="#"> </ a>



    



 <ul>



      



 <li> <a href="/script/applet-java/"> Applets Java </ a> </ li>



      



 <li> <a href="/script/javascript/"> JavaScript </ a> </ li>



      



 <li> <a href="/script/script-php/"> PHP </ a> </ li>



      



 <li> <a href="/script/script-aspnet/"> ASP.Net </ a> </ li>



    



 </ Ul>



  



 </ Li>



  



 <li> <a href="http://forum.charme-et-provence.com/"> Fórum </ a> </ li>



  



 <li> <a href="http://blog.charme-et-provence.com/"> Blog </ a> </ li>



  



 <li> <a href="http://tools.charme-et-provence.com/"> Tools </ a> </ li>







 </ Ul>

O nosso menu tem de ser, é claro, devidamente estilizados. Para isso basta adicionar estas linhas no estilo código folha de CSS: 






 ul # mrwddm {margin: 40px 0px 20px 0px; padding: 0px;}







 # Mrwddm li {float: left; display: inline; list-style: none;}







 # Mrwddm-los a {display: block; padding: 3px 10px; margin: 0px; text-decoration: none; espaço em branco: nowrap; background: # EEEEEE;}







 # Mrwddm-los a: hover {background: # CCCCCC; color: # FFFFFF;}







 # Mrwddm los ul {min-width: 120px; margin: 3px 0px 0px 0px; padding: 0px; position: absolute; z-index: 999; visibility: hidden; display: none;}







 # Mrwddm los ul li {float: none; display: inline;}







 # Mrwddm los ul li a {padding: 3px 5px; background: # EEEEEE; color: # 666666;}







 # Mrwddm los ul li a: hover {background: # CCCCCC; color: # FF6600}

Na mesma categoria ...
E-Learning
CSS (Curso) CSS (Curso)
Web Design e Acessibilidade de acordo com a W3C CSS e XHTML. A partir de 29 €.
HTML (Curso) HTML (Curso)
A linguagem de marcação para a Web a partir de 29 €.
Javascript (Curso) Javascript (Curso)
Completo guia para client-side scripting. A partir de 39 €.
Links Patrocinados