Grzegorz Fus

Grzegorz Fus informatyk

Temat: menu rozwijane js/jQuery

Witam!
Potrzebuje stworzyć rozwijane menu (najlepiej w js lub jquery). Ponieważ nigdy wcześniej nie miałem do czynienia z js, postanowiłem przeszukać na sieci przykładowe skrypty i wykorzystać jeden z nich.
Chciałbym w tym miejscu zaznaczyć, że zależało mi na menu "onclick".

Niestety, jeśli jest się początkującym i tworzy się takie rzeczy na zasadzie ctrl+c/ctrl+v niemal pewnym jest, że coś nie będzie działać tak, jak sobie tego życzymy. I tak też jest w moim przypadku...

Poniżej przedstawiam wam fragment mojego menu:

$(document).ready(function(){
$('ul#menu1 li ul, ul#menu1 li ul').hide();
$('ul#menu2 li ul, ul#menu2 li ul').hide();
$('ul#menu3 li ul, ul#menu3 li ul').hide();
$('ul#menu1 > li > a').click(function(){
$('ul#menu2 li ul, ul#menu2 li ul').hide(500);
$('ul#menu3 li ul, ul#menu3 li ul').hide(500);
$(this).parent('li').children('ul').toggle(500);
});

$('ul#menu11 > li > a').click(function(){
$('ul#menu11 li ul, ul#menu11 li ul').hide(500);
$(this).parent('li').children('ul').toggle(500);
$(this).parent('li').toggleClass('click');
});

Gdzie: menu11 jest podmenu menu1.

Menu wygląda całkiem zgrabnie, jednak jak już wyżej pisałem nie działa w pełni po mojej myśli.

A mianowicie:
1) Nie wyświetla się poprawnie pod IE (co akurat jest w tej chwili dla mnie najmniejszym zmartwieniem).
2) toggleClass - owszem, działa, ale nie tak jak bym chciał.
A mianowicie po kliknięciu w np. 1 element menu zostaje on przesunięty o wartość zadaną w .click (css). Po kolejnym kliknięciu w 1 element, wraca on do początkowego położenia. I wszystko ładnie. Problem w tym, że chce również aby: przy aktywnym np. 1 elemencie menu po kliknięciu w 2, 3 lub 4 itd. element menu, 1 element wrócił do stanu początkowego, a 2, 3 lub 4 itd. element został przesunięty.
W skrócie chodzi mi głównie o zaznaczenie w jakiś sposób aktywnego elementu menu oraz o jego powrót do stanu początkowego, po aktywowaniu innego elementu.

Niestety nie wykonam tego za pomocą toggleClass. Czy ktoś z was ma może pomysł jak to rozwiązać?
Ewentualnie, czy ktoś z was zna podobnie zachowujące się menu w jquery?

Próbowałem to również rozwiązać za pomocą remove/addClass, jednak bez efetków.
Marcin Witek

Marcin Witek isido.pl ułatwia
pracę - polski sytem
zarządzania
projekt...

Temat: menu rozwijane js/jQuery

a http://users.tpg.com.au/j_birch/plugins/superfish/ nie załatwi sprawy out-of-the-box ?

konto usunięte

Temat: menu rozwijane js/jQuery

Dokładnie, lepiej skorzystać z jakiejś gotowej biblioteki do tego, ponieważ Twój kod nie jest zbyt zadowalający :-)

http://plugins.jquery.com/project/Plugins/category/44
Grzegorz Fus

Grzegorz Fus informatyk

Temat: menu rozwijane js/jQuery

Marcin, superfish byl pierwszym menu jQuery, który próbowałem u siebie podpiąć. Jednak nie byłem w stanie zmienić na tyle kodu, aby działał wg moich potrzeb - tzn. chcąc go przerobić na onclick sypało mi się całe menu... niestety jestem jeszcze zbyt zielony z jQuery, a nie mam na obecną chwilę czasu, zeby uczyć się go od podstaw :(

Kamil, przegladnąłem z grubsza to co mi podesłałeś, niestety problem w tym, że nie znalazłem tam gotowego menu z onclick (na takim mi właśnie zależy). A jak pisałem wyżej, boję się, że nie będę w stanie sam przerobić skryptu.

Heh, i zdaję sobie sprawę z tego, że mój kod nie wygląda zbyt ciekawie - w js też raczkuję..., jednak efekt wizualny jest dla mnie zadowalający (śmiem nawet twierdzić, że wygląda lepiej niż niejedeno menu w jQuery) ;)

Swoją drogą wolałbym zrobić to w jQuery, a nie jak mam obecnie - w js, ponieważ IE nie radzi sobie z js ><

Narazie będę dziś próbował wyłuskać coś z tego:

http://www.sohtanaka.com/web-design/examples/drop-down...

I zapewne jeszcze się odezwę :P

konto usunięte

Temat: menu rozwijane js/jQuery

Grzegorz Fus:
Swoją drogą wolałbym zrobić to w jQuery, a nie jak mam obecnie - w js, ponieważ IE nie radzi sobie z js ><
jQuery jest napisany w JavaScript.

> Narazie będę dziś próbował wyłuskać coś z tego:

http://www.sohtanaka.com/web-design/examples/drop-down...
Bardzo ładny skrypt uzyskany przy pomocy niewielkiej ilości kodu. Nie testowałem, ale na najnowszej Operze ładnie wygląda :-)

Zamieniłbym tylko:
	-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;

na
	-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;


Dzięki temu także i pod Operą będzie widoczne zaokrąglenie boków menu.
Grzegorz Fus

Grzegorz Fus informatyk

Temat: menu rozwijane js/jQuery

Wiem, że jQuery jest pisane w js, chodziło mi o to, że IE prędzej przerobi poprawnie jQuery, niż czysty js. Przynajmniej tak jest u mnie - łącznie z menu wykorzystałem w mojej stronce już 3 skrypty, i IE ma problemy jedynie z menu.

Powoli zastanawiam się czy nie wybrałem się z "motyką na słońce". Jednak uparłem się na efektowne menu... ><

Tak wygląda teraz moje menu:

http://webdash.pl/menu/

I właśnie o coś takiego mi chodzi. Może teraz zrozumiesz co chcę zrobić.

A co do http://sohtanaka.com/web-design/examples/drop-down... ...jak zobaczyłem kod, to się przeraziłem - za dużo tego jak na nowicjusza...:P

PS: błagam, nie otwieraj tego w IE:DGrzegorz Fus edytował(a) ten post dnia 26.08.10 o godzinie 17:36
Grzegorz Fus

Grzegorz Fus informatyk

Temat: menu rozwijane js/jQuery

Znalazłem jeszcze coś..

Zamiast:

$(this).parent('li').toggleClass('click');


mogę to samo zapisać jako:


if ($(this).parent('li').is('.click')) {
$(this).parent('li').removeClass('click');
}
else {
$(this).parent('li').addClass('click');
}


Nie znam funkcji js, ale czy jest coś takiego jak (any) lub (all) - funkcja, która po kliknięciu w dany element zastosuje zmianę do wszystkich elementów? Jeśli tak, to:


if ($(ANY).parent('li').is('.click')) {
$(ANY).parent('li').removeClass('click');
}
else {
$(this).parent('li').addClass('click');
}


myślę, że rozwiązałoby mój problem.Grzegorz Fus edytował(a) ten post dnia 26.08.10 o godzinie 21:18
Grzegorz Fus

Grzegorz Fus informatyk

Temat: menu rozwijane js/jQuery

OK. Kod wygląda okropnie, ale działa tak jak chciałem:

http://webdash.pl/menu2/
Grzegorz Fus

Grzegorz Fus informatyk

Temat: menu rozwijane js/jQuery

Ma ktoś może pomysł, co zrobić aby to menu poprawnie wyświetlało się w IE?

http://webdash.pl/menu4/Grzegorz Fus edytował(a) ten post dnia 28.08.10 o godzinie 16:44
Dominik Marczuk

Dominik Marczuk Remote Team Lead w
Sonalake

Temat: menu rozwijane js/jQuery

To jest fajny tutorial jak napisać rozwijalne menu w HTML + CSS + jQuery. Może się przyda, choć jQuery jest tu wykorzystywane raczej tylko do animacji, a samo menu to goły CSS...

Następna dyskusja:

Rozwijane menu




Wyślij zaproszenie do