Content

• Passos
• Consells
• Advertiment

Aquest wikiHow us ensenya a crear menús desplegables al vostre lloc web mitjançant codi HTML i CSS. Apareixerà un menú desplegable quan el visitant passa el punter del ratolí sobre el botó especificat; A continuació, poden fer clic en un dels elements per anar al lloc web d'aquesta opció.

Passos

1. 

   Obre un editor de text HTML. Podeu utilitzar un editor de text senzill (Bloc de notes, TextEdit) o ​​més avançat (Bloc de notes ++).
   • Si decidiu anar a Notepad ++, heu de triar HTML des de la part "H" del menú Llenguatge (Idioma) a la part superior de la finestra abans de continuar.

2. 

   
   
   Introduïu un títol per al document. Aquí teniu el codi que determina el tipus de codi que s’ha d’utilitzar per a la resta del document:

3. 

   Crea un menú desplegable. Introduïu el codi següent per especificar la mida i el color del menú desplegable; recordeu que heu de substituir el "#" pel paràmetre que vulgueu utilitzar (com més gran sigui el nombre, més gran serà el menú desplegable). També podem substituir el color de fons "background-color" i el color "color" pel color (o codi de color HTML) que vulgueu:

4. 

   
   
   Especifiqueu que voleu substituir els enllaços al menú desplegable. Com que després afegirà enllaços al menú, podeu substituir-los al menú desplegable introduint el codi següent:

5. 

   Crea l'aparença del menú desplegable. El codi següent determina la mida i el color del menú desplegable, inclosa la posició quan es combina amb altres elements de la pàgina web. No oblideu substituir el "#" de la secció "amplada mínima" pel número que vulgueu (per exemple, 250) i canvieu la capçalera "color de fons" (color de fons) a un color específic o codi HTML:

6. 

   
   
   Afegiu detalls al contingut del menú desplegable. El següent codi especificarà el color del text dins i la mida del botó del menú desplegable. No oblideu substituir el "#" pel nombre de píxels que defineix la mida del botó del menú:

7. 

   Edita com canvia el punter del ratolí quan es passa el cursor al menú desplegable. Quan passeu el punter del ratolí per sobre del botó de menú, cal canviar alguns colors. La línia "color de fons" reflectirà el color canviat quan seleccioneu alguna cosa al menú desplegable, mentre que el segon "color de fons" és el color al qual canviarà el botó del menú. Idealment, aquests dos colors haurien de ser més clars que quan no es van seleccionar:

8. 

   Tanqueu la secció CSS. Introduïu el codi següent per especificar que heu acabat amb la part CSS del document:

9. 

   Creeu un nom per al botó de menú. Introduïu el codi següent, però recordeu de substituir "Nom" pel nom del botó del menú desplegable (exemple: Menú):

10. 

    Afegiu enllaços al menú. Cada element del menú desplegable enllaçarà a alguna cosa, ja sigui una pàgina del lloc web actual o un lloc web extern. Afegiu la selecció al menú desplegable introduint el següent codi, del qual heu de substituir https://www.website.com amb l'adreça de l'enllaç (manteniu els parèntesis) i substituïu "Nom" pel nom de l'enllaç.

11. 

    Tanca el document. Introduïu les etiquetes següents per tancar el document i especificar el final del codi del menú desplegable:

12. 

    El codi de revisió especifica el menú desplegable. El fragment tindrà un aspecte semblant a aquest: anuncis

Consells

• Reviseu sempre el codi abans de publicar-lo al lloc web.
• Les instruccions anteriors són per als menús desplegables que funcionaran quan passeu el punter del ratolí per sobre del botó de menú. Si voleu crear un menú desplegable que només faci clic quan feu clic, heu d’utilitzar JavaScript.

Advertiment

• La coloració HTML és força limitada quan fem servir etiquetes com "negre" o "verd". Podeu consultar el generador de codis de colors HTML que permet als usuaris crear i utilitzar colors personalitzats aquí.