Sådan oprettes rullemenuer på HTML- og CSS-sprog

Forfatter: Lewis Jackson
Oprettelsesdato: 13 Kan 2021
Opdateringsdato: 1 Juli 2024
Anonim
Sådan oprettes rullemenuer på HTML- og CSS-sprog - Tips
Sådan oprettes rullemenuer på HTML- og CSS-sprog - Tips

Indhold

Denne wikiHow lærer dig, hvordan du opretter rullemenuer på dit websted ved hjælp af HTML og CSS-kode. En rullemenu vises, når den besøgende holder musemarkøren over den angivne knap; Dernæst kan de klikke på et af elementerne for at gå til denne indstillings websted.

Trin

  1. Åbn HTML-teksteditor. Du kan bruge en simpel teksteditor (Notepad, TextEdit) eller mere avanceret (Notepad ++).
    • Hvis du beslutter at gå til Notepad ++, skal du vælge HTML fra "H" -delen af ​​menuen Sprog (Sprog) øverst i vinduet, inden du fortsætter.

  2. Indtast en titel til dokumentet. Her er koden, der bestemmer typen af ​​kode, der skal bruges til resten af ​​dokumentet:
  3. Opret rullemenuen. Indtast følgende kode for at angive størrelsen og farven på rullemenuen, husk at erstatte "#" med den parameter, du vil bruge (jo større nummer, jo større vil rullemenuen være). Vi kan også erstatte baggrundsfarven "baggrundsfarve" og farven "farve" med den farve (eller HTML-farvekode) du ønsker:

  4. Angiv, at du vil erstatte linkene i rullemenuen. Da du derefter tilføjer links til menuen, kan du erstatte dem i rullemenuen ved at indtaste følgende kode:
  5. Opretter udseendet på rullemenuen. Den følgende kode bestemmer størrelsen og farven på rullemenuen, inklusive placeringen, når den kombineres med andre elementer på websiden. Glem ikke at erstatte "#" i sektionen "min. Bredde" med det ønskede nummer (f.eks. 250) og ændre "baggrundsfarve" (baggrundsfarve) -overskriften til en bestemt farve eller HTML-kode:

  6. Føj detaljer til indholdet i rullemenuen. Den følgende kode angiver tekstfarven indeni og størrelsen på rullemenu-knappen. Glem ikke at erstatte "#" med antallet af pixels, der definerer menuknappens størrelse:
  7. Redigerer, hvordan musemarkøren ændres, når den svæves i rullemenuen. Når du holder musemarkøren over menuknappen, skal nogle farver ændres. Linjen "baggrundsfarve" afspejler den ændrede farve, når du vælger noget i rullemenuen, mens den anden "baggrundsfarve" er den farve, som menuknappen ændres til. Ideelt set skulle begge disse farver være lysere, end da de ikke blev valgt:
  8. Luk sektionen CSS. Indtast følgende kode for at angive, at du er færdig med CSS-delen af ​​dokumentet:
  9. Opret et navn til menuknappen. Indtast følgende kode, men husk at erstatte "Navn" med navnet på rullemenu-knappen (for eksempel: Menu):
  10. Tilføj links til menuen. Hvert element i rullemenuen vil linke til noget, det være sig en side på det aktuelle websted eller et eksternt websted. Føj dit valg til rullemenuen ved at indtaste følgende kode, som du skal udskifte https://www.website.com med linkadressen (hold parenteserne) og udskift "Navn" med linknavnet.
  11. Luk dokumentet. Indtast følgende tags for at lukke dokumentet og specificere kodens slutning af rullemenuen:
  12. Gennemgangskode angiver rullemenuen. Kodestykket ser sådan ud: Annoncer

Råd

  • Gennemgå altid koden, før du sender den på hjemmesiden.
  • Instruktionerne ovenfor er for rullemenuer, der fungerer, når du holder musemarkøren over menuknappen. Hvis du vil oprette en rullemenu, der kun klikker, når du klikker, skal du bruge JavaScript.

Advarsel

  • HTML-farven er ret begrænset, når vi bruger tags som "sort" eller "grøn". Du kan tjekke HTML-farvekodegeneratoren, der giver brugerne mulighed for at oprette og bruge brugerdefinerede farver her.