Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Menu z active i current
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
nitroo
Witam.

Nie mam pomysłu, jak zrobić menu oparte na grafice tak, aby spełniało moje wymagania. Mam trzy grafiki do każdego z działów menu: np. news_none.jpg, news_active.jpg i news_current.jpg, foto_none.jpg, foto_active.jpg, czy foto_current.jpg itp. Chciałbym, aby w moim menu składającym się z 7 linków (News | Foto | Dział1 | Dział2 | ...) było tak:
- wszystkie linki to pliki grafika: news_none, foto_none itp..
- podświetlony link to grafika: news_active, foto_active itp.
- wybrany link to grafika: news_current, foto_current itp., ale już bez hierłącza

Nie wiem również, jak zrobić, aby jakoś dynamicznie kod wyglądał, bo gdy wybiorę np. news, czyli strona.php?page=1, to ma się wybrać NEWS, dla page=2 foto itp.
pedro84
Najprostsza metoda to sprawdzać $_GET['page'].

Coś takiego w linkach możesz umieścić. Możesz to dodawać do klasy, jak chcesz.
  1. <?php echo ($_GET['page'] === 'news') ? 'active' : null ?>
nitroo
To każdy link z osobna mam ubrać w css? Nie ma jakiegoś automatu?
pedro84
Cytat(nitroo @ 15.04.2010, 10:56:37 ) *
To każdy link z osobna mam ubrać w css? Nie ma jakiegoś automatu?


No hover, to mam nadzieję, wiesz jak zrobić. Do tego dodajesz sobie klasę dla każdego linku, jak jest aktywny i zmieniasz tylko obraz tła. 5 minut roboty.
nitroo
Ok, zrobię w CSS normalny link, link z hover i current.

Ale jak dokładnie mam zastosować podany przez Ciebie kod?
pedro84
A chcesz sobie dodać klasę? To tak (możesz wtedy stosować wiele klas):
  1. <a href="#" class="<?php echo ($_GET['page'] === 'news') ? 'active' : null ?>">Link</a>
nitroo
Coś takiego?

  1. .menu_aktualnosci {
  2. width: 133px;
  3. height: 35px;
  4. float: left;
  5. background-image: url('news_none.jpg');
  6. background-repeat: none;
  7. background-position: 0 0;
  8. }
  9. .menu_aktualnosci:hover {
  10. width: 133px;
  11. height: 35px;
  12. float: left;
  13. background-image: url('news_hover.jpg');
  14. background-repeat: none;
  15. background-position: 0 35px !important;
  16. }
  17. .menu_aktualnosci:current {
  18. width: 133px;
  19. height: 35px;
  20. float: left;
  21. background-image: url('news_active.jpg');
  22. background-repeat: none;
  23. background-position: 0 35px !important;
  24. }


  1. <a href="index?page=1" class="<?php echo ($_GET['page'] === '1') ? 'menu_aktualnosci' : null ?>"><img src="news_none.jpg" alt=""></a>


Na pewno popełniłem błąd w classie w Php...
pedro84
Musisz podać nazwę strony, tę którą przesyłasz GETem, np. news, etc.
nitroo
Cytat(pedro84 @ 15.04.2010, 11:59:31 ) *
Musisz podać nazwę strony, tę którą przesyłasz GETem, np. news, etc.

Zgadza się, mój błąd, ale i tak nie działa. Chyba mam błąd w css?
pedro84
Cytat(nitroo @ 15.04.2010, 14:47:51 ) *
Zgadza się, mój błąd, ale i tak nie działa. Chyba mam błąd w css?


Teraz dopiero widzę, że używasz <img> wewnątrz <a>. Musisz w takim razie zmieniać <img>, chyba, że dodasz w klasie dla hovera i linku aktywnego display:none; dla <img>.
nitroo
Cytat(pedro84 @ 15.04.2010, 14:55:20 ) *
Teraz dopiero widzę, że używasz <img> wewnątrz <a>. Musisz w takim razie zmieniać <img>, chyba, że dodasz w klasie dla hovera i linku aktywnego display:none; dla <img>.

Mógłbyś pokazać mi do tego gotowy kod? Bo gdy dodałem do <img> wewnątrz <a> display:none, to nie pokazuje się nic sad.gif
pedro84
Cytat(nitroo @ 15.04.2010, 15:06:50 ) *
Mógłbyś pokazać mi do tego gotowy kod? Bo gdy dodałem do <img> wewnątrz <a> display:none, to nie pokazuje się nic sad.gif


No tak, bo musisz to ustawić dla klasy hovera, choć z drugiej strony to też nie najlepsze rozwiązanie.

Generalnie, jeśli stosujesz grafikę na menu, to raczej poleciłbym ją jako tło, a nie obrazek. Co Ty na to?
nitroo
Cytat(pedro84 @ 15.04.2010, 18:06:09 ) *
No tak, bo musisz to ustawić dla klasy hovera, choć z drugiej strony to też nie najlepsze rozwiązanie.

Generalnie, jeśli stosujesz grafikę na menu, to raczej poleciłbym ją jako tło, a nie obrazek. Co Ty na to?

Nigdy nie wiedziałem, jak zrobić link, gdy obrazek jest tłem...
pedro84
Ustawiasz dla a
  1. display:block;
  2. height:XXpx;
  3. width:XXpx;
  4. background://obrazek;
  5. text-indent:-999em;


Z drugiej strony jednak, powinienes sobie poradzić mając img jako link: dla linku normalnego jest img, dla hovera nadajesz display:none dla img, dla active inny obrazek, powinno działac.
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.