Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript] Div jako kilkalne menu rozwijane
!*!
post
Post #1





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

Ostrzeżenie: (0%)
-----


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ć.
Go to the top of the page
+Quote Post
t4keda
post
Post #2





Grupa: Zarejestrowani
Postów: 57
Pomógł: 10
Dołączył: 14.10.2009

Ostrzeżenie: (0%)
-----


http://support.internetconnection.net/CODE...Show_Hide.shtml
Go to the top of the page
+Quote Post
!*!
post
Post #3





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

Ostrzeżenie: (0%)
-----


t4keda - zrobiłem już takie menu dawno, chodzi mi tylko i wyłącznie o motyw jak je zamknąć.
Go to the top of the page
+Quote Post
t4keda
post
Post #4





Grupa: Zarejestrowani
Postów: 57
Pomógł: 10
Dołączył: 14.10.2009

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post
!*!
post
Post #5





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #6





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
!*!
post
Post #7





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
thomson89
post
Post #8





Grupa: Zarejestrowani
Postów: 1 178
Pomógł: 51
Dołączył: 7.01.2009
Skąd: Gdańsk

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
!*!
post
Post #9





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #10





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
thomson89
post
Post #11





Grupa: Zarejestrowani
Postów: 1 178
Pomógł: 51
Dołączył: 7.01.2009
Skąd: Gdańsk

Ostrzeżenie: (0%)
-----


Spróbuj dać do body, akcje onclick która to ukryje.
Go to the top of the page
+Quote Post
!*!
post
Post #12





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post
t4keda
post
Post #13





Grupa: Zarejestrowani
Postów: 57
Pomógł: 10
Dołączył: 14.10.2009

Ostrzeżenie: (0%)
-----


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?

Ten post edytował t4keda 26.07.2010, 10:07:20
Go to the top of the page
+Quote Post
!*!
post
Post #14





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 10.10.2025 - 07:49