menu w samym css jeszcze bardziej uniwersalne Opcje

[onlyX]

Witam!

Chciałem stworzyć prototyp wielopoziomowego menu, tak żeby bez zbędnej roboty móc je skopiować do nowych projektów. Problem z tym co już napisałem jest taki, że każdy z poziomów trzeba chować osobno, co daje po 2 reguły dla każdego poziomu.
Czy da się to tak napisać te reguły, aby działały dla nieskończenie wielu poziomów? Taki mały szczególik, ale chciałbym, żeby to było maksymalnie uniwersalne.

[HTML] pobierz, plaintext 
/* DROPDOWN MENU */
 
.dropdown-menu li{
    float: left;
    position: relative;
}
/* 2 level */
.dropdown-menu li ul{
    display: none;
    position: absolute;
    top: 30px; /* wysokosc 1 poziomu */
    left: 0px;
}
.dropdown-menu li ul li{
    float: none;
}
.dropdown-menu li ul li ul{
    left: 120px; /* szerokosc 2+*/
    top: 0;
}
/* pokazywanie i chowanie odpowiednich poziomów */
.dropdown-menu li:hover ul {
    display: block;
}
.dropdown-menu li:hover ul li ul{
    display: none;
}
.dropdown-menu li ul li:hover ul{
    display: block;
}
.dropdown-menu li ul li:hover ul li ul{
    display: none;
}
.dropdown-menu li ul li ul li:hover ul{
    display: block;
}
.dropdown-menu li ul li ul li:hover ul li ul{
    display: none;
}
/* DROPDOWN MENU - end*/
 
 
/* wygląd menu*/
#nav{
    width: 950px;
    height: 30px;
    margin: 0 auto;
    background: #ccc;
}
#nav ul li{
    line-height: 30px;
    height: 30px;
}
#nav ul ul{
    background: #bbb;
}
#nav ul ul ul{
    background: #aaa;
}
#nav ul ul ul ul{
    background: #999;
}
#nav ul li ul li{
    width: 120px;  
}
[HTML] pobierz, plaintext 

Ten post edytował onlyX 27.09.2010, 14:35:50

[devnul]

zy da się to tak napisać te reguły, aby działały dla nieskończenie wielu poziomów?

da się, nie ma rzeczy niemożliwych
pokaż livedemo i html do tego to coś się wymyśli

[onlyX]

Demo: http://s339854745.domenastandartowa.pl/kom..._down_menu.html

w HTMLu nie ma nic szczególnego:

[HTML] pobierz, plaintext 
<div id="nav"><ul class="dropdown-menu">
                <li><a href="#">Menu 1</a>
                    <ul>
                        <li><a href="#">Menu item 1-1</a></li>
                        <li><a href="#">Menu item 1-2</a></li>
                        <li><a href="#">Menu item 1-3</a></li>
                    </ul>
                </li>
 
                <li>Menu 2
                    <ul>
                        <li><a href="#">Menu item 2-1</a></li>
                        <li>
                            <a href="#">Menu item 2-2</a>
                            <ul>
                                <li><a href="#">Menu item 2-2-1</a></li>
                                <li>
                                    <a href="#">Menu item 2-2-2</a>
                                    <ul>
                                        <li><a href="#">Menu item 2-2-2-1</a></li>
                                        <li><a href="#">Menu item 2-2-2-2</a></li>
                                        <li><a href="#">Menu item 2-2-2-3</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Menu item 2-2-3</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Menu item 2-3</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu 3</a>
                    <ul>
                        <li><a href="#">Menu item 3-1</a></li>
                        <li><a href="#">Menu item 3-2</a></li>
                        <li><a href="#">Menu item 3-3</a></li>
                    </ul>
                </li>
            </ul>
 
        </div>
[HTML] pobierz, plaintext 

[devnul]

wskazówka dla Ciebie:

[CSS] pobierz, plaintext 
.dropdown-menu li > ul{
display: none;
position: absolute;
top: 30px;
}
.dropdown-menu li:hover > ul {
display: block;
}
[CSS] pobierz, plaintext 

[onlyX]

Nie w tym tkwi problem. Tylko w 3, 4, 5... poziomie. Jak zaoszczędzić na ostatnich liniach cssa?

Poza tym. IE 6,7 nie obsługuje bezpośredniego dziedziczenia '>' . Sprawdzałem ten kod pod IE 7 i pod IE 6 po dodaniu lihover.htc i działa dobrze.

[devnul]

dla starych i bezużytecznych przeglądarek polecam http://code.google.com/p/ie7-js/ - bez nowych rozwiązań pozostaje Ci zabawa w ręczne zagnieżdżanie każdego poziomu (bo to co ja Ci wkleiłem pozwala na automatyczne wyświetlanie jednego po drugim bez konieczności definiowania osobnego elementu dla każdego poziomu)

[onlyX]

Teraz rozumiem twój zamysł.
Moje podejście było inne.
Chciałem po najechaniu na LI pokazać wszystkie listy w nim zawarte, a potem schować wszystkie listy poziom niżej, ale ta technika zawiodła (IMG:style_emoticons/default/smile.gif)