Menu poziome + przesuwające się tło


8 maja 2011 / Michał Kortas


Korzystając z modułu RokNavMenu, wykonanego przez zespół RocketTheme, bardzo spodobał mi nie pomysł na prezentację tego dodatku, a mianowicie, po najechaniu kursorem na pozycję w menu, tło pod nią, płynnie przesuwało się do wskazanego przez nas miejsca. Efekt ten nie jest trudno otrzymać, dlatego postanowiłem Wam go pokazać. Wykorzystamy w tym celu biblioteki jQuery. A więc do pracy!

Na początku pobierzmy paczkę z potrzebnymi plikami z naszej Pobieralni.

W sekcji HEAD naszego dokumentu (x)html wstawmy następującą treść:

Następnie ustawmy odpowiedni kod CSS aby sformatować nasze menu:

W części BODY musimy umieścić zwyczajną listę:

Efekt działa na wszystkich wiodących przeglądarkach. W IE od wersji > 6.5

ZOBACZ DEMO



3 odpowiedzi na “Menu poziome + przesuwające się tło”

  1. Nicko pisze:

    Jak zmienić kolory czcionki w menu , żeby opcje menu nie były podkreślone i miały określony kolor?

  2. Michal Jaracz pisze:

    mógł byś mi powiedzieć czy jest jakaś różnica pomiędzi (x) html a html. a tak poza tym to jestem całkiem zielony w tym temacie niedawno zacząłem uczyć się javascrypt-u ale potrzebuję jakiegoś turtolialu do nauki robienia menu poziomego rozwijanego dla osób kompletnie zielonych w tym temacie mógł byś taki artykuł stworzyć lub polecić jakąś dobrą stronkę z góry dziękuję.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *