jQuery: un menú desplegable amb efecte de diapositives
Pàgina 1 de 2
En aquest breu article presento el meu plugin de jQuery per a crear un senzill, però agradable desplegable, menú (menú desplegable) a partir de diapositives. De fet, he de ser honest, no és la meva feina ... la meva feina, de fet, és en realitat una nova versió d' aquest plugin que em permet optimitzar i ampliar mitjançant l'addició, de fet, les diapositives efecte (relaxar).
Anem a veure com implementar el menú desplegable
En primer lloc, per descomptat, hem d'incloure jQuery a la nostra pàgina web:
<script type="text/javascript" src="jquery.js"> </ script>
Sense això, ha de crear, en el cos del document (el cos <body> ...</>), el menú que es compon d'una llista amb vinyetes en les que hi ha altres llistes (que representa el tendó que es "desenrotlla" Passeu el ratolí sobre l'element de la mare). Aquí està un exemple de codi:
<ul id="mrwddm">
<li> <a href="/"> centre-equestre-sarremas.com </ a> </ li>
<li> <a href="#"> JavaScript </ a>
<ul>
<li> <a href="/javascript/guide/"> Guia </ a> </ li>
<li> <a href="/javascript/articoli/"> articles </ a> </ li>
<li> <a href="/javascript/faq/"> FAQ </ a> </ li>
</ Ul>
</ Li>
<li> href ="#"> escriptura </ 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.centre-equestre-sarremas.com/"> Fòrum </ a> </ li>
<li> <a href="http://blog.centre-equestre-sarremas.com/"> bloc </ a> </ li>
<li> <a href="http://tools.centre-equestre-sarremas.com/"> Eines </ a> </ li>
</ Ul>
El nostre menú ha de ser, per descomptat, convenientment estilitzada. Per a això només ha d'afegir aquestes línies al full de codi d'estil CSS:
ul # mrwddm {margin: 0px 40px 20px 0px; padding: 0px;}
# Mrwddm li {float: left; display: inline; list-style: none;}
# Ells Mrwddm a {display: block; padding: 3px 10px; margin: 0px; text-decoration: none; espais en blanc: nowrap; fons: # EEEEEE;}
# Ells Mrwddm a: hover {background: # CCCCCC; color: # FFFFFF;}
# Ells Mrwddm ul {min-width: 120px; margin: 0px 0px 0px 3px; padding: 0px; position: absolute; z-index: 999; visibility: hidden; display: none;}
# Ells Mrwddm ul li {float: none; display: inline;}
# Ells Mrwddm ul li a {padding: 3px 5px; fons: # EEEEEE; color: # 666.666;}
# Ells Mrwddm ul li a: hover {background: # CCCCCC; color: # FF6600}
 |
CSS (Curs)
Disseny Web i d'accessibilitat d'acord amb W3C CSS i XHTML. A partir de 29 €. |
 |
HTML (del curs)
El llenguatge de marcat per a la web des de 29 €. |
 |
Javascript (Curs)
Guia completa de scripting del costat del client. A partir de 39 €. |