MooTools - UvumiTools i proste rozwijane menu na stronę internetową
W dzisiejszym wpisie chciałbym polecić bibliotekę opartą na MooTools, pozwalającą na bardzo wygodne tworzenie rozwijanego menu na stronach internetowych - UvumiTools Dropdown Menu. Wygląda to dość efektownie, a że sam proces wprowadzenia jej na stronie jest niezwykle prosty, to uważam, że jest to skrypt godny polecenia.
Czym jest UvumiTools Dropdown Menu?
Tak jak wspomniałem we wstępie, UvumiTools Dropdown Menu jest biblioteką opartą o MooTools, która pozwala na bardzo wygodne stworzenie rozwijanego menu na stronie internetowej. Wszystko co należy zrobić to umieścić skrypt na stronie wraz z MooTools, stworzyć odpowiednią strukturę menu z wykorzystaniem html-owych list (ul, li) i na końcu pokazać skryptowi, że ma z tej struktury stworzyć menu.
Dlaczego warto użyć UvumiTools Dropdown Menu?
Tak jak już pisałem - całość jest bardzo prosta to wprowadzenia a przy tym wygodna i niewymagająca specjalnych ingerencji w kod strony. Ponadto jak również już wspomniałem, budujemy strukturę menu w oparciu o elementu ul i li, czyli nasza struktura pozostaje semantycznie zgodna z idę tworzenia menu. Wiele tego typu bibliotek opiera się np. na elementach div czy span, z których właściwie nie powinno się tworzyć menu. Dlaczego? Chodzi tu głównie o dostępność strony dla osób z pewnymi ograniczeniami wzroku, które często korzystają z dodatkowych programów przekładających treść strony na dźwięk. Programy te odpowiednio interpretują menu jeśli jest oparte o listy właśnie.Mamy również możliwość ingerencji w wygląd menu za pomocą stylów css. Także sama biblioteka wspiera zarówno menu poziome jak i pionowe, czy nawet to w którą stronę mają rozwijać się elementy.
Jak używać tej biblioteki?
Bibliotekę znajdziemy na stronie producenta: UvumiTools i choć na stronie tej znajduje się wiele wyczerpujących przykładów na jej używanie, to ja również pokażę tutaj kolejny, bardzo prosty.Sekcja head (dodajemy odpowiednie biblioteki i skrypty, oraz wskazujemy, które menu ma zostać przetworzone na rozwijane):
<script type="text/javascript" src="mootools-for-dropdown.js"></script>
<script type="text/javascript" src="UvumiDropdown.js"></script>
<script type="text/javascript">
var menu = new UvumiDropdown("nasze-rozwijane-menu");
</script>
Sekcja body (tworzymy nasze menu):
<li>
Nadmenu 1
<ul>
<li>Pierwszy element Nadmenu 1</li>
<li>Drugi element Nadmenu 1</li>
<li>Trzeci element Nadmenu 1</li>
</ul>
</li>
<li>
Nadmenu 2
<ul>
<li>Pierwszy element Nadmenu 2</li>
<li>Drugi element Nadmenu 2</li>
<li>Trzeci element Nadmenu 2</li>
</ul>
</li>
<li>
Nadmenu 3
<ul>
<li>Pierwszy element Nadmenu 3</li>
<li>Drugi element Nadmenu 3</li>
<li>Trzeci element Nadmenu 3</li>
</ul>
</li>
</ul>
Jak widać w skrypcie odnosimy się do listy o id "nasze-rozwijane-menu". Sama struktura menu oparta jest na kolejnych zagnieżdżonych listach i ich elementach. Do głównej listy dodajemy również klasę dropdown - jest ona zdefiniowana w stylu CSS dołączonym do strony (uvumi-dropdown.css) i pobranym ze strony autora.
Komentarze (0) - Nikt jeszcze nie komentował - bądź pierwszy!