Jeśli menu, to tylko CSS!

[Paweł 'krzywy' Krzyworączka]

Jak w temacie.
Wiele osób tworząc menu na stronie WWW, wykorzystuje różne "dziwne" techniki, czyli najczęściej różnego typu skrypty. Pytam: po co? Najczęściej najlepszym rozwiązaniem jest stworzenie menu tekstowego i sformatowanie go z użyciem stylów (czyli CSS).

Takie menu nie dość że może super wyglądać, to będzie dodatkowo bardzo funkcjonalne i przyjazne dla wyszukiwarek (!)

Mogę polecić naprawdę funkcjonalny serwis, który powstał całkiem niedawno:
http://www.funduszeeuropejskie.gov.pl/S ... lowna.aspx
Naprawdę przemyślany portal. Jestem pod wrażeniem.

[Paweł Landzberg]

Też jestem zwolennikiem menu z css. Same zalety posiada i masz pewność, że u każdego będzie działać poprawnie (w sensie, że będzie możliwe użycie tego każdego przycisku menu, a to czy będzie poprawnie wyglądać czy się krzaczyć w różnych przeglądarkach to już inna sprawa).

Ps. Krzywy, do menu, które podałeś w linku, podczepiany jest Javascript, więc bez niego nie działa dobrze.

[Paweł 'krzywy' Krzyworączka]

Rzeczywiście! Dzięki, że zwróciłeś na to uwagę.
Zresztą zauważyłem, że jesteś cholernie spostrzegawczy i Bardzo dobrze!

Ale serwis, który podałem, jest świetnie dopracowany.

[Paweł Landzberg]

Staram się jak mogę

Fakt samo rozmieszczenie i ogólnie interface wygląda przejrzyście i jest intuicyjny w użytkowaniu.
A najbardziej podoba mi się wersja dla niedowidzących Mało kto stara się, aby witryna była użyteczna nie tylko dla przeciętnego użytkownika. Duży plus za to dla tego serwisu

[Jerzy Sempowicz]

Przyznam , że jestem tez pod wrażeniem. Wersja dla niedowidzących ! Chyba pierwszy raz widzę tego typu rozwiązanie. Myślę , że wielki szacun dla twórców. Ja osobiście, po operacji laserowej oczu, gorzej widzę takie zestawiania kolorów, ale po odpowiednim powiększeniu to nawet przed operacją bym widział

[bartekmedon]

To jest bardzo fajne rozwiązanie http://www.lwis.net/free-css-drop-down-menu/

[Paweł 'krzywy' Krzyworączka]

Dzięki Bartek!
Super serwisik. A menu to chyba nawet zaraz wykorzystam. Właśnie myślę nad pewnym serwisem i takie menu będzie jak znalazł

[kviat]

Witam,
troszkę odświeżę temat:) Może nie wszyscy znają http://www.cssplay.co.uk/menus/. Bardzo rozbudowana strona związana z CSS. Większość rozwiązań jest zgodna ze standardami nawet w magicznym IE6 wyglądają jak powinny. Część rozwiązań jest darmowych inne są za "dotację". Polecam stronkę zarówno znawcom cssa jak i początkującym każdy powinien znaleźć coś dla siebie. Pierwszy krótki post. Niedługo skrobnę coś o sobie i mam nadzieję, że zagoszczę tutaj na dłużej. Pozdrowienia dla całego forum;)

[KamilG]

Witam wszystkich.

Mam pytanie. Jak zrobić menu, które po kliknięciu w link będzie pokazywać gdzie jesteśmy. Coś takiego jak ma Pan Paweł na krzywy.pl

Chodzi o to, że jak się wejdzie na jakąś stronę, to w menu widać, że jest pogrubiony link do niej.

W Internecie znalazłem taką odpowiedz:

"to chcesz, żeby link działu w którym się obecnie znajdujemy był progrubiony, itd, tak?
tutaj raczej css nie pomoże. Ale piszesz o includach, więc masz php, więc zrób sobie w css dodatkową klasę (nadaj jej wszystkie cechy, które ma a:hover

Kod: Zaznacz cały
.menu:hover, .jakastamnowaklasa {FONT-FAMILY: Verdana;
FONT-SIZE: 9px;
FONT-STYLE: normal;
FONT-WEIGHT: bold;
TEXT-DECORATION: none;
COLOR: #669900;}


teraz w zależności w którym dziale się znajdujemy wypisujesz przy odpowiednim linku klasę

Kod: Zaznacz cały
<a href="" class="jakastamnowaklasa">link</a>


a reszta linków będzie miała

Kod: Zaznacz cały
<a href="" class="menu">inny link</a>


jasne? "


Tylko że ja nie wiem gdzie wkleić ten kod <a href="" class="jakastamnowaklasa">link</a> w moim Wordpressie.

Czy wie ktoś może gdzie to wkleić?

Z gróry dziękuje za pomoc
Kamil

[it-spleen]

W przypadku WP nie trzeba tworzyć inne klasy.
Wystarczy użyć (dopisać w CSS'ie) dla klasy .current_page_parent parametry.
Czyli w podanym przez ciebie przykładzie:
.menu:hover, .current_page_parent
{FONT-FAMILY: Verdana;
FONT-SIZE: 9px;
FONT-STYLE: normal;
FONT-WEIGHT: bold;
TEXT-DECORATION: none;
COLOR: #669900;}