Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript] Menu otwierane
adi456
post
Post #1





Grupa: Zarejestrowani
Postów: 251
Pomógł: 0
Dołączył: 21.01.2010
Skąd: Nowy Sącz

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

Witam, może ktoś polecić jakiś skrypt do otwieranego menu, ponieważ wiekszość posiada dużo niedopracowań. Zależy mi żeby menu otwierało się po kliknięciu, żeby po kliknięciu w odosnik menu się chowało.

Zastosowałem skrypt z tej strony lecz posiada niedociągnięcia, po kliknięciu czegoś w menu nie chowa się, gdy mam 2 menu klikne w jedno otworzy się potem klikam w drugie a to pierwsze dalej jest otwarte (ogólnie problem z zamykaniem, trzeba każdorazowo ręcznie zamykać)

większość skryptów które kiedyś testowałem też miały problemy z zamykaniem się (IMG:style_emoticons/default/sad.gif)

proszę o pomoc

Ten post edytował adi456 5.03.2012, 10:22:20
Go to the top of the page
+Quote Post
strife
post
Post #2





Grupa: Przyjaciele php.pl
Postów: 2 605
Pomógł: 96
Dołączył: 22.10.2004
Skąd: UK

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

Zobacz np.

* http://davidwalsh.name/jquery-sliders
* http://jordankasper.com/jquery/faq/

albo po prostu jQuery $.toggle i sam sobie możesz to napisać.
Go to the top of the page
+Quote Post
adi456
post
Post #3





Grupa: Zarejestrowani
Postów: 251
Pomógł: 0
Dołączył: 21.01.2010
Skąd: Nowy Sącz

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

widze że podesłane linki nie spełniają moich oczekiwań, nie nadają się do menu, ponieważ gdy klikne np This is question 1 rozwinie się potem klikam This is question 2 a This is question 1 dalej jest rozsunięty.

sam nie potrafie tego napisać ponieważ znam się tylko na html css php
Go to the top of the page
+Quote Post
strife
post
Post #4





Grupa: Przyjaciele php.pl
Postów: 2 605
Pomógł: 96
Dołączył: 22.10.2004
Skąd: UK

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

Cytat(adi456 @ 5.03.2012, 10:59:56 ) *
widze że podesłane linki nie spełniają moich oczekiwań, nie nadają się do menu, ponieważ gdy klikne np This is question 1 rozwinie się potem klikam This is question 2 a This is question 1 dalej jest rozsunięty.

sam nie potrafie tego napisać ponieważ znam się tylko na html css php

Skoro naprawdę znasz te technologie to nie powinieneś mieć żadnych problemów, aby znaleźć w internecie informacje na temat tego o czym Ci napisałem, czyli jQuery $.toggle.

Napisz coś, powiedz z czym masz problem - pomożemy. Problem z zamykaniem możesz łatwo obsłużyć sprawdzając, te które są rozwinięte i różne od aktualnie klikniętego / zaznaczonego i je przełączać ponownie (jquery $.toggle).
Go to the top of the page
+Quote Post
adi456
post
Post #5





Grupa: Zarejestrowani
Postów: 251
Pomógł: 0
Dołączył: 21.01.2010
Skąd: Nowy Sącz

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

to może najłatwiej będzie do tego skryptu skrypt dodać coś co będzie zamykało menu gdy kliknie się gdzies indziej niż w danym menu?
Go to the top of the page
+Quote Post
strife
post
Post #6





Grupa: Przyjaciele php.pl
Postów: 2 605
Pomógł: 96
Dołączył: 22.10.2004
Skąd: UK

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

Znaj moje dobre serce (IMG:style_emoticons/default/tongue.gif) Masz jak to powinno wyglądać mniej więcej. 

[HTML] pobierz, plaintext 
  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  2.  
  3. <script type="text/javascript">
  4. $(document).ready(function() {
  5.     $('ul li a.link').click(function() {
  6.         $('ul li .li-body').hide();
  7.         $(this).parent().find('.li-body').toggle();
  8.     });
  9. });
  10. </script>
  11.  
  12. <style>
  13. .li-body {
  14.     display: none;
  15. }
  16. </style>
  17.  
  18. <ul>
  19.     <li><a class="link" href="java script:void(0)">Element #1</a>
  20.         <div class="li-body">zawartosc menu #1</div>
  21.     </li>
  22.     <li><a class="link" href="java script:void(0)">Element #2</a>
  23.         <div class="li-body">zawartosc menu #2</div>
  24.     </li>
  25.     <li><a class="link" href="java script:void(0)">Element #3</a>
  26.         <div class="li-body">zawartosc menu #3</div>
  27.     </li>
  28. </ul>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
adi456
post
Post #7





Grupa: Zarejestrowani
Postów: 251
Pomógł: 0
Dołączył: 21.01.2010
Skąd: Nowy Sącz

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

bardzo ci dziękuje strife, skrypt działa rewelacyjnie (menu zachowuje się jak w zwykłych programach komputerowych), jednak moderatorzy potrafią być spoko!

p.s. jeszcze malutki problem, co zrobić żeby menu chowało się gdy klikne gdzieś poza menu?

Ten post edytował adi456 5.03.2012, 12:27:50
Go to the top of the page
+Quote Post
strife
post
Post #8





Grupa: Przyjaciele php.pl
Postów: 2 605
Pomógł: 96
Dołączył: 22.10.2004
Skąd: UK

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

Cytat(adi456 @ 5.03.2012, 12:17:22 ) *
bardzo ci dziękuje strife, skrypt działa rewelacyjnie (menu zachowuje się jak w zwykłych programach komputerowych), jednak moderatorzy potrafią być spoko!

p.s. jeszcze malutki problem, co zrobić żeby menu chowało się gdy klikne gdzieś poza menu?

No ba, jasne że są spoko :D

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  4.  
  5. <script type="text/javascript">
  6. $(document).ready(function() {
  7.     $('ul li a.link').click(function(event) {
  8.         $('ul li .li-body').hide();
  9.         $(this).parent().find('.li-body').toggle();
  10.  
  11.          event.stopPropagation();
  12.  
  13.     });
  14.  
  15.     $('html').click(function() {
  16.         $('ul li .li-body').hide();
  17.     });
  18.  
  19. });
  20. </script>
  21.  
  22. <style>
  23. .li-body {
  24.     display: none;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29.  
  30. <ul>
  31.     <li><a class="link" href="java script:void(0)">Element #1</a>
  32.         <div class="li-body">zawartosc menu #1</div>
  33.     </li>
  34.     <li><a class="link" href="java script:void(0)">Element #2</a>
  35.         <div class="li-body">zawartosc menu #2</div>
  36.     </li>
  37.     <li><a class="link" href="java script:void(0)">Element #3</a>
  38.         <div class="li-body">zawartosc menu #3</div>
  39.     </li>
  40. </ul>
  41.  
  42. </body>
  43. </html>
[HTML] pobierz, plaintext


Obiecaj mi tylko, że poszerzysz swoją wiedzę o ten rozdział na przyszłość ;-)

Pzdr.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 05:09
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn