Вертикальное выдвигающееся меню с помощью CSS

Сегодня мы рассмотрим, как сделать очень эффектное меню для сайта с помощью только стилей CSS. Идея заключается в том, что когда пользователь наводит курсор мыши на пункт меню слева от пункта плавно выезжает полоса определенного цвета и занимает место под всем пунктом меню в качестве фона. При убирании курсора мыши с пункта меню полоса также плавно уезжает обратно. В данном примере будет сделанно 2 варианта меню, в первой половине меню будет вариант с плавным затуханием полосок, а во второй половине меню будет вариант с небольшим отскоком полосок. Для начала вам необходимо скачать исходник к данной галерее.

Шаг 1. HTML

Во-первых нам нужно подключить к HTML странице таблицу стилей CSS, которая будет отвечать за анимацию нашего меню:

<link rel="stylesheet" type="text/css" href="nice-menu.css" />
Теперь нам нужно разметить HTML страницу под наше меню, для этого в нужном месте необходимо сделать каркас для вертикальной навигации:
<!-- Пример меню с затуханием полосок --> <div class = "container" style = ""> <ul class = "nice-menu"> <li class = "orange"><a href = "">Главная</a></li> <li class = "red"><a href = "">О нас</a></li> <li class = "green"><a href = "">Контакты</a></li> <li class = "blue"><a href = "">Профиль</a></li> <li class = "bright"><a href = "">Портфолио</a></li> <li class = "red"><a href = "">Материалы</a></li> </ul> </div> <!-- Пример меню с отскоком полосок --> <div class = "container" style = ""> <ul class = "nice-menu bounce"> <li class = "orange"><a href = "">Главная</a></li> <li class = "red"><a href = "">О нас</a></li> <li class = "green"><a href = "">Контакты</a></li> <li class = "blue"><a href = "">Профиль</a></li> <li class = "bright"><a href = "">Портфолио</a></li> <li class = "red"><a href = "">Материалы</a></li> </ul> </div>

Шаг 2. CSS

Основные настройки страницы спомощью стилей CSS мы разместили в самой странице в теле документа между тегами , теперь же рассмотрим таблицу стилей CSS nice-menu.css непосредственно для меню, подключенную к странице ранее. В ней мы настроим цвета прямоугольников, скорость анимации меню в миллисекундах, скорость отскока прямоугольников, их длину, отступы, цвет ссылок, позиционирование и т. д.:

ul.nice-menu li { -moz-animation-name: shrink; -moz-animation-duration: 0.5s; -moz-animation-timing-function: ease-in-out; -webkit-animation-name: shrink; -webkit-animation-duration: 0.5s; -webkit-animation-timing-function: ease-in-out; } ul.nice-menu.bounce li { -moz-animation-name: shrink-bounce; -moz-animation-duration: 0.5s; -moz-animation-timing-function: ease-in-out; -webkit-animation-name: shrink-bounce; -webkit-animation-duration: 0.5s; -webkit-animation-timing-function: ease-in-out; } ul.nice-menu li:hover { width: 200px; padding-left: 20px; -moz-animation-name: expand; -moz-animation-duration: 0.5s; -moz-animation-timing-function: ease-in-out; -webkit-animation-name: expand; -webkit-animation-duration: 0.5s; -webkit-animation-timing-function: ease-in-out; } ul.nice-menu.bounce li:hover { -moz-animation-name: expand-bounce; -moz-animation-duration: 0.5s; -moz-animation-timing-function: ease-in-out; -webkit-animation-name: expand-bounce; -webkit-animation-duration: 0.5s; -webkit-animation-timing-function: ease-in-out; } ul.nice-menu a { width: 200px; text-decoration: none; font-size: 14px; color: #FFF; text-shadow: 0px 0px 3px #333; font-weight: bold; position: absolute; padding: 5px 0px; padding-left: 20px; } ul.nice-menu li.green { background: rgb(107,186,112); } ul.nice-menu li.blue { background: rgb(78,92,127); } ul.nice-menu li.orange { background: rgb(216,121,40); } ul.nice-menu li.dark { background: rgb(42,32,30); } ul.nice-menu li.red { background: rgb(178,59,30); } ul.nice-menu li.bright { background: rgb(241,249,210); }

На этом все. Более подробно данное меню можно разобрать в исходнике.

демо
скачать
источник