Hur skapar jag rullgardinsmenyer i CSS?
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 formateras. Det kan användas för alla typer av XML-dokument, men det används oftast på webbsidor skrivna i HTML. CSS kan användas för att skapa rullgardinsmenyer på webbsidor. I rullgardinsmenyerna i CSS visas ett enda textobjekt tills besökaren använder musen för att föra muspekaren över menyn, då hela listan med objekt visas. Menyn skapas med CSS-identifiering och klasstaggar.
Rulla ner CSS-menyer börjar med ID-väljaren. Den här väljaren ser ut som #. Det följs av namnet på ID. Du kan namnge ID: n vad som helst, men det bör 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 klassväljaren, som ser ut som en period. Klassen kommer att ingå i HTML-listelementet. Listelementet betecknas med tecknen "li." Skapa toppnivån 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;
typstorlek: 100%;
färg: # FF00FF;}
Skapa sedan en klass för de objekt som kommer att vara dolda under det första objektet i CSS-menyn. Klassen kommer att beskriva den oordnade HTML-listan, som är betecknad med tecknen "ul." Beskrivningen kommer att se väsentligen densamma ut som menyalternativet på översta nivån, med orden "display: ingen # 59" i början av beskrivningen. Detta indikerar att objekten 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: none # 59
fontfamilj: Verdana, Genève, san-serif;
typstorlek: 100%;
färg: # FF00FF;}
Du vill att rullgardinsmenyn CSS ska visas över resten av HMTL-dokumentet. Annars, när besökaren svävar över menyn, kommer den att skjuta resten av dokumentet ner på sidan för att göra plats för listan. Att ställa in positionselementet till absolut, gör detta.
Koden för att ställa in positionen är:
# Drop1 {position: absolute;}
Det är allt som behövs för CSS-delen på rullgardinsmenyn. Resten av den nedrullningsbara CSS-menyn skapas i HTML-dokumentet med elementen "div", "id", "", "" li "och" ul ". Taggen "div" separerar dokumentets menydel. Skriv <div id = "drop1"> för att skapa 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:
<div id = "drop1">
<li class = "top"> Toppartikel </li>
<li class = "link"> <a href="#"> Objekt </a> </li>
<li class = "link"> <a href="#"> Objekt </a> </li>
<li class = "link"> <a href="#"> Objekt </a> </li>
</ul> </div>
När du öppnar dokumentet i en webbläsare visas rullgardinsmenyn CSS som ett enda objekt på sidan. När du flyttar musen över det översta objektet visas resten av menyn. Resten av texten på sidan kommer inte att röra sig, men en del döljs av menyn.