Hoe maak ik drop-down CSS-menu's?
Cascading Style Sheets (CSS) is een naam die wordt gebruikt om de manier te beschrijven waarop een Hyper Text Markup Language (HTML) of Extensible Markup Language (XML) document wordt opgemaakt. Het kan worden gebruikt voor elk type XML-document, maar het wordt meestal gebruikt met webpagina's die in HTML zijn geschreven. CSS kan worden gebruikt om vervolgkeuzemenu's op webpagina's te maken. Vervolgkeuzelijsten CSS-menu's hebben een enkel tekstitem weergegeven totdat de bezoeker de muis gebruikt om over het menu te bewegen, waarna de volledige lijst met items wordt weergegeven. Het menu wordt gemaakt met behulp van de CSS-identificatie en klassetags.
Vervolgkeuzelijsten CSS-menu's beginnen met de ID-selector. Deze selector ziet eruit als #. Het wordt gevolgd door de naam van het ID. U kunt de ID een willekeurige naam geven, maar deze moet beschrijvend zijn zodat anderen uw code kunnen lezen. Een vervolgkeuzemenu kan bijvoorbeeld de code # drop1 gebruiken.
Maak de klasse voor het eerste item in het vervolgkeuzemenu CSS met behulp van de klassenkiezer, die eruit ziet als een punt. De klasse maakt deel uit van het HTML-lijstelement. Het lijstelement wordt aangeduid met de tekens "li". Maak de hoogste klasse door "li.top" te typen. De klassenbeschrijving staat tussen twee accolades.
Het volgende voorbeeld toont de volledige CSS-code voor het eerste item in de lijst:
# drop1 li.top {font-family: Verdana, Geneva, san-serif;
lettergrootte: 100%;
kleur: # FF00FF;}
Maak vervolgens een klasse voor de items die worden verborgen onder het eerste item in het CSS-menu. De klasse beschrijft de HTML ongeordende lijst, die wordt aangeduid met de tekens "ul." De beschrijving ziet er in wezen hetzelfde uit als het menu-item op het hoogste niveau, met de toevoeging van de woorden "display: none # 59" aan het begin van de beschrijving. Dit geeft aan dat de items in de ongeordende lijst worden verborgen totdat de aanwijzer boven het vervolgkeuzemenu CSS zweeft.
Het volgende is een voorbeeld van dit gedeelte van de CSS-code:
# drop1 ul.link {
display: none # 59
lettertype-familie: Verdana, Genève, san-serif;
lettergrootte: 100%;
kleur: # FF00FF;}
U wilt dat het vervolgkeuzemenu CSS boven de rest van het HMTL-document verschijnt. Anders zal de bezoeker, wanneer hij boven het menu zweeft, de rest van het document naar beneden duwen om ruimte te maken voor de lijst. Het positioneren van het positie-element op absoluut zal dit doen.
De code om de positie in te stellen is:
# DROP1 {position: absolute;}
Dat is alles dat nodig is voor het CSS-gedeelte van het vervolgkeuzemenu. De rest van het vervolgkeuzemenu CSS-menu wordt gemaakt in het HTML-document met behulp van de elementen "div", "id", "class", "li" en "ul". De tag "div" scheidt het menugedeelte van het document. Typ <div id = "drop1"> om het vervolgkeuzemenu te maken. Start vervolgens de ongeordende lijst met het HTML-element "ul".
Voeg de topklasse toe aan het eerste lijstitem en de koppelingsklasse voor de rest van de items. De HTML-code moet er ongeveer hetzelfde uitzien als:
<div id = "drop1">
<li class = "top"> Topitem </li>
<li class = "link"> <a href="#"> Item </a> </li>
<li class = "link"> <a href="#"> Item </a> </li>
<li class = "link"> <a href="#"> Item </a> </li>
</ul> </div>
Wanneer u het document in een webbrowser opent, verschijnt het vervolgkeuzemenu CSS als één item op de pagina. Wanneer u uw muis over het bovenste item beweegt, verschijnt de rest van het menu. De rest van de tekst op de pagina wordt niet verplaatst, maar een gedeelte wordt verborgen door het menu.