search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[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.