Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> animowane menu, jquery
przemysuaw
post
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 
  1. #container{
  2.   position:relative;
  3. }
  4. #navigation{
  5.   position:absolute;
  6.   width:inherit;
  7.   top:30px;
  8.   right:500px;
  9.   margin:60px;
  10. }
  11. #navigation li {
  12.   height:20px;
  13.   float:left;
  14.   list-style-type: none;
  15.   width:150px;
  16.   padding:3px;
  17.   border-right:3px solid #3687AF;
  18.   border-top:3px solid #3687AF;
  19.   background-color: #99CCFF;
  20.   background-repeat: no-repeat;
  21.   background-position: center;
  22. }
  23. #navigation li a {
  24.   color: #000000;
  25. }
[HTML] pobierz, plaintext


HTML + jquery 
[HTML] pobierz, plaintext 
  1. <body id="container">
  2.  <ul id="navigation">
  3.    <li><a href="/" title="onas"> Onas</a></li>
  4.    <li><a href="/a" title="ofert"> oferta </a></li>
  5.    <li><a href="/d" title="kontk"> kontakt</a> </li>
  6.    </ul>
  7.  <script> 
  8.  $(function(){
  9.    ////Tworzymy bąbel, którego będziemy animować
  10.    $('<div id="navigation_blob"></div>').css({
  11.       width: $('#navigation li:first a').width() + 10,
  12.       height: $('#navigation li:first a').height() + 10     
  13.       }).appendTo('#navigation');
  14.    $('#navigation a').hover(function() {
  15.      //Funkcja obsługi mouseOver
  16.      $('#navigation_blob').animate(
  17.      {width: $(this).width() + 10, left: $(this).position().left},
  18.      {duration: 'slow', easing: 'easeOutElastic', queue: false});
  19.    }, function(){
  20.      ////Funkcja obsługi mouseOut
  21.      $('#navigation_blob')
  22.      .stop(true)
  23.      .animate(
  24.          {width: 'hide'},
  25. 	 {duration: 'slow', easing: 'easeOutCirc', queue: false}
  26. 	 )
  27. 	 .animate(
  28. 	    {left: $('#navigation li:first a').position().left;},
  29. 	    'fast');
  30.             }       
  31.        });
  32.  </script>
  33.   </body> 
[HTML] pobierz, plaintext


Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
_Borys_
post
Post #2





Grupa: Zarejestrowani
Postów: 587
Pomógł: 190
Dołączył: 5.02.2011
Skąd: 64-800

Ostrzeżenie: (0%)
-----

jQuery UI
Go to the top of the page
+Quote Post

Posty w temacie
- przemysuaw   animowane menu   3.05.2013, 14:46:12
- - sunpietro   Dobrze by było gdybyś wykorzystał narzędzia w styl...   3.05.2013, 17:00:39
|- - przemysuaw   Cytat(sunpietro @ 3.05.2013, 18:00:39...   4.05.2013, 20:19:04
- - _Borys_   jQuery UI   4.05.2013, 20:41:18

« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 15.10.2025 - 06:26
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn