Forum Debian Users Gang

takie coś?
Stare co prawda, ale chyba jeszcze aktualne...

Warto dodać że dzięki selektorom CSS3 (:nth-child, + etc), obsługiwanym już przez każdą liczącą się przeglądarkę, nie trzeba każdej pozycji w menu nadawać osobnej klasy, co znacznie upraszcza kod HTML.

ale to ma sie rozsuwać a nie wyświetlać obok

Kwestia wypozycjonowania elementów w CSS. Chyba identyczny sposób, ale z elementami pojawiającymi się pod pozycjami menu:
http://www.cafewebmaster.com/web2-style-css-dynamic … ground-images

Ostatnio edytowany przez Minio (2010-08-02 22:51:46)

Rumi napisał(-a):

Na js sie nie znam a jquery ukrywa i pokazuje w menu zrobionym na divach

Przykładowy (i poglądowy) skrypt z użyciem JQuery. Zwróć uwagę na poprawną strukturę znaczników. Elementów <a> użyłem po to, żeby trochę podrasować całość - dodać podreślenia dla punktów niepustych itd. Właściwie to skrypt można ograniczyć do 4 wierszy tyczących się obsługi kliknięcia(które zresztą można zastąpić każdym innym zdarzeniem). Jeśli chcesz, aby rozwinięta mogła być tylko jedna lista jednocześnie, rozszerz odpowiednio obsługę zdarzenia (może to być nieco skomplikowane, jeśli listy są wielopoziomowe).

 <ul>
 <li><a>1</a>
   <ul>
     <li><a>1.1</a></li>
     <li><a>1.2</a></li>
   </ul>
 </li>
 <li><a>2</a>
   <ul>
     <li><a>2.1</a></li>
     <li><a>2.2</a>
     <ul>
       <li><a>2.2.1</a></li>
       <li><a>2.2.2</a></li>
     </ul>
     </li>
   </ul>
 </li>
</ul>

$(document).ready(function(){
  // Szybkość animacji.
  var speed = 200;
  // Domyślnie zwijamy wszystkie listy oraz podkreślamy te punkty, które listy podrzędne (i ustwiamy rodzaj kursora).
  $('li ul').css('display', 'none').parent().children('a:first-child').css('text-decoration', 'underline').css('cursor', 'hand');
  // Punkt główny: obsługa kliknięcia - zwijanie i rozwijanie list.
  $('li').click(function() {
      $(this).children('ul').toggle(speed);
      return false;
  });
  
});

Ostatnio edytowany przez Contravene (2010-08-03 00:19:55)