Hur Man Gör En Rullgardinsmeny

Innehållsförteckning:

Hur Man Gör En Rullgardinsmeny
Hur Man Gör En Rullgardinsmeny

Video: Hur Man Gör En Rullgardinsmeny

Video: Hur Man Gör En Rullgardinsmeny
Video: DIY - Hemlig bokförvaring 2024, November
Anonim

En av de viktigaste aspekterna inom utveckling av programvara och webbplatser är att skapa menyer. Microsoft och dess mest kända hjärnbarn, Windows-operativsystemet, bör tas som ett utmärkt exempel. Trots det faktum att denna produkt används av den överväldigande majoriteten av PC-användare i världen, minskar inte bara kritiken utan växer ständigt. I grund och botten gäller det besväret med placeringen av menyalternativen. Följande är en beskrivning av hur man skapar menyer i CSS och Expression Web.

Hur man gör en rullgardinsmeny
Hur man gör en rullgardinsmeny

Instruktioner

Steg 1

För att börja skapa en horisontell meny, gå till Hantera stil och klicka sedan på knappen Ny stil. Namnge den nya stilen Selector ul li. Viktig! Se till att den genererade filen har drop-down.css-tillägget. För att skapa en horisontell meny, ange för det skapade elementet att det kommer att vara exakt horisontellt. Därefter bestämmer du bredden på varje menyalternativ och tar bort alla onödiga punkter som placeras framför alla objekt i listan.

Steg 2

Gå till alternativet Layout, ställ in Display-attributet till Inline för att göra horisontell justering. Ställ sedan in Vänster-värdet till attributet Float och klicka på knappen Apply. Ställ in alla listobjekt på en rad. Så att de placeras snyggt och inte kryper ovanpå varandra, i attributet Bredd, ställ in positionsvärdet till 150 px. Kontrollera att alla element i listan har samma storlek. Ta sedan bort prickarna framför alla element - för detta, gå till attributet List och ställ in parametern Ingen i objektet List Style-typ. Klicka på OK för att alla ändringar ska accepteras och tillämpas.

Steg 3

Justera teckenstorlek och stil för ul li. För att göra detta, gå till Manage Styles och högerklicka på ul li, välj sedan Modify Style. Den välbekanta dialogrutan visas. Gå till teckensnitt, välj attributet Font-family och ställ in det till Sans-serif, Arial, Helvetica. Justera sedan teckensnittsstorleken genom att ställa in den på 0, 9. Därefter ställer du in attributet Text-transform till versaler. Justera höjden på menyalternativen i attributet Höjd - Position och ställ in värdet till 30 px.

Steg 4

När du har slutfört alla korrigerande åtgärder sparar du filen som menu.html. Testa sedan den skapade menyn i olika webbläsare för att se till att den fungerar korrekt. Som du kan se är designen av den horisontella menyn ganska enkel.

Rekommenderad: