Помогни ни да направим Uroci.net по - богат! Добави урок

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

wweb   трудност:    видян: 14925

Тук ще Ви покажа как може да направим меню с помощта на 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 clearboth }   
   
4.   
   5. 
#menu_holder ul{  
   
6.     list-style-typenone
   
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 ;]

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


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com