Главная › Новости

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

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

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

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

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

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

Общий вид

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

Адаптивное вертикальное меню на CSS

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

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

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

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

Удачного дня