[CSS][jQuery] Menu w stylu Windows 7 – niesamowity efekt
This post is 16 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.
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
About the author
