2 048 Скрипты / Menu & Nav

Меню с эффектами fadein и fadeout

Меню с эффектами fadein и fadeout

Простое меню со стандартными эффектами jQuery. При наведении создается подсветка пунктов меню.

HTML

Простейшая разметка html:

<ul id="navMenu">
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Форум</a></li>
    <li><a href="#">Портфолио</a></li>
    <li><a href="#">Контакты</a></li>
    <li><a href="#">Блог</a></li>
</ul>

CSS

JS

Используем встроенные эффекты jQuery fadein и fadeout. Применим div .hover к списку.
$(document).ready(function () {
    //Append a div with hover class to all the LI
    $('#navMenu li').append('<div class="hover"><\\/div>');
 
    $('#navMenu li').hover(
         
        //Mouseover, fadeIn the hidden hover class 
        function() {            
           $(this).children('div').fadeIn('1000');       
        },
     
        //Mouseout, fadeOut the hover class
        function() {       
            $(this).children('div').fadeOut('1000');          
    }).click (function () {
     
        //Add selected class if user clicked on it
        $(this).addClass('selected');        
    });
});
Скачать 601Загрузок 4,6 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи