Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Div jako kilkalne menu rozwijane
Forum PHP.pl > Forum > Przedszkole
!*!
Założyłem już podobny temat w innym dziale, jednak nie uzyskałem odpowiedzi, a nie mogę go tam edytować.

Może źle się wyraziłem. Chodzi mi o uzyskanie efektu pojawiania się "menu" np. diva po kliknięciu na jakiś link, jak kliknę go jeszcze raz to div zostanie ukryty, lub jeśli kliknę (gdy jest otwarty) w dowolną cześć ekranu strony to zostanie on ukryty.

Jako przykład mogę podać główną stronę google, zakładka u góry "więcej" oraz menu na facebooku "konto".

Jeśli jest to naruszenie regulaminu prosiłbym o skasowanie tego tematu. Jednak zależy mi na nakierowaniu czego konkretnie mam szukać. Pod hasłem "menu rozwijane" owszem są takie motywy, jednak nie są one zamykane poprzez kilknięcie w dowolną cześć strony po otworzeniu. I właśnie nie wiem jak taki mechanizm uzyskać.
!*!
t4keda - zrobiłem już takie menu dawno, chodzi mi tylko i wyłącznie o motyw jak je zamknąć.
t4keda
Faktycznie, nie zwróciłem uwagi że nie ma chowania.

No, to może coś takiego. Jak masz swój kod:
[JAVASCRIPT] pobierz, plaintext
  1. function activetab(e){
  2.  
  3. maxtab =3;
  4. tab = document.getElementById('m'+e);
  5. for(i=1; i<=maxtab; i++){
  6. if(i==e){
  7. tab.setAttribute("class","selected");
  8. tab.getElementsByTagName('ul')[0].style.display = 'block';
  9. } else {
  10. document.getElementById('m'+i).setAttribute("class","");
  11. document.getElementById('m'+i).getElementsByTagName('ul')[0].style.display = 'none';
  12. }
  13. }
  14. }
[JAVASCRIPT] pobierz, plaintext


to jeśli chcesz mieć ukryte wszystkie poprzez ponowne kliknięcie w aktywny, to trzeba sprawdzić czy kliknięty element jest aktywny czy nie:

[JAVASCRIPT] pobierz, plaintext
  1. function activetab(e){
  2.  
  3. maxtab =3;
  4. tab = document.getElementById('m'+e);
  5. if(tab.getElementsByTagName('ul')[0].style.display == 'block'){
  6. tab.getElementsByTagName('ul')[0].style.display = 'none';
  7. } else {
  8. for(i=1; i<=maxtab; i++){
  9. if(i==e){
  10. tab.setAttribute("class","selected");
  11. tab.getElementsByTagName('ul')[0].style.display = 'block';
  12. } else {
  13. document.getElementById('m'+i).setAttribute("class","");
  14. document.getElementById('m'+i).getElementsByTagName('ul')[0].style.display = 'none';
  15. }
  16. }
  17. }
  18. }
[JAVASCRIPT] pobierz, plaintext


Nie jestem pewien czy to jest dobrze, ale może przynajmniej pomoże ci w dojściu do rozwiązania.
!*!
Właśnie w trakcie sprawdzenia jest 'block', wypadałoby dodać do body onclick:

[JAVASCRIPT] pobierz, plaintext
  1. window.document.body.onclick = document.getElementById('m'+e).getElementsByTagName('ul')[0].style.display = 'none';
[JAVASCRIPT] pobierz, plaintext


Jednak to w ogóle nie działa. Jeśli zamienię to na setAtribute, wtedy zaskoczy to dopiero za 2 razem gdy zamknę i otworzę menu.
krzysztof_kf
Szukałeś w google ? btw http://www.dhtmlgoodies.com/scripts/menu-f...o-menu-bar.html jeśli nie to password na google slider menu pozdrawiam .
!*!
krzysztof_kf - szukałem, jednak żaden z przykładów nie pokazywał jak schować to co zostało pokazane po kliknięciu w dowolny obszar. slider menu, skłania się tylko i wyłącznie do wysunięcia jakiegoś elementu poprzez kliknięcie w konkretny link, a potem jego schowanie w ten sam sposób, jest to też nawiązanie do akordeonu. Link który podałeś prowadzi do przykładów które wykorzystują własną DUŻĄ bibliotekę i w ogóle nie pokazują tego co chce uzyskać.

Powtórzę bo może dalsze rzędy nie dosłyszały... Chciałbym uzyskać efekt zamykania menu, (które wcześniej otworzyłem klikając w link) na zasadzie kliknięcia w dowolny obszar strony. Przykład google.pl "więcej" u góry.
thomson89
Najprostszy sposób:
Kod
www.google.pl -> pokaż źródło


Pogmeraj to firebugiem w FF.
!*!
A wiesz że oni mają własną bibliotekę która jest "skompresowana"? Trochę trudno z niej wyłapać cały mechanizm. Tak samo jak z każdego innego projektu który jest bardziej rozbudowany np. facebook bo tam też to działa.
krzysztof_kf
Kliknij w link w moim poprzednim poście masz tam pierwsze menu podobne do menu co posiada google czyli więcej czyli po rozwinięciu menu o nazwie więcej klikasz w dowolny obszar strony i się zamyka tak tak samo jak w przypadku google i tak samo jest w moim poprzednim poście jeśli nie chodzi o to ci zapoznaj się z tym tematem Jak poprawnie zadać pytanie
thomson89
Spróbuj dać do body, akcje onclick która to ukryje.
!*!
krzysztof_kf

1. Przeczytaj to jeszcze raz, zanim coś napiszesz.
2. Podałeś przykład który działa na pół gwizdka i w dodatku jest kobyłą. Patrząc w źródło tego skryptu, nie znalazłem niczego co mogłoby mnie nakierować na rozwiązanie swojego problemu.

thomson89 - próbowałem jednak ta akcja wykonywana jest dopiero za drugim razem gdy kilknę w menu. Nie podam tego parametru przy ładowaniu stony, bo niby jak otworzę coś co ma być zamknięte.
t4keda
A da się porównywać obiekty?

np masz swoje menu id="menu", a każdy inny kontener ma inne id więc czy:

[JAVASCRIPT] pobierz, plaintext
  1. function hide(id){
  2. menu = document.getElementById('menu');
  3. obiekt = document.getElementById(id);
  4. if(menu != obiekt){
  5. menu.style.display = 'none';
  6. }
  7. }
[JAVASCRIPT] pobierz, plaintext

pozostaje kwestia wywołania funkcji lub jakiegoś innego odpalenia kodu.
Coś takiego ma wogóle sens?
!*!
Struktura wygląda tak:

  1. <div id="m1">
  2. <p onclick="activetab(1);">Menu 1</p>
  3. <ul>
  4. <li>File</li>
  5. <li>Edit</li>
  6. </ul>
  7. </div>
  8.  
  9. <div id="m2">
  10. <p onclick="activetab(2);">Menu2</p>
  11. <ul>
  12. <li>Opera</li>
  13. <li>Fx</li>
  14. </ul>
  15. </div>


[JAVASCRIPT] pobierz, plaintext
  1. function activetab(e){
  2.  
  3. maxtab =3;
  4. tab = document.getElementById('m'+e);
  5. if(tab.getElementsByTagName('ul')[0].style.display == 'block'){
  6. tab.getElementsByTagName('ul')[0].style.display = 'none';
  7. } else {
  8. for(i=1; i<=maxtab; i++){
  9. if(i==e){
  10. tab.setAttribute("class","selected");
  11. tab.getElementsByTagName('ul')[0].style.display = 'block';
  12. } else {
  13. document.getElementById('m'+i).setAttribute("class","");
  14. document.getElementById('m'+i).getElementsByTagName('ul')[0].style.display = 'none';
  15. }
  16. }
  17. }
  18. }
[JAVASCRIPT] pobierz, plaintext


I chodzi o ukrycie listy UL gdy jest ona widoczne (display:block) w przypadku gdy kilkne poza jej obszarem, na stronie w dowolnym miejscu. Właśnie nie wiem co mam dodać tzn. jak dodać do body taką opcje.

Link do formy obecnej
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.