Hvordan lager jeg nedtrekks CSS-menyer?

Cascading Style Sheets (CSS) er et navn som brukes til å beskrive hvordan et Hyper Text Markup Language (HTML) eller Extensible Markup Language (XML) dokument 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. Nedtrekks CSS-menyer har et enkelt tekstelement vist til besøkende bruker musen til å holde musepekeren over menyen, hvor hele listen med elementer vises. Menyen opprettes ved hjelp av CSS-identifikasjons- og klassetagger.

Slipp ned CSS-menyer som starter med ID-velgeren. Denne velgeren ser ut som #. Det blir fulgt av navnet på IDen. 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.

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

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

# drop1 li.top {font-family: Verdana, Geneva, san-serif;
skriftstørrelse: 100%;
farge: # FF00FF;}

Deretter lager du en klasse for elementene som vil være skjult under det første elementet i CSS-menyen. Klassen vil beskrive den uordnede listen over HTML, som er betegnet med tegnene "ul." Beskrivelsen vil i det vesentlige se den samme ut som det øverste menyelementet, med tillegg til ordene "display: none # 59" i begynnelsen av beskrivelsen. Dette indikerer at elementene i den uordnede listen vil være skjult til pekeren henger over rullegardinmenyen CSS.

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

# drop1 ul.link {
display: none # 59
font-familie: Verdana, Genève, san-serif;
skriftstørrelse: 100%;
farge: # FF00FF;}

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

Koden for å stille posisjonen er:

# Drop1 {stilling: absolutt;}

Det er alt som trengs for CSS-delen av rullegardinmenyen. Resten av rullegardinmenyen CSS opprettes i HTML-dokumentet ved å bruke elementene "div", "id", "", "" li "og" ul ". Merket "div" skiller menydelen av dokumentet. Skriv <div id = "drop1"> for å opprette rullegardinmenydelen. Start deretter den uordnede listen ved å bruke HTML-ul-elementet.

Legg til toppklassen i det første listeelementet, og lenkklassen for resten av elementene. HTML-koden skal se ut som:

<div id = "drop1">
<li class = "top"> Topp vare </li>
<li class = "link"> <a href="#"> Vare </a> </li>
<li class = "link"> <a href="#"> Vare </a> </li>
<li class = "link"> <a href="#"> Vare </a> </li>
</ul> </div>

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