Hvordan opretter jeg drop -down CSS -menuer?
Cascading Style Sheets (CSS) er et navn, der bruges til at beskrive den måde, et hypertekstmarkup -sprog (HTML) eller Extensible Markup Language (XML) -dokument er formateret. Det kan bruges til enhver type XML -dokument, men det bruges oftest med websider skrevet i HTML. CSS kan bruges til at oprette drop -down -menuer på websider. Drop down CSS -menuer har en enkelt tekstelement vist, indtil den besøgende bruger musen til at svæve over menuen, på hvilket tidspunkt hele listen over varer vises. Menuen oprettes ved hjælp af CSS -identifikation og klassemærker.
Drop Down CSS -menuer starter med ID -vælgeren. Denne vælger ligner #. Det efterfølges af navnet på ID. Du kan navngive ID noget, 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 ved hjælp af klassevælgeren, der ligner en periode. Klassen vil være en del af HTML -listeelementet. Listeelementet er udpeget af tegnene "Li." Opret klassen på øverste niveau ved at skrive "Li.top." Klassebeskrivelsen er indeholdt mellem to krøllede seler.
Følgende eksempel viser hele CSS -koden for det første element på listen:
#drop1 li.top {font-familie: Verdana, Genève, San-Serif;
Fontstørrelse: 100%;
Farve: #ff00ff;}
Opret derefter en klasse til de ting, der vil blive skjult under det første emne i CSS -menuen. Klassen vil beskrive HTML -uordnet liste, der er udpeget med karaktererne "Ul." Beskrivelsen ser i det væsentlige den samme som det øverste menupunkt med topniveau med tilføjelsen af ordene "Display: Ingen#59" i begyndelsen af beskrivelsen. Dette indikerer, at elementerne på den uordnede liste vil være skjult, indtil markøren svæver over rullemenuen CSS.
Følgendeer et eksempel på denne del af CSS -koden:
#drop1 ul.link {
Display: Ingen#59
Fontfamilie: Verdana, Genève, San-Serif;
Fontstørrelse: 100%;
Farve: #ff00ff;}
Du vil gerne have, at rullemenuen 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. Indstilling af positionselementet til absolut, vil gøre dette.
Koden for at indstille positionen er:
#drop1 {position: absolut;}
Det er alt, hvad der er nødvendigt for CSS -delen af rullemenuen. Resten af rullemenuen CSS er oprettet i HTML -dokumentet ved hjælp af "DIV", "ID", "Klassen" "Li" og "UL" -elementer. "DIV" -mærket adskiller menudelen af dokumentet. Type
Tilføj topklassen til den første listeelement, og linkklassen for resten af varerne. HTML -koden skal ligne:
Når du åbner dokumentet i en webbrowser, vises rullemenuen CSS som et enkelt element på siden. Når du flytter musen over det øverste emne, vises resten af menuen. Resten af teksten på siden bevæger sig ikke, men en del vil blive skjult af menuen.