Анимированное горизонтальное меню

17.09.2012

Анимированное горизонтальное меню

Меню — основной навигационный блок для любого сайта. Горизонтальное меню — присутствует на подавляющем большинстве сайтов в Сети. Сегодня я хочу представить вам интересное анимированное горизонтальное меню, которое не использует JavaScript в работе. Только CSS, только хардкор

Картинка для привлечения внимания:

Общий вид

Общий вид

Меню будет двухуровневое, это особенность реализации. На мой взгляд, этого должно хватить для большинства ситуаций. Итак, начнем со структуры HTML нашего горизонтального меню, она довольно проста:

<ul class="nav">
<li><div><a href="#">Главная</a></div></li>
<li><div class="nested"><a href="#">Работы</a>
<ul>
<li><a href="#">Разработка</a></li>
<li><a href="#">Дизайн</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Копирайтинг</a></li>
</ul>
</div></li>
<li><div><a href="#">О нас</a></div></li>
<li><div><a href="#">Блог</a></div></li>
<li><div><a href="#">Контакты</a></div></li>
</ul>

У нас обычный список, в котором присутствует еще один, вложенный — для второго уровня меню. Ничего сложного, как видите, все самое интересное — в файле стилей.


Я не буду рассказывать про общие стили нашего горизонтального меню, вроде ширины и расположения, все это вы сами увидите на демо-странице или в исходниках. Остановлюсь лишь на интересных особенностях:

/*стили блоков первого уровня*/
.nav>li>div {
position: relative;
width: 120px;
height: 160px;
margin-right: 5px;
overflow: hidden;
cursor: pointer;
text-align: center;
background: #00afdd;
box-shadow: 0px 1px 2px rgba(30, 30, 30, .3);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;}
.nav div:hover {
/* увеличиваем блок*/
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
/* меняем бэкграунд */
background: #fff;
z-index: 5}

Для блоков первого уровня мы устанавливаем плавную анимацию, которая немного увеличивает наш блок при наведении. Плюс — мы меняем ему цвет фона.

/*Стиль основных ссылок*/
.nav>li>div>a {
top: 0px;
position: relative;
display: block;
height: 100px;
padding-top: 65px;
text-decoration: none;
font-size: 20px;
font-weight: normal;
color: #fff;
-webkit-transition: all .3s;
-ms-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;}
/*Создаем размытие*/
.nav:hover div>a {opacity: .3;
text-shadow: 0px 0px 5px #fff,
0px 0px 5px #fff,
0px 0px 9px #fff;}
/*Основные ссылки при наведении*/
.nav div>a:hover, .nav li:hover a {
top:-4px;
text-shadow:none;
opacity:1;
font-size:23px;
color:#29cef1}

При наведении на блок, он увеличивается, на остальных же текст «замыливается», для акцентирования внимания на текущем блоке.

/*Двигаем ссылку вверх при наведении*/
.nav .nested a:hover, .nav .nested:hover a {top:-60px;height:160px}
/*Подменю*/
.nav ul {
position: absolute;
top: -9999px;
margin: auto;
display: block;
width: 120px;
text-align: center;
opacity: 0;
-webkit-transition: .5s opacity ease-out;
-ms-transition: .5s opacity ease-out;
-moz-transition: .5s opacity ease-out;
-o-transition: .5s opacity ease-out;}
/* показываем подменю */
.nav li div:hover ul {
top: 35px;
color: #fff;
opacity: 1}

В обычном состоянии, вложенный список нашего меню находится далеко за пределами экрана (top:-9999px), но при наведении мы его отображаем в нужном месте (top:35px). Ссылка на верхний уровень меню при этом «уезжает» вверх, занимая место над вложенным списком.

/* Ссылки подменю */
.nav div:hover ul li a {
color: #00afdd;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
-webkit-transition: color .3s ease-out;
-ms-transition: color .3s ease-out;
-moz-transition: color .3s ease-out;
-o-transition: color .3s ease-out}
/* Цвет ссылок подменю при наведении */
.nav div ul li a:hover {color:#000}
/* Фон основных ссылок */
.nav>li>.blue-white {background:#00afdd}
/* фон основных ссылок при наведении */
.nav>li>.blue-white:hover {background:white}
/* Цвет текста основных ссылок */
.nav>li>.blue-white>a {color:#fff}
/* Цвет текста основных ссылок при наведении */
.nav>li>.blue-white:hover a {color:#00afdd}
/* Цвет ссылок подменю при наведении */
.nav .blue-white ul li a:hover {color:black}

Этот код указывает цвета, которые будут использоваться нашим меню. В коде я оставил комментарии, думаю, разберетесь что к чему. Ну и как обычно, демо-страница и исходники горизонтального меню.

ДемоИсходники

В итоге получается достаточно простое, но стильное горизонтальное меню в минималистичном исполнении. В Сети существует огромное количество уроков по созданию разнообразных горизонтальных меню для сайтов. Большой плюс конкретно этого варианта — оригинальность. Я не встречал пока подобных решений, если у вас есть другая информация — дайте знать.

Удачного дня

follow us in feedly

,

Комментариев: 10

  1. xHTML

    Почему у меня оно не горизонтальное а вертикальное? вниз идёт а слова норм в чём проблема?

    Ответить
    • GerinG

      У меня работает четко, как на скриншоте выше, с анимацией. Проверяю в последнем Хроме и предпоследней Лисе, все ок. Что у вас происходит, без понятия, мало информации

      Ответить
  2. GerinG

    Fill, привет Да, я видел горизонтальное меню от Bootstrap, нравится. Единственное — сейчас оно используется на многих сайтах, поэтому как-то даже приелось…

    Ответить
  3. Fill

    Привет! На Bootstrap есть неплохой пример выпадающего меню, за стили для меню спасибо, щас попробую прикрутить у себя на сайте, если понравится оставлю его.

    Ответить
  4. GerinG

    Vadim, спасибо )) Внести ваши изменения — не проблема. Думаю, сами разберетесь? Если нет — отпишите в почту, помогу

    Ответить
  5. Vadim

    Красивая менюшка получилась, по демо только я бы поменял немного цвет шрифта на более темный, читается сложновато. И скорость затемнения бы увеличил если можно

    Ответить
  6. Семенов Анатолий

    Я использую горизонтальное выпадающее меню на большинстве своих блогов, так как удобно и помещается достаточно элементов, которые не так то просто разместить обычным способом, а анимированное еще и привлекает внимание пользователей, благодарю за код, буду использовать

    Ответить
  7. Ирина

    Я пока тоже не втречала такого решения для горизонтального меню. Я думаю, стоит попробовать и разнообразить его стилями.

    Ответить