Красивое вертикальное меню на CSS

Опубликовано: 01.09.2018

видео Красивое вертикальное меню на CSS

Красивое меню за 7 минут / CSS + HTML

Красивое вертикальное меню

Новый стандарт 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 */ }

 


Выпадающее меню на css

Структура навигационных блоков стандартна:

 

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

         


Выпадающее МЕНЮ на чистом CSS / HTML

Далее применим стили для списка со ссылками. Ключевым стилем здесь будет 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.

 

rss