El menú s’utilitza per facilitar la navegació de l’usuari a través de les seccions del lloc. Per atreure l’atenció del visitant, el menú ha de ser funcional, fàcil d’utilitzar i, al mateix temps, combinar-se amb el disseny de tot el recurs.
Instruccions
Pas 1
Abans de crear un menú, decidiu-ne el tipus. Podeu crear un quadre desplegable horitzontal o vertical que es mostrarà a l’usuari quan l’usuari s’hi posi sobre el cursor del ratolí. A l’hora d’escollir un menú concret, podeu guiar-vos per la conveniència que els visitants l’utilitzin i com es combinarà amb el disseny.
Pas 2
Després de triar un tipus de menú, obriu el fitxer de pàgina amb l'editor de text que feu servir per editar HTML. Aneu a la secció de codi desitjada on vulgueu inserir l'element de la interfície.
Pas 3
Després, feu una llista d’opcions creant un bloc i fent una llista numerada amb l’identificador assignat. Per exemple:
- Enllaç 1
- Enllaç 2
- Enllaç 3
En aquest exemple, he creat una llista amb vinyetes de tres elements i l'he col·locat en una capa div amb l'identificador del panell d'ID.
Pas 4
Aneu al bloc de seccions de la pàgina i creeu el menú de fulls d'estil en cascada adequat. Si voleu crear un menú horitzontal, podeu incloure l'atribut en línia de la llista resultant:
#panel ul li {display: inline; }
Pas 5
Per crear una línia horitzontal al llarg de tota la pàgina, podeu utilitzar el codi següent:
#panel ul {margin-left: 0; encoixinat: 2 px 0; }
Pas 6
A continuació, podeu fer la divisió visual en rectangles:
#panel ul li a {margin-left: 3px; vora: 1 px; encoixinat: 2 px 3 px; fons: blau; }
Aquest codi estableix sagnats de text des d'elements de vora a través dels atributs margin-left i padding i també estableix un color de fons per a cadascun dels elements de la llista. En aquest exemple, el color és blau, però el podeu canviar segons el vostre criteri.
Pas 7
Per assenyalar l'element de la pàgina actual seleccionat a la pestanya, configureu els paràmetres adequats a la classe oberta:
#menu ul li a # open {background: red; vora inferior: 1 px; }
La pàgina actual seleccionada al tauler es mostrarà en vermell.
Pas 8
Deseu els canvis al fitxer i comproveu la funcionalitat del codi escrit obrint la pàgina mitjançant un navegador. Per establir opcions de visualització addicionals, sempre podeu afegir CSS o HTML per millorar l'aparença de l'objecte.
