Вертикальное меню на спрайтах
В архиве лежит сам спрайт и PSD файл (можете изменять цвета под свой сай)
Установка:
Качаем архив;
Картнку sprite.jpg кидаем в папку img;
Ставим в то место где хотим видеть меню;
Code
<ul id="menu">
<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>
<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
Code
#menu li {
background: url("../img/sprite.jpg");
width:250px;
height:50px;
text-decoration: none;
display: block;
}
#menu li:hover {
color: #fff;
background: url("../img/sprite.jpg") 0 -50px;
}
#menu a {
padding:16px 20px;
color:#fff;
text-decoration: none;
display: block;
font:15px Arial;
}
#menu a:hover {
color: #000;
}
background: url("../img/sprite.jpg");
width:250px;
height:50px;
text-decoration: none;
display: block;
}
#menu li:hover {
color: #fff;
background: url("../img/sprite.jpg") 0 -50px;
}
#menu a {
padding:16px 20px;
color:#fff;
text-decoration: none;
display: block;
font:15px Arial;
}
#menu a:hover {
color: #000;
}
(0)
Оранжевое меню можно скачать отсюда http://shablon.my1.ru/files/go.jpg