Тук ще Ви покажа как може да направим меню с помощта на JQuery. Урокът е лесен и не иска голяма предварителна подготовка.
Изискват се познания по:
HTML/ XHTML - начални /основни
CSS - начални /основни
JQuery - начални /основни
Време 15 мин.
Това е HTML и менюто което ще имаме
<!-- 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 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 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 и използваме анмация за целта, като сменяме стилът. Едит: може да добавите и изображения и за да развиете примера.
Дано да Ви е бил от полза урока.