[CSS] Menu z active i current Opcje

[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.

[PHP] pobierz, plaintext 
<?php echo ($_GET['page'] === 'news') ? 'active' : null ?>
[PHP] pobierz, plaintext 

Ten post edytował pedro84 15.04.2010, 09:05:24

[nitroo]

To każdy link z osobna mam ubrać w css? Nie ma jakiegoś automatu?

[pedro84]

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):

[HTML] pobierz, plaintext 
<a href="#" class="<?php echo ($_GET['page'] === 'news') ? 'active' : null ?>">Link</a>
[HTML] pobierz, plaintext 

[nitroo]

Coś takiego?

[PHP] pobierz, plaintext 
.menu_aktualnosci {
  width: 133px;
  height: 35px;
  float: left;
  background-image: url('news_none.jpg');
  background-repeat: none;
  background-position: 0 0;
}
.menu_aktualnosci:hover {
  width: 133px;
  height: 35px;
  float: left;
  background-image: url('news_hover.jpg');
  background-repeat: none;
  background-position: 0 35px !important;
}
.menu_aktualnosci:current {
  width: 133px;
  height: 35px;
  float: left;
  background-image: url('news_active.jpg');
  background-repeat: none;
  background-position: 0 35px !important;
}
[PHP] pobierz, plaintext 

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

Na pewno popełniłem błąd w classie w Php...

Ten post edytował nitroo 15.04.2010, 10:31:29

[pedro84]

Musisz podać nazwę strony, tę którą przesyłasz GETem, np. news, etc.

[nitroo]

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]

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]

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

[pedro84]

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

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]

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

[CSS] pobierz, plaintext 
display:block;
height:XXpx;
width:XXpx;
background://obrazek;
text-indent:-999em;
[CSS] pobierz, plaintext 

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.