Znalazłem bardzo ciekawe menu zrobione w JQ
Tutaj JS
$(function() {
$
('#menu li').each(function() { var $this = $(this); //przypisujemy aktualnie przetwarzany element do zmiennej
var currentPadding = $this.css('padding-top'); //przypisujemy aktualny padding
$this.mouseenter(function() { //przypisujemy zdarzenie po najechaniu kursorem
$this.stop(); //zatrzymujemy wszystkie aktualne animacje na tym elemencie
$this.animate({
paddingTop: 0 //ustawiamy cel naszej animacji
}, 500); //oraz jej długość
});
$this.mouseleave(function() { //przypisujemy zdarzenie po usunięciu kursora z elementu
$this.stop(); //zatrzymujemy wszystkie aktualne animacje na tym elemencie
$this.animate({
paddingTop: currentPadding //ustawiamy cel naszej animacji
}, 500); //oraz jej długość
});
});
});
i css
body {
padding: 0px;
margin: 0px;
font: 12px/1.5em Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
#menu {
width: 950px;
list-style-type: none;
margin: 20px auto 0px auto;
padding: 0px;
height: 50px;
overflow: hidden;
}
#menu li {
float: left;
margin-left: 10px;
padding-top: 20px;
}
#menu li a {
display: block;
text-align: center;
color: #ffffff;
text-decoration: none;
padding: 5px 10px;
width: 60px;
height: 40px;
background-color: #49A5FF;
}
#container {
width: 950px;
background-color: #DFDFDF;
margin: 0px auto;
padding: 10px 20px;
}
Jak to wszystko wygląda można zobaczyć tutaj
http://hubert.tulibacki.pl/demo/zakladki/ Teraz chciałbym zrobić żeby te zakładki rozwijały się w prawo, czyli lewa strona zostaje i następuje przedłużenie do prawej. Niestety jak na razie gubię się w tym i tutaj moja prośba: Czy może to ktoś dla mnie przerobić ?
Ten post edytował matwiej 15.12.2010, 21:13:27