Med hjälp av kompetent HTML-kod och enkla CSS-regler kan du skapa en popup-meny, komplettera den och ändra den. Genom att använda kaskadtabellerna och markeringsspråkverktygen kan du se till att själva menyn fungerar korrekt i alla webbläsare.
Instruktioner
Steg 1
Håll i grundmenyn först. Skapa en speciell numrerad lista med en undermeny i en textredigerare. Vanligtvis används "Notepad" för dessa ändamål. Undermenyn fungerar som en del av föräldralistan. Till exempel: First ElementFlood ElementFlood Element2Field Element3Field Element4Field Element5
Steg 2
Spara listan i en separat html-fil. Skapa sedan en.css-fil. Ange alla nödvändiga parametrar för formatmallar. Gör detta mycket noggrant, för ett misstag, och popup-menyn visas inte korrekt eller fungerar inte alls.
Steg 3
Ta bort eventuella kulor och stoppning som används i punktlistan. Ställ in menyens bredd med CSS-verktyg: ul -style: none; width: 200px; }
Steg 4
Markera den relativa positionen för alla objekt i listan med ett attribut som heter position: ul li: relativ; }
Steg 5
Ordna sedan undermenyn, vars element kommer att visas från överordnad meny till höger när muspekaren är över objektet: li ul: absolut; vänster: 199px; topp: 0; display: ingen; }
Steg 6
Det vänstra attributet är en pixel mindre än själva menyens bredd. Detta gör att popup-objekt kan placeras korrekt utan att skapa dubbla ramar. Displayattributet används för att dölja undermenyn när sidan öppnas.
Steg 7
Stil länkarna efter behov med lämpliga css-alternativ. Inkludera parametern display: block så att länkarna tar upp allt utrymme som är reserverat för dem. För att få menyn att visas när muspekaren svävar över den, ange följande kod: li: sväva ul: blockera; }
Steg 8
Ställ in ytterligare alternativ för att visa listobjekt och länkar efter önskemål. Inkludera ett attribut i.html-filen. Pop-up-menyn är redo att användas.
