Com Es Crea Un Menú Horitzontal Desplegable

Taula de continguts:

Com Es Crea Un Menú Horitzontal Desplegable
Com Es Crea Un Menú Horitzontal Desplegable

Vídeo: Com Es Crea Un Menú Horitzontal Desplegable

Vídeo: Com Es Crea Un Menú Horitzontal Desplegable
Vídeo: Como hacer un menú desplegable con HTML y CSS 2024, Abril
Anonim

Un dels aspectes més importants en el desenvolupament de programari i lloc web és la creació de menús. Microsoft i el seu sistema operatiu Windows més famós, ha de ser un exemple excel·lent. Tot i que la majoria dels usuaris de PC del món utilitzen aquest producte, les crítiques no només no disminueixen, sinó que creixen constantment. Bàsicament, es tracta de les molèsties de la ubicació dels elements del menú. A continuació es descriu com crear menús a CSS i Expression Web.

Com es crea un menú horitzontal desplegable
Com es crea un menú horitzontal desplegable

Instruccions

Pas 1

Per començar a crear un menú horitzontal, aneu a Gestiona l’estil i feu clic al botó Nou estil. Anomeneu el nou estil Selector ul li. Important! Assegureu-vos que el fitxer generat tingui l'extensió desplegable.css. Per crear un menú horitzontal, indiqueu a l'element creat que serà exactament horitzontal. A continuació, determineu l'amplada de cada element del menú i elimineu tots els punts innecessaris situats davant de tots els elements de la llista.

Pas 2

Aneu a l’opció Disseny, configureu l’atribut Display a Inline per fer l’alineació horitzontal. A continuació, configureu el valor esquerre a l'atribut Float i feu clic al botó Aplica. Establiu tots els elements de la llista en una línia. Perquè es col·loquin correctament i no es rastreïn l'una sobre l'altra, a l'atribut Amplada, definiu el valor de Posició a 150 px. Comproveu que tots els elements de la llista tinguin la mateixa mida. A continuació, traieu els punts que hi ha davant de tots els elements; per a això, aneu a l'atribut Llista i configureu el paràmetre Cap a l'element tipus Llista. Feu clic a D'acord per acceptar i aplicar tots els canvis.

Pas 3

Ajusteu la mida i l'estil de la lletra per a l'ul ul. Per fer-ho, aneu a Gestiona estils i feu clic amb el botó dret a l’ull ul i seleccioneu Modifica estil. Apareixerà el quadre de diàleg conegut. Aneu a Font, seleccioneu l'atribut Font-family i configureu-lo a Sans-serif, Arial i Helvetica. A continuació, ajusteu la mida del tipus de lletra establint-lo a 0, 9. Després d'això, configureu l'atribut Text-transform a Majúscules. Ajusteu l'alçada dels elements del menú a l'atribut Alçada - Posició, establint el valor en 30 px.

Pas 4

Després de completar totes les accions correctives, deseu el fitxer com a menu.html. A continuació, proveu el menú creat en diferents navegadors per assegurar-vos que funciona correctament. Com podeu veure, el disseny del menú horitzontal és força senzill.

Recomanat: