CSS Sprites. Jak opracować proste dynamiczne menu dla stron WWW

Posiadając witrynę internetową z wieloma podstronami, nieraz stajemy przed problemem, jak mądrze stworzyć menu. Chodzi nam zazwyczaj o to, by nie zajmowało ono dużo miejsca w witrynie i dawało możliwość przejścia na każdą podstronę z dowolnego jej miejsca. Dziś pokażemy Wam, jak takie menu stworzyć szybko za pomocą kaskadowych arkuszy stylów.

Rozwiązaniem dla tego problemu może być tzw. "drop down" menu. Jest to sprawdzona metoda nawigacji i można powiedzieć, że naturalna dla użytkowników ze względu na jej powszechność w systemach operacyjnych z rodziny Windows.

Nasze przykładowe menu wykonamy za pomocą liście HTML. Drugi poziom menu umieszczamy jako kolejną lista elementów, tuż za odnośnikiem, który jest jej rodzicem. Przykład:

<ul>
    <li><a href="#">Start</a></li>
    <li><a href="#">Drugi element</a></li>
    <li><a class="sub" href="#">Trzeci element</a>
<ul>
    <li><a href="#">Czwarty element</a></li>
    <li><a href="#">Piąty element</a></li>
    <li><a href="#">Siódmy element</a></li>
    <li><a href="#">Ósmy element</a></li>
</ul>
    </li>
    <li><a href="#">Dziewiąty element</a></li>
</ul>

Chcąc ukryć nasze submenu, korzystamy z własności CSS display. Przykład:

ul li ul {
display: none;
}

Teraz, aby menu pojawiało się po najechaniu wskaźnikiem myszy na zadany element listy, ustawiamy po prostu wartość block wtedy, kiedy jego rodzic przyjmie pseudoklasę :hover, czyli zostanie wskazany przez kursor myszki. Przykład:

ul li:hover ul {
display: block;
}

W tym miejscu należy zwrócić uwagę na fakt, że Internet Explorer 6 nie obsługuje właściwości :hover dla elementów innych niż a (link). Tutaj z pomocą przychodzi JavaScript, który za pomocą onmouseover zrobi to samo, co nowocześniejsze przeglądarki obsługują automatycznie.

Zachęcamy do obejrzenia przykładu i pobrania plików.

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

12 skomentuj »

Komentarze

#1 Carlos 2009-02-23 12:13:32 0
Powiedzenie, że "drop down" menu jest sprawdzoną i naturalną metodą

nawigacji jest nietrafione. Takie rozwiązanie ma swoje wady. Główna z

nich to fakt, że zamiast pokazywać pewne informacje (linki), ukrywa je.

Przez co użytkownik może nie dotrzeć na jakąś stronę bo nie będzie

wiedział, że odnośnik do niej znajduje się w danym menu. Elementy

rozwijalne nadają się do zastosowania jedynie w miejscach gdzie

użytkownik spodziewa się jaka jest zawartość takiej listy (np. do

wyboru kraju, miasta, płci), ale stosowanie go jako elementu

nawigacyjnego jest niewskazane. Istnieje o wiele więcej lepszych

rozwiązań.
IP: 157.158.57.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)
#2 Macias 2009-02-24 12:35:15 0
Jakie są te lepsze rozwiązania?
IP: 88.220.181.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.19 (KHTML, like Gecko) Chrome/1.0.154.48 Safari/525.19
#3 greg606 2009-02-25 19:23:47 0
to artrykuł o dropdown menu czy css sprites
IP: 195.206.115.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 GTB5 FirePHP/0.2.4
#4 Carlos 2009-02-26 10:39:02 0
Najlepsza i zarazem najstarsza metoda nawigacji to zwykłe menu,

widoczne w całości, zawierające odnosniki uporządkowane w jakąś

sensowną kolejność. Stronę internetową można zorganizować wg wielu

różnych czynników i to w dużej mierze decyduje o postaci menu. Mówiąc

krótko - każda forma menu, która prezentuje wszystkie odnośniki od razu

i nie ukrywa ich - jest dobra. :)
IP: 157.158.57.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)
#5 Arti 2009-03-01 10:45:43 0
Witam,

A czy mógłby mi ktoś podpowiedzieć jak to przerobić na poziome menu ?

Pozdrowienia,

Arti
IP: 83.143.42.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6
#6 ajdyna 2009-03-01 14:43:33 2
Do #menu ul li dodaj float:left, a pozniej manewruj top i left dla #menu ul li ul
IP: 94.254.137.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.19 (KHTML, like Gecko) Chrome/1.0.154.48 Safari/525.19
#7 Arti 2009-03-01 20:43:28 0
A mógłbym prosić o ten kawałek przerobionego kodu...

Pozdrowienia,

Arti
IP: 83.143.42.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6
#8 pebu 2009-03-02 12:20:54 0
Trzeba jeszce pamiętać że :hover nie działa w IE6 poza linkiem i trzeba hacki stosować.
IP: 217.173.188.[...] Opera/9.63 (Windows NT 5.1; U; pl) Presto/2.1.1
#9 pako^® 2009-03-03 18:02:54 0
@pebu: specjalnie dla ciebie niedługo napiszę kurs czytania ze zrozumieniem ;[
IP: 213.156.111.[...] Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.6) Gecko/2009020409 Iceweasel/3.0.6 (Debian-3.0.6-1)
#10 ktos 2009-03-12 17:26:05 0
Niech ocenę tego artykułu stanowi fakt, że IE6 można zmusić do akceptacji efektu hover, poprzez podanie dla niego odpowiedniego pliku. Wnioskując po propozycji stosowania onmouseover, tą całą poradę należy wywalić do kosza i wszystko zrobić na onmouseover (broń boże nie używać onmouseout!).
IP: 87.207.227.[...] Mozilla/5.0 (X11; U; Linux i686; pl-PL; rv:1.9.0.6) Gecko/2009020911 Ubuntu/8.10 (intrepid) Firefox/3.0.6
#11 emceha 2009-06-05 19:40:29 0
Świetnie, niech ktoś jeszcze powie co to ma wspólnego z CSS sprites?>
IP: 213.134.186.[...] Opera/9.64 (Windows NT 5.1; U; en) Presto/2.1.1
#12 Sagit 2012-04-24 23:04:09 0
takie menu sobie zrobiłem :) - luknijcie : http://www.zarabiaj-online.ugu.pl/
IP: 213.25.141.[...] Mozilla/5.0 (Windows NT 5.1; rv:11.0) Gecko/20100101 Firefox/11.0

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.