[jQuery] Efektowne menu rodem z systemów operacyjnych

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>

Kod HTML dla tego przykładu wygląda następująco:

<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'
		}
	);
});

Dzięki takiemu zestawieniu kodu otrzymacie pożądny efekt menu. Demo z tego przykładu można zobaczyć tutaj.