..


Enlaces patrocinados

jQuery: un menú desplegable con efecto de diapositivas

Artículo escrito por Max Bossi
Página 1 de 2

En este breve artículo presento mi plugin de jQuery para crear un sencillo, pero agradable desplegable, menú (menú desplegable) a partir de diapositivas. De hecho, debo ser honesto, no es mi trabajo ... mi trabajo, de hecho, es en realidad una nueva versión de este plugin que me permite optimizar y ampliar mediante la adición, de hecho, las diapositivas efecto (relajarse).

Vamos a ver cómo implementar el menú desplegable

En primer lugar, por supuesto, tenemos que incluir jQuery en nuestra página web: 

 



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

Sin esto, debe crear, en el cuerpo del documento (el cuerpo <body> ...</>), el menú que se compone de una lista con viñetas en las que hay otras listas (que representa el tendón que se "desenrolla" Pase el ratón sobre el elemento de la madre). Aquí está un ejemplo de código: 






 <ul id="mrwddm">



  



 <li> <a href="/"> cesarogcaleb.com </ a> </ li>



  



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



    



 <ul>



      



 <li> <a href="/javascript/guide/"> Guía </ a> </ li>



      



 <li> <a href="/javascript/articoli/"> artículos </ a> </ li>



      



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



    



 </ Ul>



  



 </ Li>



  



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



    



 <ul>



      



 <li> <a href="/script/applet-java/"> applets de 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.cesarogcaleb.com/"> Foro </ a> </ li>



  



 <li> <a href="http://blog.cesarogcaleb.com/"> blog </ a> </ li>



  



 <li> <a href="http://tools.cesarogcaleb.com/"> Herramientas </ a> </ li>







 </ Ul>

Nuestro menú tiene que ser, por supuesto, convenientemente estilizada. Para ello sólo tiene que añadir estas líneas en la hoja de código de estilo CSS: 






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







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







 # Ellos Mrwddm a {display: block; padding: 3px 10px; margin: 0px; text-decoration: none; espacios en blanco: nowrap; fondo: # EEEEEE;}







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







 # Les Mrwddm ul {min de ancho: 120px; margin: 0px 0px 0px 3px; padding: 0px; position: absolute; z-index: 999; visibility: hidden; pantalla: none;}







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







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







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

En la misma categoría ...
E-Learning
CSS (Curso) CSS (Curso)
Diseño Web y de accesibilidad de acuerdo con W3C CSS y XHTML. A partir de 29 €.
HTML (del curso) HTML (del curso)
El lenguaje de marcado para la web desde 29 €.
Javascript (Curso) Javascript (Curso)
Guía completa de scripting del lado del cliente. A partir de 39 €.
Enlaces patrocinados