Hvordan opretter jeg rulleliste CSS-menuer?
Cascading Style Sheets (CSS) er et navn, der bruges til at beskrive, hvordan et Hyper Text Markup Language (HTML) eller XML-dokument (Extensible Markup Language) er formateret. Det kan bruges til enhver type XML-dokument, men det bruges ofte med websider skrevet i HTML. CSS kan bruges til at oprette rullemenuer på websider. I rullemenuer CSS-menuer vises et enkelt tekstelement, indtil besøgende bruger musen til at holde musepekeren over menuen, hvor hele listen over poster vises. Menuen oprettes ved hjælp af CSS-identifikations- og klassetags.
Rul ned CSS-menuer start med ID-vælgeren. Denne vælger ligner #. Det efterfølges af navnet på ID'et. Du kan navngive ID'et hvad som helst, men det skal være beskrivende, så andre kan læse din kode. For eksempel kan en rullemenu bruge koden # drop1.
Opret klassen til det første element i rullemenuen CSS-menuen ved hjælp af klassevælgeren, der ligner en periode. Klassen vil være en del af HTML-listeelementet. Listeelementet er betegnet med tegnene "li." Opret klassen på øverste niveau ved at skrive "li.top." Klassebeskrivelsen findes mellem to krøllede seler.
Følgende eksempel viser hele CSS-koden for det første punkt på listen:
# drop1 li.top {font-family: Verdana, Genève, san-serif;
skriftstørrelse: 100%;
farve: # FF00FF;}
Opret derefter en klasse for de emner, der er skjult under det første element i CSS-menuen. Klassen vil beskrive den uordnede HTML-liste, der er udpeget med tegnene "ul." Beskrivelsen vil i det væsentlige se den samme ud som det øverste menupunkt med tilføjelsen af ordene "display: ingen # 59" i begyndelsen af beskrivelsen. Dette indikerer, at elementerne i den ikke-sorterede liste vil blive skjult, indtil markøren svæver over rullemenuen CSS-menuen.
Følgende er et eksempel på denne del af CSS-koden:
# drop1 ul.link {
display: none # 59
font-familie: Verdana, Genève, san-serif;
skriftstørrelse: 100%;
farve: # FF00FF;}
Du ønsker at rullemenuen CSS skal vises over resten af HMTL-dokumentet. Ellers når den besøgende svæver over menuen, skubber den resten af dokumentet ned på siden for at give plads til listen. Hvis du indstiller positionselementet til absolut, gør du det.
Koden til indstilling af positionen er:
# Drop1 {position: absolut;}
Det er alt, hvad der er nødvendigt for CSS-delen i rullemenuen. Resten af rullelisten CSS-menuen oprettes i HTML-dokumentet ved hjælp af elementerne "div", "id", "", "" li "og" ul ". Mærket "div" adskiller menudelen af dokumentet. Skriv <div id = "drop1"> for at oprette rullemenuen. Start derefter den uordnede liste ved hjælp af HTML "ul" -elementet.
Føj øverste klasse til det første listeelement og linkklassen for resten af elementerne. HTML-koden skal ligne:
<div id = "drop1">
<li class = "top"> Top 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 åbner dokumentet i en webbrowser, vises rullemenuen CSS-menuen som et enkelt element på siden. Når du flytter musen hen over det øverste punkt, vises resten af menuen. Resten af teksten på siden bevæger sig ikke, men en del skjules af menuen.