Forum PHP.pl > [HTML][PHP]problem z rozwijanym menu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][PHP]problem z rozwijanym menu

ifrit

25.11.2010, 22:50:21

Witam

mam następujący problem, rozwijane menu które w pliku html działa bez problemu w pliku php przestało się rozwijać. Tzn. jest tylko pierwszy(podstawowy) poziom menu, reszta się nie wyświetla. Kombinowałem z podpięciem w inny sposób bibliotek jquery ale bez skutku, jestem zupełnie "zielony" w tym temacie. Pogooglowałem trochę i nic nie znalazłem. Bardzo proszę o jakieś wskazówki. Załączam kod pliku php, plik styli i js pomijam bo jak już wspominałem pod html działa.

[PHP] pobierz, plaintext 
<?php $add_site = true; include "include/fc.php"; ?>
<?php include "include/tm.php"; ?>
<link href="css/style.css" rel="stylesheet" type="text/css">
<head><title><?php echo Title($_GET['ids']); ?></title><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript">
 
ddsmoothmenu.init({
	mainmenuid: "smoothmenu1", 
	orientation: 'h', 
	classname: 'ddsmoothmenu', 
	//customtheme: ["#1c5a80", "#18374a"],
	contentsource: "markup" 
})
 
ddsmoothmenu.init({
	mainmenuid: "smoothmenu2", 
	orientation: 'v', 
	classname: 'ddsmoothmenu-v', 
	//customtheme: ["#804000", "#482400"],
	contentsource: "markup" 
})
 
</script></head>
<body>
 
<?php include "include/naglowek.php"; ?> 
 
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Folder 0</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  </ul>
</li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li> 
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
		<ul>
    		<li><a href="#">Sub Item 3.1.1.1</a></li>
    		<li><a href="#">Sub Item 3.1.1.2</a></li>
		</ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
 
 
<?php include "include/stopka.php"; ?>
 
</body>
</html>
 
[PHP] pobierz, plaintext

markonix

25.11.2010, 23:10:08

W jquery bardzo prosto ten efekt zaimplementujesz.
Wystarczy użyć slideToggle funkcji rozwijającej i na odwrót (samo wykrywa czy element jest lub go nie ma).
Do tego funkcja next która sprawi że funkcja slideToggle zadziała na "następnym" elemencie <ul> (nie trzeba na sztywno nadawać name czy id dla każdego submenu).

Spróbuj coś napisać samemu. To praktycznie z 3 linijki kodu.

ifrit

25.11.2010, 23:18:36

dzięki za odpowiedz.
Problem w tym, że to są moje początki w tym temacie i nie wiem jak sie za to zabrać

Mógłbyś podać przykład sposobu który opisujesz? Czy trzeba jakoś specjalnie implementować jquery w php?

markonix

25.11.2010, 23:30:03

jQuery działa po stronie przeglądarki więc jest silniej związany z HTMLem.

Bibliotekę jQuery nie trzeba instalować, wystarczy zaincludować kodem

Kod

(tu includujesz z serwerów Googla starą wersje, ściągnij na FTP najnowszą (zminimalizowaną)).

Potem po prostu pooglądaj przykłady:
http://api.jquery.com/slideToggle/
Demo z przyciskiem (rozwija akapit i zwija).
Teraz wyobraź sobie działanie analogiczne na menu - zamiast buttona i akapitu jak w przykładzie to u Ciebie kliknięcie w akapit (nagłówek menu) i rozwinięcie listy (<ul>). Dla jQuery nie ma znaczenia, można odwoływać się do divów, akapitów, linków itd.

Spróbuj najpierw coś takiego napisać. Tam jest przykład który rozwinie wszystkie akapity, a Ty chcesz tylko "następny" czyli funkcja next() ale na początek spróbuj pierwszy fragment napisać, a potem pomogę z tym next.

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.