[jQuery] Efektowne menu rodem z systemów operacyjnych
This post is 17 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.
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' } ); }); |
About the author
