A jó HTML-kód és az egyszerű CSS-szabályok segítségével létrehozhat egy szép felugró menüt, amely könnyen módosítható és kiegészíthető. A jelölőnyelv és a lépcsőzetes stíluslapok használatával biztosíthatja, hogy a menük minden böngészőben megfelelően működjenek.
Utasítás
1. lépés
Először készítse el a menü alapstruktúráját. Nyisson meg egy szövegszerkesztőt, és hozzon létre egy számozott listát egy almenüvel, amely szülőlista elemként működik. Például:
-
Első elem
- Legördülő elem
- 2. legördülő menü
2. lépés
A létrehozott listát külön HTML fájlba mentse. Ezután hozzon létre egy.css kiterjesztésű fájlt, és adja meg az összes stíluslap paramétert.
3. lépés
Távolítson el minden felsorolást és felsorolást, amely érvényes a felsoroláslistában, és állítsa be a menü szélességét a CSS eszközök segítségével: ul {list-style: none;
szélesség: 200px; }
4. lépés
Állítsa be a lista összes elemének relatív helyzetét a position attribútum használatával: ul li {position: relatív; }
5. lépés
Ezután meg kell terveznie egy almenüt, amelynek minden eleme megjelenik a szülőmenü jobb oldalán abban a pillanatban, amikor az egérmutató az elemen van: li ul {position: Absolute;
bal: 199px;
felső: 0;
kijelző: nincs; } A bal attribútum egy pixellel kevesebb, mint maga a menü. Ez lehetővé teszi az előugró elemek intelligens elhelyezését kettős szegélyek létrehozása nélkül. A display attribútum az almenü elrejtésére szolgál az oldal megnyitásakor.
6. lépés
Stílusolja a linkeket tetszés szerint a megfelelő css opciókkal. Tartalmazza a display: block paramétert, hogy minden hivatkozás lefoglalja a számára fenntartott helyet.
7. lépés
Ahhoz, hogy a menü akkor jelenjen meg, amikor a kurzor fölött van (lebeg), be kell írnia a kódot: li: hover ul {display: block; }
8. lépés
A linkek és a listaelemek megjelenítéséhez további opciókat állíthat be.
9. lépés
Az előugró menü készen áll. Most már az attribútum felvétele a.html fájlba: Felugró menü
