[JavaScript] Div jako kilkalne menu rozwijane Opcje

[!*!]

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]

http://support.internetconnection.net/CODE...Show_Hide.shtml

[!*!]

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 
function activetab(e){
 
maxtab =3;
tab = document.getElementById('m'+e);
  for(i=1; i<=maxtab; i++){
    if(i==e){
      tab.setAttribute("class","selected");
      tab.getElementsByTagName('ul')[0].style.display = 'block';
    } else {
       document.getElementById('m'+i).setAttribute("class","");
       document.getElementById('m'+i).getElementsByTagName('ul')[0].style.display = 'none';
       }
 }
}
[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 
function activetab(e){
 
maxtab =3;
tab = document.getElementById('m'+e);
if(tab.getElementsByTagName('ul')[0].style.display == 'block'){
tab.getElementsByTagName('ul')[0].style.display = 'none';
} else {
  for(i=1; i<=maxtab; i++){
    if(i==e){
      tab.setAttribute("class","selected");
      tab.getElementsByTagName('ul')[0].style.display = 'block';
    } else {
       document.getElementById('m'+i).setAttribute("class","");
       document.getElementById('m'+i).getElementsByTagName('ul')[0].style.display = 'none';
       }
 }
}
}
[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 
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 .

Ten post edytował krzysztof_kf 25.07.2010, 10:05:55

[!*!]

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.

Ten post edytował !*! 25.07.2010, 10:43:12

[thomson89]

Najprostszy sposób:

Kod

www.google.pl -> pokaż źródło

Pogmeraj to firebugiem w FF.

Ten post edytował thomson89 25.07.2010, 10:53:38

[!*!]

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

Ten post edytował krzysztof_kf 25.07.2010, 11:01:54

[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 
function hide(id){
menu = document.getElementById('menu');
obiekt = document.getElementById(id);
if(menu != obiekt){
 menu.style.display = 'none';
 }
}
[JAVASCRIPT] pobierz, plaintext 

pozostaje kwestia wywołania funkcji lub jakiegoś innego odpalenia kodu.
Coś takiego ma wogóle sens?

Ten post edytował t4keda 26.07.2010, 10:07:20

[!*!]

Struktura wygląda tak:

[HTML] pobierz, plaintext 
<div id="m1">
<p onclick="activetab(1);">Menu 1</p>
<ul>
<li>File</li>
<li>Edit</li>
</ul>
</div>
 
<div id="m2">
<p onclick="activetab(2);">Menu2</p>
<ul>
<li>Opera</li>
<li>Fx</li>
</ul>
</div>
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
function activetab(e){
 
maxtab =3;
tab = document.getElementById('m'+e);
if(tab.getElementsByTagName('ul')[0].style.display == 'block'){
tab.getElementsByTagName('ul')[0].style.display = 'none';
} else {
  for(i=1; i<=maxtab; i++){
    if(i==e){
      tab.setAttribute("class","selected");
      tab.getElementsByTagName('ul')[0].style.display = 'block';
    } else {
       document.getElementById('m'+i).setAttribute("class","");
       document.getElementById('m'+i).getElementsByTagName('ul')[0].style.display = 'none';
       }
 }
}
}
[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