Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Podświetlanie aktywnej strony w menu.
Forum PHP.pl > Forum > Przedszkole
BulwiaseK
Witam.
Mam zamiar stworzyć szablon do strony internetowej z tym, że nie mogę rozwikłać jednego problemu:
Jak stworzyć menu, które po kliknięciu na odsyłacz wyświetla wybraną stronę, a dodatkowo podświetla tę pozycję?
ixpack
Przykład:

Mam 3 linki menu:
1. Klocki (adres będzie index.php?p=klocki)
2. Spłóczki (jw. p=sploczki)
3. Lizaki (jww. p=lizaki)

Teraz get'em pobieram p, czyli mając aktywną podstronę Klocki - mam też odpowiednie id - klocki wink.gif
Sprawdzam linki w menu, jeżeli któryś ma id == klocki, to odpowiednio go styluję.

To oczywiście proste - łopatologiczne rozwiązanie.
BulwiaseK
Myślałem o czymś, co nie wymaga użycia php'a - JS, JQuery, Ajax etc.
markonix
Ajax wymaga PHP.

Można to zrobić w czystym CSS. Zerknij na moją stronę i wyłącz skrypt - wtedy działa sam CSS na podstawie id body.

Tu masz CSS.
Kod
#home #menu li a.home,
#oferta #menu li a.oferta,
#o_nas #menu li a.o_nas,
#kontakt #menu li a.kontakt {
background : #616161 url(images/trcorner.gif) no-repeat top right;
}


O co chodzi?
Po prostu gdy jesteś na stronie gdzie body ma ID "home" to poniższe formatowanie ma wpływ tylko na link #home #menu li a.home i tylko go wyróżnia określonym formatowaniem (tutaj przykład zmiany tła).
BulwiaseK
Czy mógłbyś opisać bardziej działanie kodu? Nie chcę używać czegoś, czego działania nie rozumiem. Domyślam się, że chodzi tutaj o selektory potomkóe etc., ale nic więcej.
markonix
No tak jak powiedziałeś. Po polsku ta reguła mówi.
Wyróżnij (oznacz jako aktywny) odnośnik (a) o określonej klasie, który znajduje się w liście (li), która to ta lista znajduje się w kontenerze o ID (#menu), który to ten kontener znajduje się w kontenerze o określonym ID (u mnie jest to ID przypisane do body).

Dla lepszej przejrzystości ID BODY = KLASA LINKA ale nie ma to znaczenia.
Id #menu też nie ma tu znaczenia, po prostu u mnie to powinno być ale nie jest to częścią tego sposobu.

Nadal nie rozumiesz? No to firegub w dłoń i baw się CSSem na żywo.
BulwiaseK
markonix, już rozumiem. Nie od tej strony czytałem zawartość kodu.

Do zamknięcia.
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.