Trzypoziomowe menu - problem

Trzypoziomowe menu - problem - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Trzypoziomowe menu - problem (/thread-trzypoziomowe-menu-problem)

Trzypoziomowe menu - problem - rejcz - 23-01-2014

RE: Trzypoziomowe menu - problem - Kartofelek - 24-01-2014

Pytanie jest co właściwie chcesz osiągnąć, bo mi się wydaje że tam nie potrzeba JS.

RE: Trzypoziomowe menu - problem - rejcz - 24-01-2014

Może jakaś podpowiedź? Menu miałoby wyglądać tak:

[Obrazek: 2z3ozk9.jpg]

Po najechaniu na "Pozycja 1" rozwija się niebieskie pole o całej szerokości menu i widoczny "Poziom 2". Po najechaniu na "Poziom 2a" pojawia się "Poziom 3" i jeżeli jest dłuższy niż "Poziom 2" to niebieskie pole zwiększa swoją wysokość (dlatego nie chciałem stosować position:absolute dla trzeciego levelu). Dodatkowo jest jeszcze obrazek który zmienia się przy hover na poziomie drugim.

RE: Trzypoziomowe menu - problem - Kartofelek - 25-01-2014

Możesz cały poziom 2 i 3 wstawić w div (np. .submenu)który będzie pokazywany na hover.
Dla 2 i 3 to już zwykły float z position:relative.

Logika działania:

Kod:
/* glowne */

.nav > ul {background:#fff; padding:.....;}

.nav > ul > li { bla bla bla pomaranczowe}

.nav > ul > li > a {display:block; width:100%; height:100%; pomarancowo bla bla bla }

/* podmenu */

.nav > ul > li > .submenu {visibility:hidden; opacity:0; transition:0.5s; position:absolute; top:.....; left:0; width:100%; background:niebiesko}

.nav > ul > li:hover > .submenu {visibility:visible; opacity:1}

/* levelki */

.nav .menu2level {float:left; width..... lorem ipsum}

.nav .menu2level li {....}

.nav .menu2level a {....}

.nav .menu3level {float:left; width..... lorem ipsum}

.nav .menu3level li {....}

.nav .menu3level a {....}

.nav .superHiperTajemniczyObrazek {float:right; margin:lorem ipsum}