Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem
WebHelp.pl Blog 15 skryptów ułatwiających stworzenie atrakcyjnej nawigacji na stronie WWW

Blog

15 skryptów ułatwiających stworzenie atrakcyjnej nawigacji na stronie WWW

Bartosz Romanowski 30 lipca 2012 komentarze ()

Tagi:CSS JavaScript menu skrypty

Slide Down Box MenuDobrze zaprojektowana i przejrzysta nawigacja to jeden z podstawowych elementów każdego serwisu internetowego. Nie zaszkodzi również aby była ona atrakcyjna wizualnie. W osiągnięciu tych celów można posłużyć się jednym z licznych gotowych rozwiązań. W niniejszym wpisie przedstawiam 15 subiektywnie wybranych skryptów do tworzenia rozwijanych menu.

Superfish

Superfish

Popularność Superfish jest niewątpliwie zasłużona - to prosty w implementacji i dość lekki skrypt do tworzenia rozwijanych, wielopoziomowych menu. Jedną z jego cenniejszych zalet jest fakt, iż w przypadku wyłączonej obsługi JavaScript w przeglądarce menu wciąż jest w pełni funkcjonalne (brakuje jedynie niektórych efektów).

Cena: darmowy
Licencja: MIT / GPL

Linki: oficjalna strona | demo | do pobrania

MegaMenu

MegaMenu

To zdecydowanie jeden z ciekawszych skryptów do tworzenia rozwijanych menu. Pozwala na umieszczenie w rozwijanym elemencie niemal dowolnego kodu HTML - mogą to być obrazki, listy, formularze czy nawet fragmenty innych stron. MegaMenu daje projektantowi strony bardzo duże możliwości, ale niestety ich wykorzystanie wymaga nieco pracy.

Cena: darmowy
Licencja: Apache 2.0

Linki: oficjalna strona | demo | do pobrania

UberMenu (WordPress)

UberMenu

UberMenu to wtyczka dla WordPressa, która pozwala na łatwe i szybkie stworzenie menu opartego na skrypcie MegaMenu. Wtyczka ta to prawdziwy kombajn - jej możliwości są olbrzymie, a przy tym jest bardzo dobrze wykonana. Integruje się ze standardowym systemem menu WordPressa, dzięki czemu nie musimy uczyć się niczego od nowa ani zmieniać naszych przyzwyczajeń.

Screeny nie oddadzą w pełni efektów, jakie można dzięki temu rozszerzeniu osiągnąć, tak więc zachęcam do obejrzenia wersji demonstracyjnej.

Cena: 16 dolarów
Licencja: GPL

Linki: oficjalna strona | demo | do pobrania

mbMenu

mbMenu

Skrypt mbMenu pozwala na zbudowanie efektownego menu (w tym również kontekstowego, otwieranego po kliknięciu prawym przyciskiem myszy). Ciekawostką jest możliwość dodawania pozycji menu w sposób dynamiczny za pomocą Ajaxa.

Dodatkowo na uwagę zasługuje strona twórców skryptu - warto na nią zajrzeć nawet jeśli nie interesuje nas żaden z licznych udostępnionych przez nich skryptów.

Cena: darmowy
Licencja: MIT / GPL

Linki: oficjalna strona | demo | do pobrania

Slide Subnav

Slide Subnav

Prosty skrypt do tworzenia prostego, aczkolwiek interesującego menu. Jego idea jest taka, że podmenu “wjeżdża” z boku po wskazaniu którejś z pozycji głównych menu. Niby proste, a efektowne.

Cena: darmowy
Licencja: MIT

Linki: oficjalna strona | demo | do pobrania

jqDock

jqDock

jqDock to skrypt pozwalający na stworzenie atrakcyjnego wizualnie menu, nadającego się raczej do aplikacji niż do zwykłych serwisów internetowych. Idea jest analogiczna do makowego Docka (powiększające się po wskazaniu kursorem myszy ikony), ale twórcy poszli nieco dalej i dostępnych wariacji menu jest naprawdę sporo (sekcja z przykładami zawiera aż 56 demonstracji działania skryptu).

Cena: darmowy
Licencja: MIT / GPL

Linki: oficjalna strona | demo | do pobrania

CSS Dock Menu

CSS Dock Menu

CSS Dock Menu to bardzo efektowne menu, wzorowane na Docku znanym z systemu Mac OS X. W większości przypadków tego typu nawigacja nie sprawdzi się, ale na pewno znajdą się jakieś specyficzne przypadki, gdzie sprawdzi się idealnie. Niestety, skrypt nie jest już wspierany przez autora.

Cena: darmowy
Licencja: nieznana

Linki: oficjalna strona | demo | do pobrania

MacStyleDock

MacStyleDock

MacStyleDock to kolejne menu wzorowane na Mac OS X, ale wyglądające nieco inaczej. Podobnie jak poprzedni skrypt, ten również nie sprawdzi się w zbyt wielu zastosowaniach.

Cena: darmowy
Licencja: Public Domain

Linki: oficjalna strona | demo | do pobrania

JSCookMenu

JSCookMenu

JSCookMenu pozwala na stworzenie nawigacji podobnej do menu w aplikacjach desktopowych. Może być ono umieszczone poziomo lub pionowo (jak na zamieszczonym wyżej obrazku). Dostępny jest również prosty kreator menu.

Skrypt ma całkiem spore możliwości, ale niestety nie jest już rozwijany (ale wciąż działa bez problemów)

Cena: darmowy
Licencja: własna

Linki: oficjalna strona | demo | do pobrania

CSS DropDown Menu Framework

CSS DropDown Menu Framework

To właściwie nie jest skrypt, ale coś w rodzaju frameworka do tworzenia rozwijanych menu z wykorzystaniem tylko i wyłącznie stylów CSS (bez skryptów JavaScript).

Na szczególną uwagę zasługuje uporządkowany, czytelny kod, ułatwiający tworzenie własnych schematów kolorystycznych i implementację menu na własnej stronie. Możliwości, jakie oferuje ten framework, są wystarczające do większości zastosowań. Można tworzyć menu zarówno poziome, jak i pionowe, rozwijane do góry lub w dół.

Cena: darmowy
Licencja: MIT / GPL

Linki: oficjalna strona | demo | do pobrania

Different Top Nav

Different Top Navigation

W drodze wyjątku postanowiłem zamieścić nie tyle gotowy do użycia skrypt, a tutorial objaśniający jak wykonać nieco inne rozwijane menu. Oczywiście ze strony można pobrać gotowy, działający kod, ale żeby umieścić go w swoim serwisie trzeba poświęcić jeszcze trochę czasu.

Idea tego menu jest prosta. Po najechaniu kursorem myszy na menu rozwija się nad nim podmenu, które będzie widoczne do momentu kliknięcia w ikonkę ze znakiem X. Proste, ale warte uwagi.

Cena: darmowy
Licencja: nieznana

Linki: oficjalna strona | demo | do pobrania

Rocking & Rolling Rounded Menu

Rocking & Rolling

Efektowne menu zbudowane w oparciu o okrągłe ikony, animowane za pomocą CSS, i rozwijane zaokrąglone panele.

Cena: darmowy
Licencja: nieznana

Linki: oficjalna strona | demo | do pobrania

Slide Down Box Menu

Slide Down Box Menu

Świetne menu dla fotografów i osób zajmujących się grafiką. Slide Down Box Menu to atrakcyjne wizualnie połączenie dwupoziomowego menu rozwijanego ze zdjęciami.

Cena: darmowy
Licencja: nieznana

Linki: oficjalna strona | demo | do pobrania

Beautiful Background Image Navigation

bBeautiful Background Image Navigation

Podobnie jak poprzednie menu, te również jest świetnym rozwiązaniem dla serwisów, których główną częścią są zdjęcia.

Cena: darmowy
Licencja: nieznana

Linki: oficjalna strona | demo | do pobrania

Smart Menu

Smart Menu

Proste, jednopoziomowe, ale dosyć efektowne menu. Nadaje się raczej dla prostych serwisów, gdzie rozbudowana nawigacja nie jest potrzebna.

Cena: 4 dolary
Licencja: komercyjna

Linki: oficjalna strona | demo | do pobrania

Bartosz Romanowski

Programista, gadżeciarz, krytyczny miłośnik produktów Apple, fan ciężkich brzmień i niepoprawny pesymista.


Zobacz także

Komentarze

Tematy


Popularne wpisy

Autorzy bloga



HTML CSS JavaScript PHP bazy danych MySQL Flash grafika framework hosting domeny pozycjonowanie wordpress Facebook