4 876 Скрипты / Menu & Nav

Горизонтальное меню с CSS или JS


Меню с использованием затемнения FADE на jQuery или же просто на CSS - выбор за вами. Подойдет для сайтов с темными дизайнами.

HTML

Для варианта с анимацией затемнения:

<ul id="menu">
    <li id="button01" class="selected"><a href="#"><img src="images/nav_btn01.png" alt="Главная" /></a></li>
    <li id="button02"><a href="#"><img src="images/nav_btn02.png" alt="Форум" /></a></li>
    <li id="button03"><a href="#"><img src="images/nav_btn03.png" alt="Блоги" /></a></li>
    <li id="button04"><a href="#"><img src="images/nav_btn04.png" alt="Файлы" /></a></li>
    <li id="button05"><a href="#"><img src="images/nav_btn05.png" alt="Справка" /></a></li>      
</ul>

Для варианта без jаvascript:

    <div id="holder">
    
        <ul id="menu">
            
            <li id="button01" class="selected"><a href="#">Главная</a></li>
            <li id="button02"><a href="#">Форум</a></li>
            <li id="button03"><a href="#">Блоги</a></li>
            <li id="button04"><a href="#">Файлы</a></li>
            <li id="button05"><a href="#">Справка</a></li>
            
        </ul>
        
    </div>

CSS

Для варианта с анимированным затемнением стиль такой:

Для варианта без jаvascript:

JS

Подключаем jQuery библиотеку и скрипт:

var speed = 300 /* Скорость анимации в мс */
$(document).ready(function(){
    
    $("ul#menu li:not(.selected) a img").fadeTo(10, 0);
    
    $("ul#menu li:not(.selected) a img").hover(function(){
        $(this).stop().fadeTo(speed, 1.0);
    },function(){
        $(this).stop().fadeTo(speed, 0);
    });
    
});
Скачать 2423Загрузок 491,32 Kb
Демо

Комментарии

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

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