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.

Släpp ner CSS -menyer börjar med ID -väljaren.Denna väljare ser ut som #35;.Det följs av ID: s namn.Du kan namnge ID vad som helst, men det ska vara beskrivande så att andra kan läsa din kod.Till exempel kan en rullgardinsmeny använda koden #35; 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:

#35; Drop1 Li.Top #123; Font-Family #58;Verdana, Genève, San-Serif #59;
Font-Size #58;100%#59;
Färg #58;#35; FF00FF #59; #125;

Därefter skapar du 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ägg av orden Display #58; 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 #58;

#35; Drop1 Ul.Link #123;
Display #58; Ingen#59
Font-Family #58;Verdana, Genève, San-Serif #59;
Font-Size #58;100%#59;
Färg #58;#35; FF00FF #59; #125;

Du vill ha rullgardinsmenyn 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 #58;

#35; drop1 #123; position #58; absolut #59; #125;

Det är allt som behövs för CSS -delen av drop -downmeny.Resten av rullgardinsmenyn CSS skapas i HTML -dokumentet med hjälp av DIV, ID, klass, LI och UL -element.DIV -taggen skiljer menydelen av dokumentet.Typ #60; div id ' drop1 #62;Så här skapar du rullgardinsmenyn.Starta sedan den oordnade listan med HTML UL -elementet.

Lägg till toppklassen i det första listobjektet och länkklassen för resten av artiklarna.HTML -koden ska se ut som:

#60; div id ' drop1 #62;
#60; li class ' Top #62; Top Item #60; #47; Li #62;
#60; Li Class ' Link #62; #60; A HREF '##62; Objekt #60; #47; A #62; #60; #47; Li #62;
#60; Li Class ' Link #62; #60; A HREF '##62; Objekt #60 60; #47; A #62; #60; #47; Li #62;
#60; Li Class ' Link #62; #60; A HREF '##62; Objekt #60; #47; A #62; #60; #47; LI #62;
#60; #47; UL #62;#60; #47; Div #62;

När du öppnar dokumentet i en webbläsare kommer rullgardinsmenyn menyn att visas 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.