[CSS][jQuery] Skaczące, harmonijkowe menu
Ten wpis ma 16 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.
Po dłuższej przerwie pora na kolejny artykuł dotyczący tworzenia ciekawych efektów za pomocą biblioteki jQuery.
Dzisiaj przedstawię Tobie sposób na osiągnięcie ciekawego efektu rozwijanego menu, które po rozwinięciu będzie skakało przez chwilę jak piłka.
Taki efekt podnosi atrakcyjność strony internetowej i sprawia, że użytkownikowi takiej strony chcę się klikać w dane menu.
By uzyskać ten efekt, najpierw musimy stworzyć odpowiednią strukturę menu w kodzie HTML:
<ul class="kontener">
<li class="menu">
<ul>
<li class="glowne"><a href="#" class="harmonia">Jeden</a></li>
<li class="rozwiniecie">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
</ul>
</li>
</ul>ul {
margin: 0;
padding: 0;
}
ul.kontener {
width: 300px;
margin: 0 auto;
padding: 50px;
}
li {
list-style: none;
text-align: left;
}
li.menu {
padding: 5px 0;
width: 100%;
}
li.glowne a {
display: block;
font-family: Arial, sans-serif;
font-size: 21px;
height: 34px;
overflow: hidden;
padding: 10px 20px 0;
position: relative;
width: 260px;
}
li.glowne a:hover {
text-decoration: none;
}
li.glowne a.harmonia {
background: #CC0000;
color:#641603;
}
.rozwiniecie {
display: none;
padding-top: 5px;
width: 100%;
}
.rozwiniecie li {
background-color: #373128;
border: 1px solid #40392C;
color: #CCCCCC;
margin: 5px 0;
padding: 4px 18px;
}
Jako plików pomocniczych dla naszego skryptu potrzebujemy biblioteki jQuery oraz dodatku jQuery.Easing.
Elementy te należy dołączyć do tworzonego pliku HTML w sekcji HEAD.
Wracając do naszego skryptu, to nasz skrypt wygląda następująco:
$(document).ready(function(){
$.easing.def = "easeOutBounce";
$('li.glowne a').click(function(e){
var dropDown = $(this).parent().next();
$('.rozwiniecie').not(dropDown).slideUp('slow');
dropDown.slideToggle('slow');
e.preventDefault();
})
});
O autorze
