Горизонтальное меню с 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

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

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;
    }

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

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');}

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);
    });
    
});