Hur man skapar en nedrullningsbar HTML -meny och undermeny

Nedrullningsbara menyer-även kända som "suckerfish" -menyer-använder en kombination av HTML och CSS (Cascading Style Sheets) för struktur och stil. HTML-delen av en rullgardinsmeny består av punktlistor och kapslade punktlistor. När du har utformat menyraden och huvudnavigationslänkarna i CSS, du utformar de kapslade punktlistorna som undermenyer. Med ":svävar" -väljaren i CSS kan du ändra en dold undermenys visningsegenskap till "blockera" så att den visas igen.

Steg 1

Koda din meny i HTML med hjälp av "

"och"
• "taggar:
  • Länk 1
  • Länk 2
  • Länk 3
  Lägg till en clear-fix div innan listans slut. Du kommer att lägga till en stil i klassen "clearfix" för att få menyens bakgrund att sträcka sig ner.

  Steg 2

  Lägg till din undermeny som en ny oordnad lista kapslad i dess överordnade länk "

• "taggar:
  • Länk 1
  • Länk 2
    • Länk 1
    • Länk 2
    • Länk 3
    • Länk 3

    Steg 3

    Öppna ditt stilark, och stil din meny med CSS. Ta bort både kulorna och vänster-indrag:#meny {list-style:none; vaddering:0; } Observera att "#meny" matchar ID -namnet på exempel HTML -koden.

    Steg 4

    Lägg till en bakgrundsfärg i menyraden:#meny {list-style:none; vaddering:0; bakgrundsfärg:mörkblå; }

    Steg 5

    Flytta menyalternativen till vänster så att de står horisontellt i menyraden:#meny li {float:left; }

    Steg 6

    Style länkarna som utgör dina menyalternativ. Lägg till vaddering till länkarna för att rada upp dem vertikalt i menyraden samtidigt som de blir enklare att klicka på och sväva över. Du måste ändra egenskapen "display" till "blockera" för att lägga till stoppning i länkar:#menu li a {display:block; vaddering:8px 15px; text-align:center; färg vit; font-weight:fet; text-dekoration:ingen; } Observera att i "vaddering, "två värden har ställts in. Det första värdet är vertikal stoppning medan det andra påverkar horisontell stoppning.

    Steg 7

    Style undermenyn och dess objekt. Du måste först placera undermenyn. Ta bort kulorna och vadderingen också från undermenyerna:#meny ul {position:absolut; liststil:ingen; vaddering:0; }

    Steg 8

    Ta bort de vänstra flottörerna från objekten i undermenyerna:#meny ul li {clear:left; }

    Steg 9

    Lägg till "dsiplay:none" till "#meny ul" -regeln för att stänga av undermenyn, eftersom du inte vill att den ska visas om inte användaren för musen över sitt överordnade objekt. Få menyn att visas igen med den här koden:#meny li:sväva ul {dipslay:block; }

    Lägg till "clear fix" -regeln till din div:.clearfix {clear:both; }

    Tips

    • Lägg till markeringar i dina menyalternativ när användaren för muspekaren över dem. En stilregel för att ändra bakgrundsfärgen för en länkad länk ser ut som "#meny a:sväva {}".
    • När du har byggt din meny med HTML och CSS, du kan lägga till ett jQuery-plugin för att göra fina animationer för listrutorna.
    
    URL:https://sv.whycomputer.com/programvara/1014007813.html