chevron-left chevron-right

[CSS][jQuery] Menu w stylu Windows 7 – niesamowity efekt

Dzisiejszy artykuł powstał na bazie inspiracji związanej z Windowsem 7, który mam zainstalowany u siebie. Pomyślałem sobie, żeby spróbować stworzyć efekt rozsuwanego menu rodem z tego systemu.
Efekt się udał, ale w 100% działa w 3-ch przeglądarkach: Mozilla Firefox 3.6.3, Safari 4.0, Google Chrome. W innych przeglądarkach może brakować niektórych szczegółów dekoracyjnych, ale sama idea wysuwanego menu działa.

Najpierw musimy przygotować strukturę menu w HTML:

<div class="kontener">
<div id="win7">
<ul id="menu1">
<li><a href="#"><img src="img/arka.png" alt="" />Arka</a></li>
<li><a href="#"><img src="img/belchatow.png" alt="" />GKS Bełchatów</a></li>
<li><a href="#"><img src="img/cracovia.png" alt="" />Cracovia</a></li>
<li><a href="#"><img src="img/jaga.png" alt="" />Jagiellonia</a></li>
<li><a href="#"><img src="img/korona.png" alt="" />Korona</a></li>
<li><a href="#"><img src="img/lech.png" alt="" />Lech</a></li>
<li><a href="#"><img src="img/lechia.png" alt="" />Lechia</a></li>
<li><a href="#"><img src="img/legia.png" alt="" />Legia</a></li>
<li><a href="#"><img src="img/odra.png" alt="" />Odra</a></li>
<li><a href="#"><img src="img/piast.png" alt="" />Piast</a></li>
<li><a href="#"><img src="img/poloniab.png" alt="" />Polonia B.</a></li>
<li><a href="#"><img src="img/poloniaw.png" alt="" />Polonia W.</a></li>
<li><a><img src="img/trans.png" alt="" /></a></li>
<li><a><img src="img/trans.png" alt="" /></a></li>
<li><a><img src="img/trans.png" alt="" /></a></li>
</ul>
<ul id="menu2">
<li class="ikona"><img src="img/logo.png" alt="" /></li>
<li><a href="#"><span>Opcja 1</span></a></li>
<li><a href="#"><span>Opcja 2</span></a></li>
<li><a href="#"><span>Opcja 3</span></a></li>
<li><a href="#"><span>Opcja 4</span></a></li>
<li><a href="#"><span>Opcja 5</span></a></li>
<li><a href="#"><span>Opcja 6</span></a></li>
</ul>
</div>
 
   <img id="start" src="img/pasek.png" />
</div>

Jak widać, jako 3 ostatnie elementy listy menu1 dałem puste znaczniki z przezroczystym obrazkiem. Ma to na celu wysunięcie elementów, które mają być widoczne w menu, ponad obrazek start.

Kolejnym krokiem jaki uczynimy jest zdefiniowane styli dla naszego menu, dzięki czemu uzyskamy wygląd a'la menu w Windows 7. Zostaną tutaj wykorzystane specyficzne style dla poszczególnych silników przeglądarek.

.kontener {
	float: left;
	overflow: hidden;
	position: relative;
	width: 500px;
	height: auto;
}
#start {
	position: absolute;
	z-index: 100;
	bottom: 0;
	left: 0;
	border-top: #fff solid 1px;
}
#win7 {
	border: solid 1px #102a3e;
	overflow: visible;
	display: inline-block;
	margin: 60px 0 0 20px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	position: relative;
	box-shadow: inset 0 0 1px #fff;
	-moz-box-shadow: inset 0 0 1px #fff;
	-webkit-box-shadow: inset 0 0 1px #fff;
	background-color: #619bb9;
	background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
	background: -webkit-gradient(linear, center top, center bottom, from(#327aa4), color-stop(45%, #2e4b5a), to(#5cb0dc));
}
#menu1, #menu2 {
	float: left;
	display: block;
	padding: 0;
	list-style: none;
}
#menu1 {
	background: #fff;
	border: solid 1px #365167;
	margin: 7px 0 7px 7px;
	box-shadow: 0 0 1px #fff;
	-moz-box-shadow: 0 0 1px #fff;
	-webkit-box-shadow: 0 0 1px #fff;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
#menu1 a {
	border: solid 1px transparent;
	display: block;
	padding: 3px;
	margin: 3px;
	color: #4b4b4b;
	text-decoration: none;
	min-width: 220px;
}
#menu1 a:hover {
	border: solid 1px #7da2ce;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow: inset 0 0 1px #fff;
	-moz-box-shadow: inset 0 0 1px #fff;
	-webkit-box-shadow: inset 0 0 1px #fff;
	background-color: #cfe3fd;
	background: -moz-linear-gradient(top, #dcebfd, #c2dcfd);
	background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));
}
#menu1 a img {
	border: 0;
	vertical-align: middle;
	margin: 0 5px 0 0;
}
#menu2 {
	margin: 7px;
	margin-top: -30px;
}
#menu2 li.ikona {
	text-align: center;
}
#menu2 a {
	border: solid 1px transparent;
	display: block;
	margin: 5px 0;
	position: relative;
	color: #fff;
	text-decoration: none;
	min-width: 120px;
}
#menu2 a:hover {
	border: solid 1px #000;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow: 0 0 1px #fff;
	-moz-box-shadow: inset 0 0 1px #fff;
	-webkit-box-shadow: inset 0 0 1px #fff;
	background-color: #658da0;
	background: -moz-linear-gradient(center left, rgba(81, 115, 132, 0.55), rgba(121, 163, 184, 0.55) 50%, rgba(81, 115, 132, 0.55));
	background: -webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384));
}
#menu2 a span {
	padding: 5px;
	display: block;
}
#menu2 a:hover span {
	background: -moz-linear-gradient(center top, transparent, transparent 49%, rgba(2, 37, 58, 0.5) 50%, rgba(63, 111, 135, 0.5));
	background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent),  color-stop(50%, rgba(2, 37, 58, 0.5)), to(rgba(63, 111, 135, 0.5)));
}

Jak pewnie zauważyłeś, bardzo ciekawym i raczej mało znanymi ustawieniami dla atrybutu background są -moz-linear-gradient oraz -webkit-gradient. One właśnie są odpowiedzialne za generowanie gradientu w menu, dzięki czemu nie musimy tworzyć dodatkowych obrazków w programach graficznych, odpowiedzialnych za gradient dla menu.
Dodatkowo, są tutaj wykorzystane atrybuty generujące cienie oraz zaokrąglone rogi (z przedrostkami -moz i -webkit).

Ostatnim krokiem jest stworzenie efektu rozwijanego menu. Do tego celu używam biblioteki jQuery, którą należy dodać do pliku HTML w sekcji HEAD.
Kod odpowiedzialny za animację wygląda następująco:

$(document).ready(function(){
	$('.kontener').hover(
		function(){
			$("#win7", this).stop().animate({top:'0px'},{queue:false,duration:200});
		}, function() {
			$("#win7", this).stop().animate({top:'800px'},{queue:false,duration:200});
	});
});

Myślę, że jest on wystarczająco zrozumiały, ponieważ nie wykorzystywałem tutaj żadnych zaawansowanych metod z biblioteki jQuery.

To byłoby na tyle.
Demo z tego artykułu jest dostępne tutaj: rozsuwane menu w stylu Windows 7 - CSS i jQuery