JQuery - меню с анимиран ефект

wweb трудност:

видян: 14881

Тук ще Ви покажа как може да направим меню с помощта на JQuery. Урокът е лесен и не иска голяма предварителна подготовка.

Изискват се познания по:
HTML/ XHTML - начални /основни
CSS - начални /основни
JQuery - начални /основни
Време 15 мин.

Това е HTML и менюто което ще имаме

PHP Code:


			<!-- php buffer start -->
   1. <div id='menu_holder'>  

   2.      <ul>  

   3.          <li id='first_li' class='selected'>Линк 1</li>  

   4.          <li id='second_li'>Линк 2 </li>  

   5.          <li id='third_li'>Линк 3</li>  

   6.          <div class='clear'></div>  

   7.      </ul>  

   8.  </div> 



<!-- php buffer end -->

След това ще сложим и малко стил на менюто

PHP Code:


			<!-- php buffer start -->
   1. /* Внимавайте и елементие който използвате 

   2.  не трябва да има повтарящи се , погледнете офииц. документация */  

   3. .clear { clear: both }   

   4.   

   5. #menu_holder ul{  

   6.     list-style-type: none; 

   7. }  

   8. #menu_holder ul li {  

   9.     float:left; /* подравняване в ляво за елементите */  

  10.     width:150px; /* Размер по подразбиране */  

  11. }  

  12. #menu_holder ul li a {  

  13.  

  14. display:block; 

  15. width:100%;     

  16. /* Може да го промените с ваши стойности  */  

  17. padding:10px;  

  18. text-decoration:none;  

  19. color:white;  

  20. }  

  21.   

  22. 

  23. #menu_holder ul { margin:0px; padding:0px; }  

  24. #menu_holder ul li { color:white; font-size:20px; font-weight:bold; border:4px solid black;}  

  25. #first_li{ background-color: #000080;}  

  26. #second_li{ background-color: #008080;}  

  27. #third_li{ background-color: #8080FF;} 



<!-- php buffer end -->

Сега е ред и на самият скрипт

PHP Code:


			<!-- php buffer start -->


$(document).ready(function(){            //Декларираме променлините        var speed = 500; //скоростта на анимацията в микросекунди   

        var min_width = 150; // мин width  размер  

        var max_width = 400; // мак width  размер 

          // анимиран елемент поподразбиране за широчината      

   $('.selected').animate( { width : max_width } );        

    /*   Тук ще активираме ефекта за/при активен елемент   '*/      

    $('#menu_holder ul li').hover(function(){                 

              

            $(this).animate({ width : max_width }, { queue:false , duration:speed});       

         /*използваме  siblings() за/при деселект на елемента */          

    $(this).siblings().animate({ width : min_width }, { queue:false , duration:speed});   

         //Когато имаме  hovers out      

    },function(){     

           //Взимаме класът за hovered out   

            var class_ = $(this).attr('class');     

           //...проверяваме ако класът не е изаран  - 'selected'...   

           if(class_ != 'selected'){                    

                $('#menu_holder ul li').animate({ width : min_width }, { queue:false , duration:speed});                  $('.selected').animate( { width : max_width }, { queue:false , duration:speed});        

        }   

       });  

       }); 



<!-- php buffer end -->

Надявам се коментарите да не са много объркващи. Като цяло проверяваме за избран елемент и променяме само width и използваме анмация за целта, като сменяме стилът. Едит: може да добавите и изображения и за да развиете примера.

Дано да Ви е бил от полза урока.

Демо
Изтегли кода

Източник: www.forumite.us

Сподели |

Коментари (5)

Goldfine на 31.08 2009 в 09:18ч.

Много голями размери! иначе е готино

moonrunner7 на 18.09 2009 в 23:03ч.

Менюто изглежда много интересно, но имам един въпрос; може ли да ми пишете на мейла - moonrunner7@hotmail.com
Благодаря предварително!

mitko96 на 22.08 2010 в 16:23ч.

а как да направя като цъкнеш върхо текст да те препраща ( link )

thinkorswim на 06.11 2010 в 22:15ч.

Исках да попитам дали мога да центрирам това меню и ако да как?

bokity на 08.01 2011 в 14:19ч.

във довавяш TEXT ;]

JQuery - меню с анимиран ефект

Източник: www.forumite.us

Коментари (5)

Регистрирайте се, за да добавите коментар