Hvordan lager jeg rullegardinmenyer CSS -menyer?

Cascading Style Sheets (CSS) er et navn som brukes for å beskrive måten et hypertekstmarkeringsspråk (HTML) eller Extensible Markup Language (XML) dokumentet er formatert. Det kan brukes til alle typer XML -dokumenter, men det brukes ofte med websider skrevet i HTML. CSS kan brukes til å lage rullegardinmenyer på websider. Drop ned CSS -menyer har et enkelt tekstelement som vises til den besøkende bruker musen for å sveve over menyen, på hvilket tidspunkt hele listen over elementer vises. Menyen er opprettet ved hjelp av CSS -identifikasjon og klassemerker.

Drop ned CSS -menyer starter med ID -velgeren. Denne velgeren ser ut som #. Det blir fulgt av navnet på ID. Du kan navngi IDen hva som helst, men den skal være beskrivende slik at andre kan lese koden din. For eksempel kan en rullegardinmeny bruke koden #drop1.

Opprett klassen for det første elementet i rullegardinmenyen CSS -menyen ved å bruke klasselektoren, som ser ut som en periode. Klassen vil være en del av HTML -listeelementet. Listeelementet er utpekt av karakterene "Li." Lag toppnivåklassen ved å skrive "li.top." Klassebeskrivelsen er inneholdt mellom to krøllete seler.

Følgende eksempel viser hele CSS -koden for det første elementet på listen:

#drop1 li.top {font-family: Verdana, Geneva, San-serif;
Fontstørrelse: 100%;
Farge: #ff00ff;}

Neste, lag en klasse for varene som vil være skjult under det første elementet i CSS -menyen. Klassen vil beskrive HTML uordnede liste, som er utpekt med karakterene "UL." Beskrivelsen vil se i hovedsak den samme ut som menyelementet på toppnivå, med tillegg av ordene "Display: Ingen#59" i begynnelsen av beskrivelsen. Dette indikerer at elementene i den uordnede listen vil være skjult til pekeren henger over rullegardinmenyen CSS -menyen.

Følgendeer et eksempel på denne delen av CSS -koden:

#drop1 ul.link {
Display: Ingen#59
Font-Family: Verdana, Genève, San-serif;
Fontstørrelse: 100%;
Farge: #ff00ff;}

Du vil at CSS -menyen vises over resten av HMTL -dokumentet. Ellers, når den besøkende henger over menyen, vil den skyve resten av dokumentet nedover siden for å gi plass til listen. Å sette posisjonselementet til absolutt, vil gjøre dette.

Koden for å angi stillingen er:

#drop1 {posisjon: absolutte;}

Det er alt som trengs for CSS -delen av rullegardinmenyen. Resten av rullegardinmenyen CSS -menyen opprettes i HTML -dokumentet ved hjelp av "Div", "ID", "klasse", "Li" og "UL" -elementer. "Div" -merket skiller menydelen av dokumentet. Skriv inn

for å opprette rullegardinmeny -delen. Start deretter den uordnede listen ved å bruke HTML "UL" Element.

Legg toppklassen til den første listeelementet, og koblingsklassen for resten av varene. HTML -koden skal se ut som:

Når du åpner dokumentet i en nettleser, vil rullegardinmenyen CSS -menyen vises som et enkelt element på siden. Når du flytter musen over det øverste elementet, vises resten av menyen. Resten av teksten på siden vil ikke bevege seg, men en del vil bli skjult av menyen.

ANDRE SPRÅK