Hoe maak ik dropdown CSS menu's?

Cascading Style Sheets (CSS) is een naam die wordt gebruikt om de manier waarop een Hyper Text Markup Language (HTML) of Extensible Markup Language (XML) document is opgemaakt beschrijven. Het kan worden gebruikt voor elk type XML-document, maar wordt meestal gebruikt met webpagina's geschreven in HTML. CSS kan worden gebruikt om drop-down menu's op webpagina's te maken. Drop-down CSS menu's hebben een enkele tekst voorwerp getoond totdat de bezoeker maakt gebruik van de muis om te zweven over het menu, op welk punt de volledige lijst met items wordt weergegeven. Het menu wordt gemaakt met behulp van de CSS-identificatie en klasse-tags.

Drop-down CSS menu's beginnen met de ID-selector. Deze selector ziet eruit als #. Dit wordt gevolgd door de naam van de ID. U kunt de ID iets te noemen, maar het moet beschrijvend zijn, zodat anderen uw code kunt lezen. Zo kan bijvoorbeeld een drop-down menu de code # DROP1 gebruiken.

Maak de klasse voor het eerste item in de drop down CSS-menu met behulp van de class selector, die eruit ziet als een periode. De klasse zal deel uitmaken van de HTML-lijst element. De lijst element wordt door de personages aangewezen "li." Maak het hoogste niveau klasse door te typen "li.top." De beschrijving van de klasse is opgenomen 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;
font-size: 100%;
color: # FF00FF;}

Vervolgens maakt u een klasse voor de items die onder het eerste item in de CSS-menu zal worden verborgen. De klasse zal de HTML-geordende lijst, die wordt aangeduid met de personages te beschrijven "ul." De beschrijving zal in wezen hetzelfde uitzien als de top-level menu-item, 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 zal worden verborgen totdat de aanwijzer op het drop-down menu CSS zweeft.

Het volgende is een voorbeeld van dit deel van de CSS-code:

# DROP1 ul.link {
display: none # 59
font-family: Verdana, Geneva, san-serif;
font-size: 100%;
color: # FF00FF;}

U wilt de drop down CSS menu te verschijnen over de rest van de HMTL document. Anders, wanneer de bezoeker over het menu zweeft, zal de rest van het document duw de pagina om ruimte voor de lijst te maken. De positie element instellen naar absolute, zal dit doen.

De code om de positie in te stellen is:

# DROP1 {position: absolute;}

Dat is alles wat nodig is voor de CSS-gedeelte van het drop down menu. De rest van het drop down menu CSS wordt gemaakt in de HTML-document met behulp van de "div", "id", "class", "li" en "ul" elementen. De "div" tag scheidt het menu deel van het document. Typ <div id = "DROP1"> om het drop down menu gedeelte te creƫren. Dan beginnen de ongeordende lijst met behulp van de HTML "ul" element.

Voeg de top klasse de eerste lijst item en de koppeling klasse voor de rest van de items. De HTML-code moet er ongeveer zo uitzien:

<Div id = "DROP1">
<Li class = "top"> Top Item </ 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 te openen, zal de drop down CSS menu verschijnen als een enkel item op de pagina. Wanneer u met de muis over het bovenste item, zal de rest van het menu verschijnen. De rest van de tekst op de pagina zal niet bewegen, maar een deel zal worden verborgen door in het menu.