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 »
Warto przeczytać
Popularne
Nazwa padła ofiarą szantażystów, inni polscy hosterzy też zagrożeni?
22
Darmowy Internet od Aero2. Jak go zdobyć i jakie są prawdziwe koszta? Instrukcja krok po kroku
11
Programowanie w środowisku Android – wprowadzenie do projektowania aplikacji dla urządzeń mobilnych
17
Premiera Diablo 3 wzbudziła dyskusję na temat gier, które zawsze chcą być online
19
Nowy problem z Windows 8: bootuje się za szybko
10
Amerykańscy rodzice straszeni „e-narkotykami” dostępnymi w Sieci
21
Anonymous upubliczniają 1,7 GB danych wykradzionych Departamentowi Sprawiedliwości USA
11
Blueseed: libertariańska sztuczna wyspa przyciągnęła już ponad sto startupów z całego świata
8
Rewolucja w Firefoksie, nowa łatka czterokrotnie ograniczyła zużycie pamięci
20
-
Darmowy Internet od Aero2. Jak go zdobyć i jakie są prawdziwe koszta? Instrukcja krok po kroku
11
CVDazzle: makijaż jest w stanie pokonać automatyczne systemy ulicznego monitoringu
3
-
Programowanie w środowisku Android – wprowadzenie do projektowania aplikacji dla urządzeń mobilnych
17
Ubuntu 12.04 LTS już dostępny: stabilna dystrybucja na następne pięć lat?
28
Zostań webmasterem polskiego rządu, zarobisz na komfortowe życie dla siebie i swojej rodziny
33
Społeczność
gonzales Javowcy pozdrawiają dotnetowców xD-
kaziks Galaxy S II - u mnie po aktualizacji Firefox działa strasznie zacina się...
-
Doniek Szkoda że strona z demo nie działa - non stop się przeładowuje
-
bartez Niech zaczną jeszcze bardziej ograniczać programistów, to zdziwią się ilu...
-
Dave Smith Jestem Pastor Dave Smith prywatny pożyczkodawca pieniądze, z czego ponad...
-
marcusm Fajna reklama produktu za 500 zł
-
rza a to starsze aplikacje nie będą działać i kompilacja pod Windows SDK 7.1...
- Najdmen.pl: Konta www z wyłączonym licznikiem transferu od IONIC.pl (1)
- 2BE.PL: [Oferta] Promocja jak złoto w 2BE.PL (1)
- 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)
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ł |