Cmlap Hírek, cikkek Css alapú ul menü

Css alapú ul menü

Sokan azt gondolják, hogy a lenyitható multilevel ul menü már lerágott csont, pedig vannak akik nem tudják mire kell vigyázni a létrehozásakor, hogy jó helyen jelenjen meg a megfelelõ mûködéssel. Ennek a logikáját lehet egy div elemekbõl épített menünél is alkalmazni, az alapelvek ugyanazok!
Az egyik legfontosabb az almenük megfelelõ helyen való megjelenítéséhez, hogy az almenüket tartalmazó lista elemek [ li ]-k pozíconálása relative legyen, az almenük [ ul ] tag-jei pedig absolute pozícóra legyenek állítva! Ekkor a böngészõ az absolute pozícióra állított elemeket a relative-hez képest fogja igazítani. Ha nem így teszel akkor bizonyos eset kombinációkban a menüd almenüi rossz helyre kerülnek.

A példában egy vízszintes menüt fogunk létrehozni, a css class-a .nav lesz.

Itt a példa html kódja:





        <ul class="nav">
            <li><a href="">Main</a></li>
            <li><a href="">Menu 1</a></li>
            <li><span>Menu 2</span>
                <ul>
                    <li><a href="">Submenu 2.1</a></li>
                    <li><a href="">Submenu 2.2</a></li>
                    <li><a href="">Submenu 2.3</a></li>
                </ul>
            </li>
            <li><span>Menu 3</span>
                <ul>
                    <li><a href="">Submenu 3.1</a></li>
                    <li><span>Submenu 3.2</span>
                        <ul>
                            <li><a href="">sub-submenu 3.2.1</a></li>
                            <li><span>Sub-submenu 3.2.2</span>
                                <ul>
                                    <li><a href="">sub-submenu 3.2.2.1</a></li>
                                    <li><a href="">Sub-submenu 3.2.2.2</a></li>
                                    <li><a href="">Sub-submenu 3.2.2.3</a></li>
                                </ul>
                            </li>
                            <li><a href="">Sub-submenu 3.2.3</a></li>
                        </ul>
                    </li>
                    <li><a href="">Submenu 3.3</a></li>
                </ul>
            </li>
        </ul>


Beállítjuk a háttérszínt és a 100% szélességet, de hogy tényleg teljes széles legyen float:left -re kell venni. Másképp: ha float:left -et (vagy right -ot) használsz, állítsd be mindig a szélességet, kivéve ha nem fontos különben a böngészõk némelyike egy kis néhány karakteres sávot vagy automatikus szélességet fog megállapítani. Ebben az esetben szükséges hogy kitöltse kereszbe a lapot.

/* Az ul teljes oldal szélességû és szürke*/
ul.nav {background-color:#aaaaaa;width:100%;float:left;}


Minden .nav alatt található ul és li elemrõl levesszük a böngészõbe épített margin, padding és list-style-type beállításokat, hogy megszabaduljunk a felsorolás jelektõl és az igazításoktól. Most egymás alatti menüpontokat fogsz látni.

/* Az ul és li elemekre alapértelmezett beállítás a margó behúzás és felsorolásjel, de ezeket el kell távolítani */
ul.nav, ul.nav li, ul.nav li ul {list-style-type:none;margin:0px;padding:0px;}


Most jönnek a mélységek. A legegyszerûbb és css trükköktõl mentes beállítás az, ha néhány szintig beállítjuk a mûködést. Példánkban 3 almenü szintig (plussz a fõmenük, de azok nem kell lenyithatóak legyenek) a lenyitásoknak (:hover ) megfelelõen.  Mindig a szint alatti rejtett (display:none) és a fölévitt egérnél jelenik meg (display:block) az alatta lévõ ul.

/* Mivel ugye a css lépcsõzetes így mindig piramist építünk a beállítások szûkítéséhez. Ebben a példában jól látszik  hogyan épül az egyik a másikra. */
ul.nav li ul {display:none;} /*menüpont elsõ almenüje és minden ul csukott alap állapotban*/
ul.nav li:hover ul {display:block;} /*amikor a menüpont fölé visszük az egeret, az alatta lévõ ul-ek kinyílnak*/
/*Innen azért van szükség a további szûkítésre, hogy csak egy szint látszódjon, ugyanis a fentebbi mindre vonatkozik!*/
ul.nav li:hover ul ul{display:none;}
ul.nav li ul li:hover ul{display:block;}
ul.nav li ul li:hover ul ul{display:none;}
ul.nav li ul li ul li:hover ul{display:block;}


A line-height fogja meghatározni a menüpontok magasságát, és azért fontos hogy ne height legyen, mert így lesz függõlegesen középen, és biztosan azonos magasságú mindig. A font beállítások minden szinre vonatkozni fognak, a margó a fõmenüé lesz. A 100px szélesség felülírásra kerül lejjebb. Itt kell megadni azt, hogy a li elemek mindig relatívok legyenek.

/* A li elemek beállítása, amelyet felül fogunk bírálni lejjebb szûkítéssel. Ez most a fõmenükre lesz igaz, illetve amit nem definiálunk át, az a többire is. */
ul.nav li {float:left;line-height:30px;width:100px;font-weight:bold;font-family:Arial;font-size:12px;margin-left:1px;
position:relative;   /* FONTOS! */
}

Írjuk felül az almenük szélességét és mondjuk meg, hogy ezek abszolút pozícióba kell legyenek a li elemekhez képest. Az alapértelmezett (left és top nélküli) absolute típusú pozíció azt eredményezi, hogy az elem a szûlõjéhez lesz igazítva, nem az oldal 0-0 pontjához, és ha a szülõ relative, akkor biztosan annak bal aljához!

/* az almenük 150-esek*/
ul.nav li ul {width:150px;
position:absolute;    /* FONTOS! */
}
/*egy-egy menüpont pedig ki kell töltse a helyét. Lásd megint float és width kapcsolata!*/
ul.nav li ul li {width:100%;float:left;}


Nekünk a menünek jobbra tolódva kell kinyílni és a szülõ magasságában, így toljuk balra és húzzuk fel a menüpontot második szinten, ugyanis elsõ szinten a fõmenü (ul.nav elem) alattiak a fõmenüpontok alatt kell megjelenjenek, ahova az alapértelmezett beállítás is teszi õket (bal alsó sarok a szülõ alatt)!

/*az almenük szélességével és egy menü magasságával történik a korrekció jobbra-fel és CSAK a második almenü szinttõl!*/
ul.nav li ul ul {margin-left:150px;margin-top:-30px;}


Már gyakorlatilag csak a szín beállítások maradtak.
A példában a menüpontokat [ a ] és [ span ] tagok közé helyeztem, így azok színei lesznek a mérvadóak, de szándékosan hagytam benne egy piros színkódot, ami akkor érvényesülne ha bele tennél egy [ li ] tagot csupaszon almenüként (ul.nav alatti ul elembe).

/*a fõmenük színe és a mutató típusú kurzor minden elemre*/
ul.nav li {color:#ffffff;cursor:pointer;}
/*a példában az almenük háttérszíne sötét szürke, pirosak lennének és lehetne alsó keretet használni nekik, ami most nem kell így kinulláztuk*/
ul.nav li ul li {color:#aa0000;background-color:#333333;border-bottom:0px solid #dddddd;}


A menüpontokat alkotó [ a ] és [ span ] elemek színei, mintái jönnek egységesen: blokkosak, aláhúzás nélküliek kis bal-jobb behúzással és alsó elválasztó kerettel rendelkezõek. A padding azért itt van beállítva, mert a keret (alsó elválasztó vonal) így ér ki teljes szélességben és nem lóg túl valamint nem rövidebb mint a szülõ  [ ul ] szélessége. A text-decoration:none az [ a ] elemre fog érvényesülni.
A :hover pszeudo szelektor pedig akkor lesz ésrvényes ha fölé visszük az egeret az elemnek. Nekünk a két [ a ] és [ span ] elemre kell beállítani.

/*Az egységes a és span beállítás*/
ul.nav li a , ul.nav li span {display:block;text-decoration:none;color:#ffffff;padding:0px 10px;border-bottom:1px solid #cccccc;}
/* :hover pseudo selector az egér eseményhez*/
ul.nav li a:hover, ul.nav li span:hover {background-color:#ffffff;color:#333333;}


Ezt az egészet megnézheted egy példa oldalon, sõt le is töltheted egyben mindkét példával.
Ez egy teljes weboldal alap sablonja is lehetne (persze egyszerû tartalommal), a példához pedig bõven elegendõ.

A letölthetõ és megnézhetõ ul menü példák:


Itt az egyszerûbb példa css3 nélkül: ul menü példa

Ez pedig a css3 tulajdonságokat használó (színátmenetek, lekerekített sarkak, google webfontok) példa linkje: ul menü példa css3-al

Innen egyben le tudod tölteni: teljes ul menü példa és a weboldal


Ha tetszett vagy hasznosnak talltad, krlek oszd meg!
Author / szerz:
Tovbbi kpek:
multilevel css3 ul menu with backround-image:linear-gradient
multilevel css ul menu
Hozzszlsok
Vlasszon nyelvet!
Keress a tartalomban
Kattintson ide az adatok elkldshez!