Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS][JavaScript?] Menu - aktywna aktualnie wyswietlana karta
Forum PHP.pl > Forum > Przedszkole
BatGraf
Cześć smile.gif

Mam problem tego typu:

Chciałbym zrobić menu takie jak na stronie http://www.tillytec.de/de/news.html -
Chodzi o to, żeby zakładka, której dotyczy podstrona, była aktywna (inne tło) po wejściu na podstronę.

Napisałem [JavaScript?] bo nie wiem, czy można to osiągnąć w css, czy musi być w JS?

Bardzo proszę o pomoc i z góry dzięki smile.gif
erix
Zostaje JS. Zapisuj ciastko z bieżącą podstroną.
sweter
Użyj CSS-ów
Zakładki przechowaj w liście i użyj :hover (który odpowiada za to co ma się zrobić z obiektem ponajechaniu myszką), np.:
  1. ul li:hover{
  2. background-image:url('adres_obrazka_z_aktywną_zakładką')
  3. }

smile.gif
BatGraf
erix - kombinuję z jQuery, ale wolałbym bez JS. Jeśli natomiast trzeba będzie, to będzie w JS smile.gif

sweter - nie wiem czy dobrze rozumiem, ale to sposób na efekt po najechaniu? To znam doskonale smile.gif Chodzi mi o to, żeby po kliknieciu na zakładkę np "podstrona1" i przejściu na "podstrona1" zmieniła się na taką "wyróżnioną" z tłem innym niż .a {} czy a:hover {}

______________

W JavaScript znalazłem całkiem fajne menu z jQuery http://webmuch.com/demos/jQ_animated_navbar/navbar.html


thek
A tak trudno pomyśleć, że skoro przechodzisz na daną podstronę to wiesz CO kliknąłeś i ustawić CSS dla tego elementu menu "na sztywno"? winksmiley.jpg Ja sobie definiuję klasę "chosen" i ustawiam ją temu wybranemu elementowi.
BatGraf
Rany, chyba właśnie mi o to chodzi.
Napisz, proszę trochę szerzej, bo wydaje mi się, że nie wiem jak to zrobić.

Już mi ręce opadły - zrezygnowałem z jQuery, więc może Ty mi pomożesz smile.gif

Zaczynam myśleć nad phpem, ale nie wiem czy to słuszne rozwiazanie - uzaleznić tło od tego co przesyła GET
thek
Akurat robiłem to we frameworku, więc w czystym pho może to wyglądać nieco inaczej... Skoro znam podstronę na ktorej sie znajduję, to wiem tak naprawdę jaki element menu ja wywołał. Ja mam dwa menu, a właściwie menu i grupę kilku submenu. Każde z submenu ma początkowo display:none, ale po najechaniu na element menu, który posiada submenu danemu submenu uwidaczniam na stronie. Gdy kliknę na jakiś link z submenu przenosi mnie do danej podstrony a jednocześnie jej kontroler wysyła do widoku informację o tym z jaką pozycją submenu ma do czynienia. Widok przechwytuje tę informacje i dokleja do tego elementu zdefiniowaną przeze mnie klasę, która oznacza zaznaczenie.
  1. <div id="menu">
  2. <ul class="menu">
  3. <li><a href="" onmouseover="submenu('1');return"<?php echo ($kontrolerG == "1") ? ' class="active"' : '' ?>>link</a></li>
  4. <li><a href="" onmouseover="submenu('2');return"<?php echo ($kontrolerG == "2") ? ' class="active"' : '' ?>>link</a></li>
  5. <li><a href="" onmouseover="submenu('3');return"<?php echo ($kontrolerG == "3") ? ' class="active"' : '' ?>>link</a></li>
  6. <li><a href="" onmouseover="submenu('4');return"<?php echo ($kontrolerG == "4") ? ' class="active"' : '' ?>>link</a></li>
  7. <li><a href="" onmouseover="submenu('5');return"<?php echo ($kontrolerG == "5") ? ' class="active"' : '' ?>>link</a></li>
  8. </ul>
  9. </div>
  10. <div id="submenu1" style="<?php echo ($kontrolerG == "1") ? 'display:block;' : 'display:none;' ?>">
  11. <ul class="menu">
  12. <li><a href=""<?php echo ($kontrolerP == "1") ? ' class="active"' : '' ?>>link</a></li>
  13. <li><a href=""<?php echo ($kontrolerP == "2") ? ' class="active"' : '' ?>>link</a></li>
  14. <li><a href=""<?php echo ($kontrolerP == "3") ? ' class="active"' : '' ?>>link</a></li>
  15. <li><a href=""<?php echo ($kontrolerP == "4") ? ' class="active"' : '' ?>>link</a></li>
  16. <li><a href=""<?php echo ($kontrolerP == "5") ? ' class="active"' : '' ?>>link</a></li>
  17. </ul>
  18. </div>
  19. <div id="submenu2" style="<?php echo ($kontrolerG == "2") ? 'display:block;' : 'display:none;' ?>">
  20. <ul class="menu">
  21. <li><a href=""<?php echo ($kontrolerP == "1") ? ' class="active"' : '' ?>>link</a></li>
  22. <li><a href=""<?php echo ($kontrolerP == "2") ? ' class="active"' : '' ?>>link</a></li>
  23. <li><a href=""<?php echo ($kontrolerP == "3") ? ' class="active"' : '' ?>>link</a></li>
  24. <li><a href=""<?php echo ($kontrolerP == "4") ? ' class="active"' : '' ?>>link</a></li>
  25. </ul>
  26. </div>
  27. <div id="submenu3" style="<?php echo ($kontrolerG == "3") ? 'display:block;' : 'display:none;' ?>">
  28. <ul class="menu">
  29. <li><a href=""<?php echo ($kontrolerP == "1") ? ' class="active"' : '' ?>>link</a></li>
  30. <li><a href=""<?php echo ($kontrolerP == "2") ? ' class="active"' : '' ?>>link</a></li>
  31. <li><a href=""<?php echo ($kontrolerP == "3") ? ' class="active"' : '' ?>>link</a></li>
  32. <li><a href=""<?php echo ($kontrolerP == "4") ? ' class="active"' : '' ?>>link</a></li>
  33. </ul>
  34. </div>
  35. <div id="submenu4" style="<?php echo ($kontrolerG == "4") ? 'display:block;' : 'display:none;' ?>">
  36. <ul class="menu">
  37. <li><a href=""<?php echo ($kontrolerP == "1") ? ' class="active"' : '' ?>>link</a></li>
  38. <li><a href=""<?php echo ($kontrolerP == "2") ? ' class="active"' : '' ?>>link</a></li>
  39. <li><a href=""<?php echo ($kontrolerP == "3") ? ' class="active"' : '' ?>>link</a></li>
  40. <li><a href=""<?php echo ($kontrolerP == "4") ? ' class="active"' : '' ?>>link</a></li>
  41. <li><a href=""<?php echo ($kontrolerP == "5") ? ' class="active"' : '' ?>>link</a></li>
  42. </ul>
  43. </div>
  44. <div id="submenu5" style="<?php echo ($kontrolerG == "5") ? 'display:block;' : 'display:none;' ?>">
  45. <ul class="menu">
  46. <li><a href=""<?php echo ($kontrolerP == "1") ? ' class="active"' : '' ?>>link</a></li>
  47. <li><a href=""<?php echo ($kontrolerP == "2") ? ' class="active"' : '' ?>>link</a></li>
  48. <li><a href=""<?php echo ($kontrolerP == "3") ? ' class="active"' : '' ?>>link</a></li>
  49. <li><a href=""<?php echo ($kontrolerP == "4") ? ' class="active"' : '' ?>>link</a></li>
  50. <li><a href=""<?php echo ($kontrolerP == "5") ? ' class="active"' : '' ?>>link</a></li>
  51. </ul>
  52. </div>

$kontrolerG to pozycja w menu głównym, zaś $kontrolerP to pozycja w submenu. Para tych dwóch oznacza dla mnie konieczność doklejenia klasy active dla konkretnego elementu w submenu. W momencie gdy jest podana tylko jedna z liczb oznacza to przyjęcie 1 jako domyślnego drugiego parametru.
A więc 5,3 to "zakolorowanie" 5 elementu w menu i 3 elementu w jego submenu, zaś wywolanie 4 oznacza to samo dla 4 elementu w menu i domyślnie 1 w jego submenu. Dodatkowo, jak może widać, jest skrypt submenu(x), który odpowiada za wyświetlanie właściwego submenu przy najechaniu na element menu. Działa to na zasadzie podobnej do zakładek. Oczywiście mi jest łatwo bo mam nemu na sztywno, a ktoś może je mieć generowane, ale wtedy może sie odnosić id lub czymś co jednoznacznie identyfikowałoby element do zaznaczenia. Całość oczywiście ostylowana tak, że tworzy zgrabne menu poziome. Nie jest to trudne do zrobienia, tylko trzeba zrozumieć ideę, która stoi za takim podejściem. Ale to jest akurat rozwiązanie dobre gdy nie ma wielu zagłębień, bo inaczej robi się zamieszanie ze względu na ogromną ilość linków będących wtedy obok siebie. A każdy wie, że zbyt dużo linków na jednej stronie (podstronie), źle z reguły wpływa na jej pozycjonowanie i obniża ranking.
BatGraf
Dzięki, na pewno się przyda, nie tylko dla mnie.
Rozwiązałem to trochę za pomocą sznurka i drutu, ale działa i to nawet całkiem dobrze smile.gif

Dziś już ciut późno, ale jutro spróbuję Twojego sposobu, bo mój jest trochę kłopotliwy w eksploatacji - dodawanie , zmiana linków itp.

Tak czy inaczej, dzięki wszystkim smile.gif
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.