ГОРИЗОНТАЛЬНОЕ МЕНЮ С CSS ИЛИ JS

ГОРИЗОНТАЛЬНОЕ МЕНЮ С 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>


Для варианта без javascript:
    <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
Для варианта с анимированным затемнением стиль такой:
div#holder{
    position: relative;
    width: 960px;
    margin: 0 auto;
    text-align: left;
}
ul#menu{
    position: absolute;
    top: 220px;
    left: 150px;
    width: 672px;
    height: 99px;
    background-image: url(../images/nav_background.png);
    background-repeat: no-repeat;
    background-position: bottom;
    list-style-type: none;
    padding-left: 4px;
}
    ul#menu li, ul#menu li a{
        display: block;
        float: left;
        width: 134px;
        height: 99px;
    }


Для варианта без javascript:
div#holder{
    position: relative;
    width: 960px;
    margin: 0 auto;
    text-align: left;
}
ul#menu{
    position: absolute;
    top: 220px;
    left: 150px;
    width: 672px;
    height: 99px;
    background-image: url(../images/nav_background.png);
    background-repeat: no-repeat;
    background-position: bottom;
    list-style-type: none;
    padding-left: 4px;
}

    ul#menu li, ul#menu li a{
        display: block;
        float: left;
        width: 134px;
        height: 99px;
        text-indent: -9999px;
    }
        
        ul#menu li#button01 a:hover, ul#menu li#button01.selected{background-image: url('../images/nav_btn01.png');}
        ul#menu li#button02 a:hover, ul#menu li#button02.selected{background-image: url('../images/nav_btn02.png');}
        ul#menu li#button03 a:hover, ul#menu li#button03.selected{background-image: url('../images/nav_btn03.png');}
        ul#menu li#button04 a:hover, ul#menu li#button04.selected{background-image: url('../images/nav_btn04.png');}
        ul#menu li#button05 a:hover, ul#menu li#button05.selected{background-image: url('../images/nav_btn05.png');}


javascript
Подключаем 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);
    });
    
});


Скачать исходник:
Скачать файл: navigation_css_and_javascript.rar [567,98 Kb] (cкачиваний: 7)
0
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.