nitroo
15.04.2010, 09:02:04
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
15.04.2010, 09:05:10
Najprostsza metoda to sprawdzać $_GET['page'].
Coś takiego w linkach możesz umieścić. Możesz to dodawać do klasy, jak chcesz.
<?php echo ($_GET['page'] === 'news') ?
'active' : null ?>
nitroo
15.04.2010, 09:56:37
To każdy link z osobna mam ubrać w css? Nie ma jakiegoś automatu?
pedro84
15.04.2010, 10:02:56
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
15.04.2010, 10:07:49
Ok, zrobię w CSS normalny link, link z hover i current.
Ale jak dokładnie mam zastosować podany przez Ciebie kod?
pedro84
15.04.2010, 10:13:22
A chcesz sobie dodać klasę? To tak (możesz wtedy stosować wiele klas):
<a href="#" class="<?php echo ($_GET['page'] === 'news') ? 'active' : null ?>">Link
</a>
nitroo
15.04.2010, 10:30:54
Coś takiego?
.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;
}
width: 133px;
height: 35px;
float: left;
background-image: url('news_active.jpg');
background-repeat: none;
background-position: 0 35px !important;
}
<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
15.04.2010, 10:59:31
Musisz podać nazwę strony, tę którą przesyłasz GETem, np. news, etc.
nitroo
15.04.2010, 13:47:51
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
15.04.2010, 13:55:20
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
15.04.2010, 14:06:50
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
pedro84
15.04.2010, 17:06:09
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

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
17.04.2010, 13:43:58
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
17.04.2010, 13:56:10
Ustawiasz dla a
display:block;
height:XXpx;
width:XXpx;
background://obrazek;
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.