A legördülő menü nem csak JavaScript-ben hozható létre, hanem szabványos HTML-címkék használatával is. Ez a legördülő menü létrehozásának módja hasznos lesz azok számára, akik még csak most kezdik az első lépéseket a webhelyek létrehozásában, és le akarják egyszerűsíteni az oldalak menüinek létrehozását.
Utasítás
1. lépés
HTML-kódban egy ilyen menü egy rendezetlen lista, amelynek beágyazott listái vannak. A kezdéshez hozzon létre egy style.css fájlt, és másolja oda a következő CSS kódot a menü stílusához és formázásához:
#nav, #nav ul {
list-style: nincs;
margó: 0;
párnázás: 0;
szegély: 1px szilárd # 000;
háttér: # 515151;
balra lebeg;
szélesség: 100%;
}
#nav li {
balra lebeg;
pozíció: rokon;
háttérszín: # 003366;
back / ground: nincs;
}
#nav li ul {
kijelző: nincs;
pozíció: abszolút;
háttérszín: # 003366;
párnázás: 8px 0;
szélesség: 138 képpont;
}
2. lépés
Most hozzá kell adnunk néhány díszítést a menüpontokhoz. Határozza meg a szélességet és a magasságot, távolítsa el az aláhúzási vonalakat, állítson be tiszta szélességet az egyes hivatkozásokhoz, és adja meg a kívánt háttérszínt.
3. lépés
Mindezen változásokhoz adja hozzá a következő kódot a fájlhoz:
#nav a {
szín: #fff;
szövegdíszítés: nincs;
kijelző: blokk;
szélesség: 120px;
párnázás: 4px 10px;
háttérszín: # 003366 ismétlés-y jobbra;
}
#nav a: hover {
szín: # 000;
háttérszín: # 0033FF;
}
#nav li: lebeg {
háttérszín: # 333333;
}
Ezután adja hozzá a következő kódrészletet a menü véglegesítéséhez:
#nav li: hover li ul {
kijelző: nincs;
szélesség: 138 képpont;
felső: -9px;
bal: 133px;
}
#nav li: hover li: hover ul {
kijelző: blokk;
}
4. lépés
A HTML verzióban az általános rendezetlen menü lista így néz ki - ennek alapján létrejön a menü, amelyet a cikkben említettünk.
- itthon
-
Katalógus
-
Minden termék
- Dátum szerint
- Gyártók
- Egyéb
-
