Content

• Per trepitjar
• Primera part de 2: escriptura de l'HTML
• Part 2 de 2: Redacció del CSS
• Consells

Amb un menú desplegable es crea una visió general i jerarquitzada de totes les parts importants de la pàgina i de les subseccions que conté la pàgina. Només heu de moure el ratolí per sobre de les seccions principals per fer que apareguin les seccions secundàries. Podeu crear un menú desplegable només amb HTML i CSS.

Per trepitjar

Primera part de 2: escriptura de l'HTML

1. Creeu la vostra secció de navegació. Normalment utilitzeu nav> per a la barra de navegació de tot el lloc web, capçalera> per a seccions d’enllaços més petites que estan lligades a la pàgina o div> si no sembla que hi hagi cap altra opció. Col·loqueu-lo en un element div> perquè pugueu ajustar l'estil del contenidor i del propi menú.
   • div>
   • nav>
   • / nav>
   • / div>
2. Doneu a cada secció un atribut de classe. Més endavant utilitzarem l'atribut class per modificar l'estil d'aquests elements amb CSS. Doneu al contenidor i al menú el seu propi atribut de classe.
   • div>
   • nav>
   • / nav>
   • / div>
3. Afegiu una llista d'elements del menú. La llista no ordenada (ul>) conté els elements del menú principal (elements de la llista li>), si l'usuari mou el ratolí sobre ell, veu els menús desplegables. Afegiu la classe "clearfix" a l'element de la vostra llista; hi arribarem més endavant al full de càlcul CSS.
   • div>
   • nav>
   •       ul>
   •          li> Inici / li>
   •          li> Empleats
   •          li> Contacte
   •          / li>
   •       / ul>
   • / nav>
   • / div>
4. Afegiu enllaços. Si aquests elements del menú de nivell superior també enllacen a les seves pròpies pàgines, ara podeu inserir els enllaços. Enllaç a un ancoratge inexistent (com ara "#!"), Fins i tot si no enllacen amb res, el cursor de l'usuari serà diferent. En aquest exemple, Contact no porta enlloc, però els altres dos elements del menú sí:
   • div>
   • nav>
   • ul>
   • li>a href = "/">Inici/ a>/ li>
   • li>a href = "/ Empleats">Membres del personal/ a>
   • / li>
   • li>a href = "#!">Contacte/ a>
   • / li>
   • / ul>
   • / nav>
   • / div>
5. Creeu subllistes per als elements desplegables. Un cop creat l'estil, aquestes llistes formen el menú desplegable. Col·loqueu la llista a l’element de la llista sobre el qual l’usuari passarà el ratolí. Afegiu un atribut de classe i un enllaç com abans.
   • div>
   • nav>
   • ul>
   • li> a href = "/"> Inici / a> / li>
   • li> a href = "/ Employees"> Employees / a>
   •          ul>
   •             li> a href = "/ borsato"> Marco Borsato / a> / li>
   •             li> a href = "/ titulaer"> Chriet Titulaer / a> / li>
   •          / ul>
   • / li>
   • li> a href = "#!"> Contacte / a>
   •          ul>
   •             li> a href = "mailto: [email protected]"> Notificar un problema / a> / li>
   •             li> a href = "/ support"> Atenció al client / a> / li>
   •          / ul>
   • / li>
   • / ul>
   • / nav>
   • / div>

Part 2 de 2: Redacció del CSS

1. Obriu el full d'estil CSS. Envieu un enllaç al full d'estil CSS a la secció principal del document HTML si l'enllaç encara no hi és. En aquest article, no tractarem els conceptes bàsics de CSS, com ara establir un tipus de lletra i un color de fons.
2. Afegiu un codi clearfix. Recordeu afegir la classe "clearfix" a la llista de menús? Normalment, els elements del menú desplegable tenen un fons transparent, que permet moure altres elements. Una simple adaptació al CSS pot resoldre aquest problema. Aquí teniu una solució ràpida i agradable, tot i que no funcionarà a Internet Explorer 7 i versions anteriors:
   • .clearfix: després de {
   • contingut: "";
   • visualització: taula;
   • }
3. Crea el disseny bàsic. Amb aquest codi, podeu col·locar el menú a la part superior de la pàgina i amagar els elements desplegables. Això és molt senzill a propòsit perquè puguem centrar-nos en el codi corresponent. Podeu modificar-lo més endavant amb un codi CSS addicional, com ara farciment i marge.
   • .nav-wrapper {
   • amplada: 100%;
   • fons: # 008B8B;
   • }
   •  
   • menú .nav {
   • posició: relativa;
   • pantalla: bloc en línia;
   • }
   •  
   • menú .sub {
   • posició: absoluta;
   • visualització: cap;
   • fons: # 555;
   • }
4. Feu que apareguin els elements desplegables quan passeu el ratolí per sobre d’ells. Els elements de la llista desplegable ara estan configurats de manera que no es mostrin. A continuació s'explica com fer que aparegui tota una sublista tan aviat com passeu el cursor per sobre del "pare":
   • .nav-menu ul li: passa el cursor> ul {
   • visualització: bloc;
   • }
   • Nota: si s'amaguen menús addicionals als elements del menú del menú desplegable, les propietats afegides aquí s'aplicaran a tots els menús. Si només voleu que l'estil s'apliqui al primer nivell dels menús desplegables, utilitzeu ".nav-menu> ul".
5. Indiqueu amb una fletxa que hi ha un menú desplegable. Els dissenyadors web normalment mostren amb una fletxa cap avall que un element obre un menú desplegable. Aquest codi afegeix aquesta fletxa a tots els elements del menú:
   • menú .nav> ul> li: després de {
   • contingut: " 25BC"; / * unicode escapat per a la fletxa avall * /
   • font-size: .5em;
   • visualització: bloc;
   • posició: absoluta;
   •    }
   • Nota: ajusteu la posició de la fletxa amb les propietats superior, inferior, dreta o esquerra.
   • Nota: si no tots els elements del menú tenen desplegables, no canvieu l’aspecte de tot el menú de navegació de la classe. En lloc d'això, afegiu una altra classe (com ara el menú desplegable) a cada element li on vulgueu una fletxa. Consulteu aquesta classe al codi anterior.
6. Ajusteu el farciment, el fons i altres propietats. El menú hauria de funcionar ara, però encara no és molt agradable. Amb les propietats de CSS podeu personalitzar l’aspecte i la ubicació de cada classe o element.

Consells

• Si voleu afegir un menú desplegable a un formulari, és molt fàcil en HTML5 amb l'element select>.
• L'enllaç a href = "#"> es desplaça cap a la part superior de la pàgina i un enllaç que apunta a una àncora inexistent, com ara un href = "#!">, No es desplaça. Si us sembla massa descuidat, podeu canviar l'aspecte del cursor amb CSS.
• Quan copieu i enganxeu el codi de mostra, traieu totes les vinyetes.