Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Przerobienie menu jQuery
hitmanskdm
post 13.07.2012, 10:10:10
Post #1





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 29.11.2010

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

Mam zrobione proste menu z użyciem jQuery. Potrzebuje przerobić jet tak, żeby było aktywne po kliknięciu nie najechanie /zmieniałem hover na click, ale się sypało lekko/ I żeby aktywny link był widoczny /np po wejsciu w link 2.1.4 całe menu zostawało rozwinięte/

Poniżej kod:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <title>Test</title>
  5.       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  6.       <style>
  7. nav ul {
  8.    position:absolute;
  9.    top:0;
  10.    margin:0;
  11.    padding:0;
  12. }
  13. nav li {
  14.    list-style-type:none;
  15.    width:100px;
  16. }
  17. nav a {
  18.    color:grey;
  19.    text-decoration:none;
  20. }
  21. nav a:hover,
  22. nav li.hover>a {
  23.    color:black;
  24. }
  25. nav li ul {
  26.    display:none;
  27.    margin-left:100px;
  28. }
  29. nav.nojs li:hover>ul {
  30.    display:block;
  31. }
  32.  
  33.       </style>
  34.       <script>
  35. $(function(){
  36.    $('nav').removeClass('nojs').find('li').has('ul').hover(function(){
  37.       $(this).toggleClass('hover').children('ul').stop().fadeToggle('slow');
  38.    });
  39. });
  40.       </script>
  41.    </head>
  42.    <body>
  43.       <nav class="nojs">
  44.          <ul>
  45.             <li><a href="#">Link 1</a></li>
  46.             <li>
  47.                <a href="#">Link 2</a>
  48.                <ul>
  49.                   <li>
  50.                      <a href="#">Link 2.1</a>
  51.                      <ul>
  52.                         <li><a href="#">Link 2.1.1</a></li>
  53.                         <li><a href="#">Link 2.1.2</a></li>
  54.                         <li><a href="#">Link 2.1.3</a></li>
  55.                         <li><a href="#">Link 2.1.4</a></li>
  56.                         <li><a href="#">Link 2.1.5</a></li>
  57.                      </ul>
  58.                   </li>
  59.                   <li><a href="#">Link 2.2</a></li>
  60.                   <li><a href="#">Link 2.3</a></li>
  61.                </ul>
  62.             </li>
  63.             <li>
  64.                <a href="#">Link 3</a>
  65.                <ul>
  66.                   <li><a href="#">Link 3.1</a></li>
  67.                   <li><a href="#">Link 3.2</a></li>
  68.                   <li><a href="#">Link 3.3</a></li>
  69.                   <li><a href="#">Link 3.4</a></li>
  70.                </ul>
  71.             </li>
  72.             <li><a href="#">Link 4</a></li>
  73.          </ul>
  74.       </nav>
  75.    </body>
  76. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
radziopoke
post 16.07.2012, 15:51:59
Post #2





Grupa: Zarejestrowani
Postów: 125
Pomógł: 14
Dołączył: 2.06.2010

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

wystarczy że hover w linijce
[HTML] pobierz, plaintext 
  1. $('nav').removeClass('nojs').find('li').has('ul').hover(function(){
  2.       $(this).toggleClass('hover').children('ul').stop().fadeToggle('slow');
  3. });
[HTML] pobierz, plaintext

zamienisz na click. No i wtedy prawie działa tylko, że musisz jeszcze ukryć aktualnie rozwinięte pozycje menu gdyż jeżeli ich nie ukryjesz to nie ważne czy masz hover czy click to i tak obydwa mogą być aktywne razem.
Taki test wystarczy zrobić. Najedz na Link 2 a zaraz po tym na Link 3. i w miejscu gdzie powinno być podmenu pokażą ci się obydwie wersje podmenu (z Linku 2 i Linku 3)jedna na drugiej.
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 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 Wersja Lo-Fi Aktualny czas: 5.07.2025 - 20:53
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn