Tutaj JS
$(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ć ?