Datorer, Programvara
Så här gör du en rullgardinsmeny med CSS
Idag kommer vi att överväga frågan "Hur man skapar en rullgardinsmeny med CSS?". Det bör omedelbart sägas att detta element kommer att göras utan att några ytterligare medel ansluts. Det vill säga att menyn kommer att skapas endast med CSS och HTML.
Framställning av
För att förstå vad som händer i artikeln behöver du åtminstone lite bekantskap med det teoretiska materialet. Men om du är bekant med pseudoklasser kan du hoppa över den här paragrafen. Så, för att skapa en vertikal CSS-rullgardinsmeny, behöver vi ett element som ": sväva". En pseudoklass ": svävar" kan tilldelas någon HTML-tagg. Det låter dig bestämma när en muspekare pekar på ett objekt. Till exempel tilldelade vi en egenskap: "a: svävar {färg: röd;}". Denna post betyder att när du svävar över en tagg blir dess innehåll röd. Det är värt att notera att den här pseudoklassen fortfarande betyder ett oaktiverat objekt. Förresten, ": svävar" har liknande liknande element. Men det är med hjälp av denna pseudoklass att vi kommer att skapa en nedrullningsbar CSS-meny.
instruktion
Först och främst är det värt att förstå vad rullgardinsmenyn är. Enligt denna definition finns det många olika metoder för att konstruera olika mock-ups. I det här fallet kommer vi att demontera konstruktionen som består av flera ständigt synliga föremål och flera ytterligare (dolda) sådana. Låt oss avsluta med teorin och gå ner för att träna.
- Skapa en layout på vår meny. För att göra detta gör vi HTML-uppteckningen. Skapa en kapslad lista:
- / Ul>. Det här borde se ut som din rullgardinsmeny. CSS kommer att komma till handling lite senare. I detta fall består huvudlistan av tre huvudartiklar och två kapslingar.
- Dölj tilläggsmenyn. För att göra detta använder vi stilark, definierar följande egenskap: ul ul {display: none;} Detta tar bort elementen i den andra listan från skärmen.
- Skapa en meny i CSS, och släppa bort från huvudlistan. I cascading style sheets skriver vi följande regel: ul li: hover ul {display: block;}. Denna post betyder att när du sveper musen över li-elementet som finns i ul-listan visas ul (nestad) på skärmen. Vid första anblicken kan ett sådant system tyckas för komplicerat och förvirrande. Men i själva verket är allt väldigt enkelt.
- Använd denna layout själv och sätt in ditt innehåll mellan
- taggarna. Du kan ändra antalet objekt i listan.
Dekorativa förändringar
Så snart huvudmenyns layout är klar kan du fortsätta med sin design. Förmodligen vill många först och främst bli av med markörerna, som betecknar elementet i listan. Detta görs med en enda CSS-egenskap, nämligen list-stil-typ. Du måste lägga till den här posten: li {list-style-type: none;}. Därefter kan du infoga en ram och skapa en bakgrund. Gränsen och bakgrundsegenskaperna hjälper dig. Kanske, vissa gillar inte att rullgardinsmenyn visas som en extra lista, samtidigt som huvudelementen expanderas. För att fixa det kan du placera det. För att göra detta skriver du följande post i de cascading stilarken: ul ul {position: absolute; Vänster: 15px; Höger: 15px; Överst: 15px; Botten: 15px;}. Naturligtvis kommer värdena du använder din egen. Beroende på var du vill se rullgardinsmenyn, kommer CSS att erbjuda många fler egenskaper som kan lägga till olika effekter och dekorera våra listor.
slutsats
Återigen är det värt att notera utformningen av menylayouten. För att tilldela CSS-regler i det här fallet använder du kapslade värden, till exempel ul ul. Om du har andra liknande mönster i dokumentet kan det finnas stora problem. I dessa situationer måste du använda en mer specifikt syfte, till exempel väljare eller id-identifierare. Layouten i rullgardinsmenyn som visas i artikeln är avsedd för bekantskap med den allmänna designen. Resten av arbetet ligger på axlarna.
Similar articles
Trending Now