Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] rozwijane menu
Forum PHP.pl > Forum > Przedszkole
dstp
szukam czegoś takiego, że po najechaniu na link np. <a href="test.html">test</a> nad linkiem pojawi się jakiś tekst i ten tekst będę mógł zaznaczyć, a menu nie może się rozjechać

mam coś takiego:
  1. <ul id="menu">
  2. <li><a href="aaa.html" title="">aaa</a></li>
  3. <li><a href="test.html" title="">po najechaniu ma się pokazać tekst nad tym</a></li>
  4. <li><a href="aa.html" title="">aaaa</a></li>
  5. <li><a href="aa.html" title="">aaaa</a></li>
  6. </ul>

jak coś takiego zrobić? w css chyba też da radę
404
Może jQuery + mouseover?
dstp
a co dalej?
404
Przykładowy kod HTML.
  1. <ul id="menu">
  2. <li><a href="aaa.html" title="">aaa</a></li>
  3. <li><a href="test.html" id="69" title="">po najechaniu ma się pokazać tekst nad tym</a></li>
  4. <li><a href="aa.html" title="">aaaa</a></li>
  5. <li><a href="aa.html" title="">aaaa</a></li>
  6. </ul>

Przykładowy kod jQuery.
Kod
$("#69").attr("title", "To jest tekst!!!");

Niktoś
Może chodzi Tobie bardziej o tooltipy ,zobacz:
http://flowplayer.org/tools/tooltip/index.html
adgad
Witam, temat widzę zgodny z moim problemem więc mogę tu pisać smile.gif
Stworzyłem sobie prosty aside w którym mają znajdować się kategorie pobierane z bazy. W aside jest header, po kliknięciu na nim kategorie się chowają bądź pojawiają.
Problem mam z samą listą kategorii, chciałbym aby widoczna była na samym początku tylko kategoria główna, po kliknięciu subkategoria i następna tak samo.
Kod dostępny pod adresem:
http://jsfiddle.net/maniakphp/EkadN/3/
Jak sobie z tym poradzić?

Nikt nie pomoże?
Chodzi mi tylko o efekt-po kliknięciu na nazwę kategorii pierwszego poziomu, czyli kategorii głównej, pojawia się drugi poziom. Jak widać w przykładzie udało mi się ukryć to co chcę, kłopot jest z odkryciem. Pomoże ktoś?
kamil_lk
Szukaj w google pod hasłem menu wielopoziomowe jquery, albo tree jquery.
Tutaj masz przykład jak zrobić wielopoziomowe menu http://krzysztof-furtak.pl/2010/06/wielopo...od-glowny-cz-1/
adgad
Znalazłem ten tutorial już wcześniej, ale tam nie ma zdarzenia po kliknięciu ale po najechaniu. No ale nawet próbując robić podobnie nie za bardzo mi to wychodzi ;/
Zmieniłem trochę strukturę menu na taką z tego linku, ale nawet to nie pmogło ;/
Tu aktualny link:
http://jsfiddle.net/maniakphp/EkadN/4/
Patrzyłem również na inne strony i tutoriale, ale jak jest coś fajnego, to niestety płatne, albo linki są martwe, a to co znalazłem nie potrafię dostosować do swoich potrzeb ;/

Hmm, tak się zastanawiam, próbując rozwiązać problem, może ktoś podpowie jak w jquery oznaczyć konkretną klasę która zostanie kliknięta. Tzn. mam kilka klas child i w jaki sposób mogę oznaczyć że potomek klikniętego powinien się pokazać/ukryć? Próbowałem z children poprzedzone this ale nie za bardzo chce działać sad.gif

Nikt nie jest w stanie pomóc? Nikt nie zna jQuery? wszyscy korzystają z gotowców?

Przedstawiam co udało mi się zrobić, pojawia drugi poziom ale ja bym chciał tylko dla pierwszej głównej kategori, czyli w moim przypadku News, a rozwija się menu dla kategorii PHP. Link: http://jsfiddle.net/maniakphp/EkadN/6/. Pomoże ktoś? Albo podrzuci link do działającego menu wielopoziomowego analogicznego do tego co ja chce zrobić? Bo naprawdę nic nie znalazłem sad.gif
Damonsson
2gi link z google

http://www.script-tutorials.com/demos/133/index.html#


A w tamtym przykładzie (http://krzysztof-furtak.pl/2010/06/wielopo...od-glowny-cz-1/) wystarczy zmienić:

[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function (){
  2. $('ul.menu li').mouseenter(function(){
  3. $(this).children('ul').slideDown('fast');
  4. });
  5.  
  6. $('ul.menu li').mouseleave(function(){
  7. $(this).children('ul').slideUp('fast');
  8. });
  9.  
  10. });
[JAVASCRIPT] pobierz, plaintext


Na:

[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function (){
  2. $('ul.menu li').click(function(){
  3. $(this).children('ul').slideDown('fast');
  4. });
  5.  
  6. $('ul.menu li').mouseleave(function(){
  7. $(this).children('ul').slideUp('fast');
  8. });
[JAVASCRIPT] pobierz, plaintext


Średnio rozgarnięty przedszkolak znający jako tako j. angielski, wpadłby na to co trzeba zmienić. Więc nie błagaj o pomoc, tylko na drugi raz sam pomyśl.
adgad
Dzięki za link i kod. Jednak wydaję mi się że skoro przedszkolak poradziłby sobie to umie czytać, a mam wrażenie że u Ciebie czytanie ze zrozumieniem leży. Podałem wyraźnie że używałem this oraz children ale że mi nie działa. Może źle coś robiłem, sprawdzę jutro, również ten link. Ale nie zarzucaj komuś że oczekuje na gotowca, bo od kilku godzin siedzę i próbuję sobie z tym poradzić, szukam po tutorialach i w dokumentacji różnych selektorów które pasują do tego problemu. Czyli dzięki za pomoc ale sam też czytaj co ktoś pisze.
Edit:
Cytat(Damonsson @ 17.02.2013, 21:44:22 ) *
A w tamtym przykładzie (http://krzysztof-furtak.pl/2010/06/wielopo...od-glowny-cz-1/) wystarczy zmienić:

[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function (){
  2. $('ul.menu li').mouseenter(function(){
  3. $(this).children('ul').slideDown('fast');
  4. });
  5.  
  6. $('ul.menu li').mouseleave(function(){
  7. $(this).children('ul').slideUp('fast');
  8. });
  9.  
  10. });
[JAVASCRIPT] pobierz, plaintext


Na:

[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function (){
  2. $('ul.menu li').click(function(){
  3. $(this).children('ul').slideDown('fast');
  4. });
  5.  
  6. $('ul.menu li').mouseleave(function(){
  7. $(this).children('ul').slideUp('fast');
  8. });
[JAVASCRIPT] pobierz, plaintext

Niestety ten kod mi nie działa - przynajmniej w moim menu.
Cytat(Damonsson @ 17.02.2013, 21:44:22 ) *

No a to menu, nie wiem czy zauwżyłeś ale jest w css, nie ma tam ani linijku kodu z javascript, więc też link nic mi nie pomógł. Nie dziwię się że znalazłeś to jaki drugi link w google, ja szukałem jquery a nie css.
W końcu udało mi się znaleźć:
http://mediaformations.com/examples/Vertic...eMenuPart1.html
dopasowałem to do swojego menu i działa jak chciałem.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.