Forum PHP.pl > Przerobienie menu jQuery

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki

hitmanskdm

13.07.2012, 10:10:10

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 
<!DOCTYPE html>
<html>
   <head>
      <title>Test</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
      <style>
nav ul {
   position:absolute;
   top:0;
   margin:0;
   padding:0;
}
nav li {
   list-style-type:none;
   width:100px;
}
nav a {
   color:grey;
   text-decoration:none;
}
nav a:hover,
nav li.hover>a {
   color:black;
}
nav li ul {
   display:none;
   margin-left:100px;
}
nav.nojs li:hover>ul {
   display:block;
}
 
      </style>
      <script>
$(function(){
   $('nav').removeClass('nojs').find('li').has('ul').hover(function(){
      $(this).toggleClass('hover').children('ul').stop().fadeToggle('slow');
   });
});
      </script>
   </head>
   <body>
      <nav class="nojs">
         <ul>
            <li><a href="#">Link 1</a></li>
            <li>
               <a href="#">Link 2</a>
               <ul>
                  <li>
                     <a href="#">Link 2.1</a>
                     <ul>
                        <li><a href="#">Link 2.1.1</a></li>
                        <li><a href="#">Link 2.1.2</a></li>
                        <li><a href="#">Link 2.1.3</a></li>
                        <li><a href="#">Link 2.1.4</a></li>
                        <li><a href="#">Link 2.1.5</a></li>
                     </ul>
                  </li>
                  <li><a href="#">Link 2.2</a></li>
                  <li><a href="#">Link 2.3</a></li>
               </ul>
            </li>
            <li>
               <a href="#">Link 3</a>
               <ul>
                  <li><a href="#">Link 3.1</a></li>
                  <li><a href="#">Link 3.2</a></li>
                  <li><a href="#">Link 3.3</a></li>
                  <li><a href="#">Link 3.4</a></li>
               </ul>
            </li>
            <li><a href="#">Link 4</a></li>
         </ul>
      </nav>
   </body>
</html>
[HTML] pobierz, plaintext

radziopoke

16.07.2012, 15:51:59

wystarczy że hover w linijce

[HTML] pobierz, plaintext 
$('nav').removeClass('nojs').find('li').has('ul').hover(function(){
      $(this).toggleClass('hover').children('ul').stop().fadeToggle('slow');
});
[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.

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.