[jQuery] Efektowne menu rodem z systemów operacyjnych
Ten wpis ma 17 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.
Dzisiaj pragnę zaprezentować ciekawy typ menu, który można zaimplementować na stronie internetowej. Menu jest wzorowane na systemach menu rodem z Mac OS X lub z jednego z dodatków do upiększania systemów typu Windows XP.
Takie menu działa dobrze we wszystkich nowoczesnych przeglądarkach internetowych. Aby móc stworzyć taki efekt potrzebne są nam odpowiednie biblioteki:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="https://blog.piotrnalepa.pl/demo/dock-os/js/fisheye-iutil.min.js" type="text/javascript"></script>
<div id="menu">
<div class="menu-kontener">
<a class="menu-item" href="#"><span>1</span><img src="img/1.png" alt="1" /></a>
<a class="menu-item" href="#"><span>2</span><img src="img/2.png" alt="2" /></a>
<a class="menu-item" href="#"><span>3</span><img src="img/3.png" alt="3" /></a>
<a class="menu-item" href="#"><span>4</span><img src="img/4.png" alt="4" /></a></div> </div> |
Do powyższego kodu HTML dołożyłem odpowiednie style CSS:
body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } #menu { position: relative; top: 150px; } .menu-kontener { position: relative; top: -8px; height: 50px; padding-left: 20px; } a.menu-item { display: block; width: 120px; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; } .menu-item span { display: none; padding-left: 20px; } .menu-item img { border: 0; margin: 5px 10px 0px; width: 100%; } |
Na sam koniec dokładam kod JavaScript:
$(function () { $('#menu').Fisheye( { maxWidth: 30, items: 'a', itemsText: 'span', container: '.menu-kontener', itemWidth: 50, proximity: 60, alignment : 'left', valign: 'bottom', halign : 'center' } ); }); |
O autorze
