Inhoud

• Stappen
• Advies
• Waarschuwing

Deze wikiHow leert je hoe je vervolgkeuzemenu's op je website kunt maken met behulp van HTML- en CSS-code. Een vervolgkeuzemenu zal verschijnen wanneer de bezoeker de muisaanwijzer over de gespecificeerde knop beweegt; Vervolgens kunnen ze op een van de items klikken om naar de website van die optie te gaan.

Stappen

1. 

   Open HTML-teksteditor. U kunt een eenvoudige teksteditor (Kladblok, Teksteditor) of meer geavanceerd (Kladblok ++) gebruiken.
   • Als u besluit naar Notepad ++ te gaan, moet u kiezen HTML uit het "H" -gedeelte van het menu Taal (Taal) bovenaan het venster voordat u verdergaat.

2. 

   
   
   Voer een titel voor het document in. Hier is de code die het type code bepaalt dat voor de rest van het document moet worden gebruikt:

3. 

   Maak een vervolgkeuzemenu. Voer de volgende code in om de grootte en kleur van het vervolgkeuzemenu te specificeren, vergeet niet om de "#" te vervangen door de parameter die u wilt gebruiken (hoe groter het getal, hoe groter het vervolgkeuzemenu). We kunnen ook de achtergrondkleur "achtergrondkleur" en de kleur "kleur" vervangen door elke gewenste kleur (of HTML-kleurcode):

4. 

   
   
   Geef in het vervolgkeuzemenu op dat u de links wilt vervangen. Aangezien u dan links aan het menu toevoegt, kunt u deze in het vervolgkeuzemenu vervangen door de volgende code in te voeren:

5. 

   Creëert het uiterlijk van het vervolgkeuzemenu. De volgende code bepaalt de grootte en kleur van het vervolgkeuzemenu, inclusief de positie in combinatie met andere elementen op de webpagina. Vergeet niet de "#" in het gedeelte "min-breedte" te vervangen door het nummer dat u wilt (bijv. 250) en de koptekst "background-color" (achtergrondkleur) te wijzigen in een specifieke kleur of HTML-code:

6. 

   
   
   Voeg details toe aan de inhoud van het vervolgkeuzemenu. De volgende code specificeert de tekstkleur binnenin en de grootte van de vervolgkeuzemenuknop. Vergeet niet de "#" te vervangen door het aantal pixels dat de grootte van de menuknop definieert:

7. 

   Bewerkt hoe de muisaanwijzer verandert wanneer de muisaanwijzer in het vervolgkeuzemenu beweegt. Wanneer u de muisaanwijzer over de menuknop beweegt, moeten enkele kleuren worden gewijzigd. De lijn "achtergrondkleur" geeft de veranderde kleur weer als u iets selecteert in het vervolgkeuzemenu, terwijl de tweede lijn "achtergrondkleur" de kleur is waarnaar de menuknop zal veranderen. Idealiter zouden beide kleuren lichter moeten zijn dan toen ze niet waren geselecteerd:

8. 

   Sluit de CSS-sectie. Voer de volgende code in om aan te geven dat u klaar bent met het CSS-gedeelte van het document:

9. 

   Maak een naam voor de menuknop. Voer de volgende code in, maar vergeet niet "Naam" te vervangen door de naam van de vervolgkeuzemenuknop (bijvoorbeeld: Menu):

10. 

    Voeg links toe aan het menu. Elk item in het vervolgkeuzemenu zal naar iets linken, of het nu een pagina op de huidige website is of een externe website. Voeg uw selectie toe aan het vervolgkeuzemenu door de volgende code in te voeren, die u moet vervangen https://www.website.com met het linkadres (laat de haakjes staan) en vervang "Naam" door de linknaam.

11. 

    Sluit document. Voer de volgende tags in om het document te sluiten en specificeer het einde van de code in het vervolgkeuzemenu:

12. 

    Beoordelingscode specificeert vervolgkeuzemenu. Het fragment ziet er ongeveer zo uit: advertenties

Advies

• Bekijk altijd de code voordat u deze op de website plaatst.
• De bovenstaande instructies zijn voor vervolgkeuzemenu's die werken als u de muisaanwijzer over de menuknop beweegt. Als u een vervolgkeuzemenu wilt maken dat alleen klikt wanneer u klikt, heeft u JavaScript nodig.

Waarschuwing

• De HTML-kleur is vrij beperkt als we tags gebruiken zoals "zwart" of "groen". U kunt de HTML-kleurcodegenerator bekijken waarmee gebruikers hier aangepaste kleuren kunnen maken en gebruiken.