Hur skapar jag rullgardinsmenyer?
Cascading Style Sheets (CSS) är ett namn som används för att beskriva hur ett Hyper Text Markup Language (HTML) eller Extensible Markup Language (XML) -dokument är formaterat. Det kan användas för alla typer av XML -dokument, men det används oftast med webbsidor skrivna i HTML. CSS kan användas för att skapa rullgardinsmenyer på webbsidor. Släpp CSS -menyer har en enda textobjekt som visas tills besökaren använder musen för att sväva över menyn, vid vilken tidpunkt hela listan med objekt visas. Menyn skapas med hjälp av CSS -identifiering och klasstaggar.
rullgardinsmenyer Start med ID -väljaren. Denna väljare ser ut som #. Det följs av ID: s namn. Du kan namnge ID något, men det ska vara beskrivande så att andra kan läsa din kod. Till exempel kan en rullgardinsmeny använda koden #drop1.
Skapa klassen för det första objektet i rullgardinsmenyn CSS med hjälp av klassväljaren, som ser ut som en period. Klassen kommer att vara en del av HTML -listelementet. Listelementet betecknas av karaktärerna "Li." Skapa klassen på toppnivå genom att skriva "Li.Top." Klassbeskrivningen finns mellan två lockiga hängslen.
Följande exempel visar hela CSS -koden för det första objektet i listan:
#drop1 li.top {font-family: Verdana, Genève, San-Serif;
Fontstorlek: 100%;
Färg: #ff00ff;}
Skapa sedan en klass för de objekt som kommer att gömma under det första objektet i CSS -menyn. Klassen kommer att beskriva HTML -oordnad lista, som är avsedd med karaktärerna "UL." Beskrivningen kommer att se väsentligen densamma som menyalternativet på toppnivå, med tillägget av orden "Display: Ingen#59" i början av beskrivningen. Detta indikerar att artiklarna i den oordnade listan kommer att döljas tills pekaren svävar över rullgardinsmenyn CSS.
Följandeär ett exempel på denna del av CSS -koden:
#drop1 ul.link {
Display: Ingen#59
Font-familj: Verdana, Genève, San-serif;
Fontstorlek: 100%;
Färg: #ff00ff;}
Du vill ha rullgardinsmenyn CSS för att visas över resten av HMTL -dokumentet. Annars, när besökaren svävar över menyn, kommer den att trycka resten av dokumentet ner på sidan för att ge plats för listan. Att ställa in positionselementet till absolut, kommer att göra detta.
Koden för att ställa in positionen är:
#drop1 {position: absolut;}
Det är allt som behövs för CSS -delen av rullgardinsmenyn. Resten av rullgardinsmenyn CSS skapas i HTML -dokumentet med hjälp av "DIV", "ID", "klass" "Li" och "UL" -element. "Div" -taggen skiljer menydelen i dokumentet. Typ
Lägg till toppklassen i den första listobjektet och länkklassen för resten av artiklarna. HTML -koden ska se ut som:
När du öppnar dokumentet i en webbläsare visas rullgardinsmenyn menyn som ett enda objekt på sidan. När du flyttar musen över toppobjektet visas resten av menyn. Resten av texten på sidan rör sig inte, men en del kommer att döljas av menyn.