Med hjälp av bra HTML-kod och enkla CSS-regler kan du skapa en fin popup-meny som lätt kan modifieras och kompletteras. Genom att använda markeringsspråk och Cascading Style Sheets kan du se till att menyerna fungerar korrekt i alla webbläsare.
Instruktioner
Steg 1
Bygg först din menys grundstruktur. Öppna en textredigerare och skapa en numrerad lista med en undermeny som fungerar som ett överordnat listobjekt. Till exempel:
-
Första elementet
- Listruta
- Listruta2
Steg 2
Spara den genererade listan i en separat html-fil. Skapa sedan en fil med ett.css-tillägg och ange alla parametrar för stilark.
Steg 3
Ta bort vaddering och kulor som gäller i punktlistan och ställ in menybredden med CSS-verktyg: ul {list-style: none;
bredd: 200px; }
Steg 4
Ställ in den relativa positionen för alla objekt i listan med hjälp av attributet position: ul li {position: relativ; }
Steg 5
Därefter måste du designa en undermeny, var och en av elementen kommer att visas till höger om överordnad meny när muspekaren är på objektet: li ul {position: absolut;
vänster: 199 pixlar;
topp: 0;
display: ingen; } Det vänstra attributet är en pixel mindre än själva menyens bredd. Detta gör att popup-objekt kan placeras intelligent utan att skapa dubbla gränser. Displayattributet används för att dölja undermenyn när sidan öppnas.
Steg 6
Stil länkarna efter önskemål med lämpliga css-alternativ. Inkludera parametern display: block så att varje länk tar upp allt utrymme den har reserverat för den.
Steg 7
För att få menyn att visas när markören är över den (sväva) måste du ange koden: li: sväva ul {display: block; }
Steg 8
Ställ in ytterligare alternativ för att visa länkar och listobjekt efter önskemål.
Steg 9
Pop-up-menyn är klar. Nu återstår det att inkludera attributet i.html-filen: popup-meny
