Twoje strony internetowe

Popraw dowolny element na Twojej stronie

CSS Sprites. Jak opracować proste dynamiczne menu dla stron WWW – Webhosting.pl. Portal technologii internetowych

2009-02-23 10:26  |  Grzegorz Ajdyna

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

za pomocą CSS Sprites. Jak opracować proste dynamiczne menu dla stron WWW – Webhosting.pl. Portal technologii internetowych.

posted by admin in z sieci and have Comments (3)

3 comments

  1. Komentarz by http://www.youtube.com/ on 2 marca 2014 at 00:36

    This is my first time pay a quick visit at here
    and i am actually pleassant to read everthing at alone place.

    []

  2. Komentarz by Stephany on 6 maja 2014 at 06:09

    I go to see each day a few sites and blogs to read content, however this web site provides quality based
    content.

  3. Komentarz by admin on 6 maja 2014 at 11:42

    Thank you.
    I wonder why so many comments in English as a Polish blog.

You must be logged in to post a comment.