Nie jesteś zalogowany.
Jeśli nie posiadasz konta, zarejestruj je już teraz! Pozwoli Ci ono w pełni korzystać z naszego serwisu. Spamerom dziękujemy!
Ogłoszenie
Prosimy o pomoc dla małej Julki — przekaż 1% podatku na Fundacji Dzieciom zdazyć z Pomocą.
Więcej informacji na dug.net.pl/pomagamy/.
Strony: 1
- Forum Debian Users Gang
- » Elektronika i Programowanie
- » [js]Menu pionowe, chowanie i pokazywanie podmenu
#1 2010-08-02 21:07:28
Rumi - 
prawiczek erotoman
[js]Menu pionowe, chowanie i pokazywanie podmenu
Mam menu:
Kod:
...
<ul>
<li>Kategoria</li>
<ul>
<li>Podkategoria</li>
<ul>
<li>Podpodkategoria</li>
</ul>
</ul>
</ul>
...jako że troche to to sobie liczy chciał bym je (podkategorie i podpodkategorie) ładnie chować. Na js sie nie znam a jquery ukrywa i pokazuje w menu zrobionym na divach .. a mi trza na listach .. ktoś pomoże ;>
[url=http://przyklej24.pl][b][color=green]ogłoszenia internetowe[/color][/b][/url]
[url=http://l-ka.gorlice.pl/][b][color=blue]nauka jazdy gorlice[/color][/b][/url]
[url=http://ciasny.net][color=#FF0000][b]Katalog stron[/b][/color][/url]
[url=http://www.abc-prawko.pl][b]Baza OSK[/b][/url]
Offline
#2 2010-08-02 22:42:39
ethanak - Użytkownik
Re: [js]Menu pionowe, chowanie i pokazywanie podmenu
[url=http://blog.polip.com/]takie coś[/url]?
Stare co prawda, ale chyba jeszcze aktualne...
Nim mechaniczne larum zagrasz mi, kanalio,
głosząc nadejście Javy - śmiertelnego wroga!
[i]Zespół Adwokacki Dyskrecja[/i]
Offline
#3 2010-08-02 22:48:46
Rumi - prawiczek erotoman
Re: [js]Menu pionowe, chowanie i pokazywanie podmenu
ale to ma sie rozsuwać a nie wyświetlać obok
Ostatnio edytowany przez Rumi (2010-08-02 22:48:57)
[url=http://przyklej24.pl][b][color=green]ogłoszenia internetowe[/color][/b][/url]
[url=http://l-ka.gorlice.pl/][b][color=blue]nauka jazdy gorlice[/color][/b][/url]
[url=http://ciasny.net][color=#FF0000][b]Katalog stron[/b][/color][/url]
[url=http://www.abc-prawko.pl][b]Baza OSK[/b][/url]
Offline
#4 2010-08-02 22:50:15
Minio - Użyszkodnik
Re: [js]Menu pionowe, chowanie i pokazywanie podmenu
Warto dodać że dzięki selektorom CSS3 (:nth-child, + etc), obsługiwanym już przez każdą liczącą się przeglądarkę, nie trzeba każdej pozycji w menu nadawać osobnej klasy, co znacznie upraszcza kod HTML.
ale to ma sie rozsuwać a nie wyświetlać obok[/quote]
Kwestia wypozycjonowania elementów w CSS. Chyba identyczny sposób, ale z elementami pojawiającymi się pod pozycjami menu:
http://www.cafewebmaster.com/web2-style-css-dynamic-menu-arrows-and-background-imagesOstatnio edytowany przez Minio (2010-08-02 22:51:46)
Spinnen Essen: [url=http://fluxboxpl.org/portal/]FluxboxPL[/url] [url=http://przepis-na-lo.pl/]Przepis na LibreOffice[/url]
Offline
#5 2010-08-02 23:32:08
Rumi - prawiczek erotoman
Re: [js]Menu pionowe, chowanie i pokazywanie podmenu
nie chodzi mi o rozsuwanie sie jak tu http://berndmatzner.de/jquery/hoveraccordion/ wiec musi być js :P
[url=http://przyklej24.pl][b][color=green]ogłoszenia internetowe[/color][/b][/url]
[url=http://l-ka.gorlice.pl/][b][color=blue]nauka jazdy gorlice[/color][/b][/url]
[url=http://ciasny.net][color=#FF0000][b]Katalog stron[/b][/color][/url]
[url=http://www.abc-prawko.pl][b]Baza OSK[/b][/url]
Offline
#6 2010-08-03 00:14:47
Contravene - Użytkownik
- Contravene
- Użytkownik
- Zarejestrowany: 2006-08-07
Re: [js]Menu pionowe, chowanie i pokazywanie podmenu
[quote=Rumi]Na js sie nie znam a jquery ukrywa i pokazuje w menu zrobionym na divach[/quote]
Przykładowy (i poglądowy) skrypt z użyciem JQuery. Zwróć uwagę na poprawną strukturę znaczników. Elementów <a> użyłem po to, żeby trochę podrasować całość - dodać podreślenia dla punktów niepustych itd. Właściwie to skrypt można ograniczyć do 4 wierszy tyczących się obsługi kliknięcia(które zresztą można zastąpić każdym innym zdarzeniem). Jeśli chcesz, aby rozwinięta mogła być tylko jedna lista jednocześnie, rozszerz odpowiednio obsługę zdarzenia (może to być nieco skomplikowane, jeśli listy są wielopoziomowe).
Kod:
<ul>
<li><a>1</a>
<ul>
<li><a>1.1</a></li>
<li><a>1.2</a></li>
</ul>
</li>
<li><a>2</a>
<ul>
<li><a>2.1</a></li>
<li><a>2.2</a>
<ul>
<li><a>2.2.1</a></li>
<li><a>2.2.2</a></li>
</ul>
</li>
</ul>
</li>
</ul>Kod:
$(document).ready(function(){
// Szybkość animacji.
var speed = 200;
// Domyślnie zwijamy wszystkie listy oraz podkreślamy te punkty, które listy podrzędne (i ustwiamy rodzaj kursora).
$('li ul').css('display', 'none').parent().children('a:first-child').css('text-decoration', 'underline').css('cursor', 'hand');
// Punkt główny: obsługa kliknięcia - zwijanie i rozwijanie list.
$('li').click(function() {
$(this).children('ul').toggle(speed);
return false;
});
});Ostatnio edytowany przez Contravene (2010-08-03 00:19:55)
Offline
#7 2010-08-05 19:47:13
Rumi - prawiczek erotoman
Re: [js]Menu pionowe, chowanie i pokazywanie podmenu
ok skorzystałem z http://www.jq-help.pl/T-menu-rozwijane-28 i hula
[url=http://przyklej24.pl][b][color=green]ogłoszenia internetowe[/color][/b][/url]
[url=http://l-ka.gorlice.pl/][b][color=blue]nauka jazdy gorlice[/color][/b][/url]
[url=http://ciasny.net][color=#FF0000][b]Katalog stron[/b][/color][/url]
[url=http://www.abc-prawko.pl][b]Baza OSK[/b][/url]
Offline
Strony: 1
- Forum Debian Users Gang
- » Elektronika i Programowanie
- » [js]Menu pionowe, chowanie i pokazywanie podmenu
Informacje debugowania
| Time (s) | Query |
|---|---|
| 0.00009 | SET CHARSET latin2 |
| 0.00004 | SET NAMES latin2 |
| 0.00092 | SELECT u.*, g.*, o.logged FROM punbb_users AS u INNER JOIN punbb_groups AS g ON u.group_id=g.g_id LEFT JOIN punbb_online AS o ON o.ident='3.146.34.148' WHERE u.id=1 |
| 0.00071 | REPLACE INTO punbb_online (user_id, ident, logged) VALUES(1, '3.146.34.148', 1732217408) |
| 0.00056 | SELECT * FROM punbb_online WHERE logged<1732217108 |
| 0.00077 | SELECT topic_id FROM punbb_posts WHERE id=153623 |
| 0.00120 | SELECT id FROM punbb_posts WHERE topic_id=17344 ORDER BY posted |
| 0.00083 | SELECT t.subject, t.closed, t.num_replies, t.sticky, f.id AS forum_id, f.forum_name, f.moderators, fp.post_replies, 0 FROM punbb_topics AS t INNER JOIN punbb_forums AS f ON f.id=t.forum_id LEFT JOIN punbb_forum_perms AS fp ON (fp.forum_id=f.id AND fp.group_id=3) WHERE (fp.read_forum IS NULL OR fp.read_forum=1) AND t.id=17344 AND t.moved_to IS NULL |
| 0.00006 | SELECT search_for, replace_with FROM punbb_censoring |
| 0.00130 | SELECT u.email, u.title, u.url, u.location, u.use_avatar, u.signature, u.email_setting, u.num_posts, u.registered, u.admin_note, p.id, p.poster AS username, p.poster_id, p.poster_ip, p.poster_email, p.message, p.hide_smilies, p.posted, p.edited, p.edited_by, g.g_id, g.g_user_title, o.user_id AS is_online FROM punbb_posts AS p INNER JOIN punbb_users AS u ON u.id=p.poster_id INNER JOIN punbb_groups AS g ON g.g_id=u.group_id LEFT JOIN punbb_online AS o ON (o.user_id=u.id AND o.user_id!=1 AND o.idle=0) WHERE p.topic_id=17344 ORDER BY p.id LIMIT 0,25 |
| 0.00085 | UPDATE punbb_topics SET num_views=num_views+1 WHERE id=17344 |
| Total query time: 0.00733 s | |