animowane menu - Forum PHP.pl

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

animowane menu, jquery

przemysuaw Zobacz profil	3.05.2013, 14:46:12 Post #1
Grupa: Zarejestrowani Postów: 50 Pomógł: 0 Dołączył: 3.02.2013 Ostrzeżenie: (0%)	Witam. Jestem bardzo początkujący, więc proszę o wyrozumiałość (IMG:style_emoticons/default/smile.gif) . Oczywiście statycznie menu się tworzy za pomocą css'a, ale nie ma żadnej animacji. W dodatku chciałbym, żeby przyciski nawigacyjne były w poziomie. dodawałem w różnych miejscach 'display: inline', czy display="inline" , ale menu jest nadal poziome i oczywiście nie ma żadnej animacji. Szablon css [HTML] pobierz, plaintext #container{ position:relative; } #navigation{ position:absolute; width:inherit; top:30px; right:500px; margin:60px; } #navigation li { height:20px; float:left; list-style-type: none; width:150px; padding:3px; border-right:3px solid #3687AF; border-top:3px solid #3687AF; background-color: #99CCFF; background-repeat: no-repeat; background-position: center; } #navigation li a { color: #000000; } [HTML] pobierz, plaintext HTML + jquery [HTML] pobierz, plaintext <body id="container"> <ul id="navigation"> <li><a href="/" title="onas"> Onas</a></li> <li><a href="/a" title="ofert"> oferta </a></li> <li><a href="/d" title="kontk"> kontakt</a> </li> </ul> <script> $(function(){ ////Tworzymy bąbel, którego będziemy animować $('<div id="navigation_blob"></div>').css({ width: $('#navigation li:first a').width() + 10, height: $('#navigation li:first a').height() + 10 }).appendTo('#navigation'); $('#navigation a').hover(function() { //Funkcja obsługi mouseOver $('#navigation_blob').animate( {width: $(this).width() + 10, left: $(this).position().left}, {duration: 'slow', easing: 'easeOutElastic', queue: false}); }, function(){ ////Funkcja obsługi mouseOut $('#navigation_blob') .stop(true) .animate( {width: 'hide'}, {duration: 'slow', easing: 'easeOutCirc', queue: false} ) .animate( {left: $('#navigation li:first a').position().left;}, 'fast'); } }); </script> </body> [HTML] pobierz, plaintext