Jak stworzyć przesuwające się menu na stronie WWW za pomocą jQuery?
Efektowne menu to często jeden z najważniejszych aspektów strony internetowej. Animowane, podświetlane, wyłaniane - ilu projektantów, tyle wizji i realizacji. Dziś przedstawimy przesuwany typ nawigacji.
Rozwiązanie bazuje przede wszystkim na bibliotece jQuery i arkuszu stylów CSS. Dodatkowo, do budowy struktury dokumentu wykorzystamy HTML.
Efekt, który uzyskamy, będzie polegał na przesunięciu i ukryciu jednego elementu, a na jego miejsce wsunięciu i pojawieniu się elementu wyświetlanego przy najechaniu kursorem na odpowiednią część menu.
Z założenia animację uzyskamy opierając się na znacznikach listy, gdzie każdy punkt będzie oznaczał pozycję w naszej grupie nawigacji.
<ul>
<li><a href="#"><span>1</span><span>hover</span></a></li>
<li><a href="#"><span>2</span><span>hover</span></a></li>
<li><a href="#"><span>3</span><span>hover</span></a></li>
<li><a href="#"><span>4</span><span>hover</span></a></li>
</ul>
Domyślnie rozwiązanie będzie miało operować na tle wykorzystującym CSS i zmieniający się tekst. Pierwszy znacznik span zawiera ciąg widoczny po załadowaniu strony, a drugi po najechaniu myszką na element menu. Nic jednak nie stoi na przeszkodzie, aby do każdej z pozycji przyporządkować indywidualne tła. Wystarczy odpowiednim znacznikom nadać specyficzne identyfikatory i w arkuszu stylów przyporządkować do nich pożądane efekty.
<li><a href="#"><span id="wh_normal"></span><span id="wh_hovered"></span></a></li>
«poprzednia 1 2 następna »
Polecamy
Warto przeczytać
Reklama
Popularne
Firefox 10 już jest. Wiele atrakcji dla programistów, użytkownicy raczej nic nie zauważą
9
Źle się dzieje z Chrome, ze stabilnością coraz gorzej. Gdzie się podziała słynna izolacja procesów?
26
MSWiA zamówiło narzędzia do „złamania” Tora i podsłuchiwania internautów. Czy złamało przy tym prawo?
89
Pobieraczek.pl pozwie internautów, którzy nie chcą płacić abonamentu
1455
Debata w sprawie ACTA: internauci spodziewali się chyba czegoś innego
13
Nowa polityka prywatności Google'a już za miesiąc wejdzie w życie. Mamy się czego bać?
16
PHP 5.3.9 nie pozwoli hakerom zawiesić serwera. Pozwoli za to przejąć nad nim kontrolę
28
-
MSWiA zamówiło narzędzia do „złamania” Tora i podsłuchiwania internautów. Czy złamało przy tym prawo?
89
![[Aktualizacja] Facebook zablokował Demotywatory.pl. W czym zawiniły?](/files/groups/editors/internet/2011_11/demotywatory-30x22.jpg)
[Aktualizacja] Facebook zablokował Demotywatory.pl. W czym zawiniły?
36
FBI zamknęło Megaupload. Anonimowi dali się sprowokować. Teraz ich akcja uzasadni potrzebę SOPA?
17
-
Pobieraczek.pl pozwie internautów, którzy nie chcą płacić abonamentu
1455
Programowanie w środowisku Android – wprowadzenie do projektowania aplikacji dla urządzeń mobilnych
15
Rząd Tuska zablokował dostęp do tańszych leków z internetowych aptek
61
„Donald matole, twój rząd dopadną kibole” – hakerska elita przyłącza się do walki z ACTA
23
Społeczność
WebDev Z tego wynika, że zmienią się tylko serwery z którymi przeglądarka łączy...
agilob Ale folder bez nazwy się da założyć :P-
zetesha Apple nie zrezygnował z PPC całkiem ponieważ posiada P.A. Semi, która to...
-
pablo1919191 Thunderbolt to jest technolgia intela wiec skora appel wpakowal jako...
-
BartekBb Już wiem skąd kopiujecie artykuły, bo zrobiliście ten sam błąd co na...
-
Marr moglibyście się zdecydować. W newsach podajecie, że systemy wymiany (czyli...
-
setXYZ I jeszcze warto poczytać co o tym myśli sam MS http://webhosting.pl/Koniec...
- gardius: Dobra hurtownia sportowa (1)
- gardius: Tanie książki gdzie warto kupować? (1)
- Najdmen.pl: PROMOCJA, 500 DOMEN .EU ZA 1 PLN NETTO ! (1)
- VMLine: [Oferta] Serwery VPS Xen-HVM/OpenVZ z darmową administracją (2)
- Marek: Generowanie PDFa (2)
- Marek: problem z menu (2)
- Marek: Własne checkboxy w HTML,CSS (1)
Polecane książki
Praca
Czytaj Webhosting
Chcesz być na bieżąco z naszymi informacjami? Zapisz się na Newsletter.
Śledź nas: 
Zarejestruj domenę
Sprawdź dostępność swojej domeny:
| .pl: | 0 zł | .com: | 19.90 zł | |
|---|---|---|---|---|
| .com.pl: | 0 zł | .eu: | 19.90 zł |