апр 13 2013
Красивое вертикальное меню на CSS
Новый стандарт CSS3 поддерживается практически всеми популярными веб-браузерами. Это значит, что его можно смело использовать для создания красивых эффектов, ранее не доступных без использования jQuery. Однако времена меняются и все больше jQuery фишек можно реализовать на чистом CSS. В данной статье речь пойдет о создании красивого вертикального меню с применением CSS3 transition.
Изучив демо вы могли заметить, что на странице используется градиентная заливка в качестве фона, реализуется данный эффект следующим образом:
body {
background: #fcfcfc; /* Для старых браузров */
background: -moz-linear-gradient(top, #fcfcfc, #cfcfcf); /* Firefox 3.6+ */
/* Chrome 1-9, Safari 4-5 */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#fcfcfc), color-stop(100%,#cfcfcf));
/* Chrome 10+, Safari 5.1+ */
background: -webkit-linear-gradient(top, #fcfcfc, #cfcfcf);
background: -o-linear-gradient(top, #fcfcfc, #cfcfcf); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcfcfc, #cfcfcf); /* IE10 */
background: linear-gradient(top, #fcfcfc, #cfcfcf); /* CSS3 */
}Структура навигационных блоков стандартна:
<div class="navbox">
<ul class="nav">
<li><a href="#">XHTML</a></li>
<li><a href="#">C++</a></li>
<li><a href="#">Mootools</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Perl</a></li>
</ul>
</div> Далее применим стили для списка со ссылками. Ключевым стилем здесь будет background-size. С его помощью можно изменить масштаб фоновой картинки, в нашем случае shad2.png, так, что она будет выглядеть одинаково, независимо от высоты списка со ссылками.
ul.nav {
list-style: none;
display: block;
width: 200px;
position: relative;
top: 100px;
left: 100px;
padding: 60px 0 60px 0;
background: url(shad2.png) no-repeat;
background-size: 50% 100%;
-moz-background-size: 50% 100%;
-o-background-size: 50% 100%;
-webkit-background-size: 50% 100%;
}Стили для простого маркированного списка достаточно стандартны, за исключением ключевой особенности – transition эффекта, который «оживляет» навигационное меню при наведении курсора мыши.
ul.nav li a {
transition: all 0.3s ease-out;
background: #cbcbcb url(border.png) no-repeat;
color: #174867;
padding: 7px 15px 7px 15px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
width: 100px;
display: block;
text-decoration: none;
box-shadow: 2px 2px 4px #888;
}Переход будет срабатывать в течение 300 мс после наведении курсора на элемент. Однако, на данный момент срабатывать нечему, исправим это, добавив необходимые стили:
ul.nav li a:hover {
background: #ebebeb url(border.png) no-repeat;
color: #67a5cd;
padding: 7px 15px 7px 30px;
}При наведении на элемент меню, в течении 300 мс измениться цвет фона, цвет текста и элемент меню будет как бы постепенно выезжать вправо за счет стиля padding.
Вот такой интересный эффект получился и никакого использования javascript. Меню работает во всех современных браузерах, включая IE.
