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 hypertekstmarkup -taal (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 geschreven in HTML.CSS kan worden gebruikt om vervolgkeuzemenu's op webpagina's te maken.Drop -down CSS -menu's hebben een enkel tekstitem getoond totdat de bezoeker de muis gebruikt om over het menu te zweven, waarna de hele lijst met items wordt weergegeven.Het menu wordt gemaakt met behulp van de CSS -identificatie- en klassentags.

Drop -down CSS -menu's beginnen met de ID -selector.Deze selector ziet eruit als #35;.Het wordt gevolgd door de naam van de ID.U kunt de ID alles noemen, maar het moet beschrijvend zijn zodat anderen uw code kunnen lezen.Een vervolgkeuzemenu kan bijvoorbeeld de code #35; Drop1 gebruiken.

Maak de klasse voor het eerste item in het vervolgkeuzelse CSS -menu met behulp van de klassenselector, die eruit ziet als een periode.De klasse zal deel uitmaken van het HTML -lijst -element.Het lijstelement wordt aangewezen door de tekens Li.Maak de klasse op het hoogste niveau door Li.Top te typen.De klassenbeschrijving bevindt zich tussen twee krullende beugels.

Het volgende voorbeeld toont de volledige CSS-code voor het eerste item in de lijst:

#35; drop1 li.top #123; font-family #58;Verdana, Geneva, San-Serif #59;
Font-size #58;100%#59;
Kleur #58;#35; ff00ff #59; #125;

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 is 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 weergeven #58; Geen#59 aan het begin van de beschrijving.Dit geeft aan dat de items in de niet -geordende lijst worden verborgen totdat de aanwijzer over het vervolgkeuzemenu -menu zweeft.

Het volgende is een voorbeeld van dit gedeelte van de CSS-code #58;

#35; drop1 ul.link #123;
display #58; geen#59
font-family #58;Verdana, Geneva, San-Serif #59;
Font-size #58;100%#59;
Kleur #58;#35; FF00FF #59; #125;

U wilt dat het vervolgkeuzelse CSS -menu verschijnt over de rest van het HMTL -document.Anders, wanneer de bezoeker over het menu zweeft, duwt deze de rest van het document op de pagina om ruimte te maken voor de lijst.Het positie -element op absoluut instellen, zal dit doen.

De code om de positie in te stellen is #58;

#35; drop1 #123; positie #58; Absolute #59; #125;

Dat is alles wat nodig is voor het CSS -gedeelte van de vervolgkeuzelijstmenu.De rest van het vervolgkeuzelse CSS -menu is gemaakt in het HTML -document met behulp van de div-, ID-, klasse-, Li- en UL -elementen.De DIV -tag scheidt het menugedeelte van het document.Type #60; div id ' drop1 #62;om het vervolgkeuzemenu -gedeelte te maken.Start vervolgens de ongeordende lijst met het HTML UL -element.

Voeg de topklasse toe aan het eerste lijstitem en de link -klasse voor de rest van de items.De HTML -code moet lijken op:

#60; div id ' drop1 #62;
#60; li class ' top #62; topitem #60; #47; li #62;
#60; li class ' link #62; #60; a href '##62; Item #60; #47; a #62; #60; #47; li #62;
#60; li class ' link #62; #60; a href '##62; Item #60; #47; a #62; #60; #47; li #62;
#60; li class ' link #62; #60; a href '##62; Item #60;#47; a #62; #60; #47; li #62;
#60; #47; Ul #62;#60; #47; Div #62;

Wanneer u het document in een webbrowser opent, verschijnt het vervolgkeuzelse CSS -menu als een enkel item op de pagina.Wanneer u uw muis over het bovenste item verplaatst, verschijnt de rest van het menu.De rest van de tekst op de pagina wordt niet verplaatst, maar een deel wordt verborgen door het menu.