Красивое горизонтальное меню (адаптированное)

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

видео Красивое горизонтальное меню (адаптированное)

Как сделать красивое горизонтальное меню на сайт за 10 минут, Видео курс по CSS, Урок 19

Отличное горизонтальное меню, подойдет ко многим сайтам. Сделано на чистом CSS с эффектами анимации без использования jQuery и javascript. Также адаптировано под различные виды устройств, при меньшем размере экрана меню преобразуется в выпадающий список. Следует еще подчеркнуть, что меню очень удобное, изначально выглядит виде значка, но стоит только кликнуть на значок и открывается полное меню.



Посмотреть Demo

HTML код:

<div class="iconicmenu"> <input type="checkbox" id="togglebox" /> <ul> <li><a href="#">Главная</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS Библеотека</a></li> <li><a href="#">CSS Галерея</a></li> <li><a href="#">JavaScript</a></li> <li><label for="togglebox"></label></li> </ul> <label class="toggler" for="togglebox">Menu</label> </div>

CSS код:


Как легко сделать горизонтальное меню HTML CSS (За 5 минут)

.iconicmenu { position: relative; height: 45px; overflow: hidden; } .iconicmenu, .iconicmenu * { -moz-box-sizing: border-box; box-sizing: border-box; } .iconicmenu input[type="checkbox"] { /*checkbox используется для переключения меню*/ position: absolute; left: 0; top: 0; opacity: 0; } .iconicmenu > label { /* Главный значок для перек. состаяния меню */ z-index: 1000; display: block; position: absolute; width: 40px; height: 40px; float: left; top: 0; left: 0; background: white; text-indent: -1000000px; border: 6px solid black; /* цвет рамки */ border-width: 6px 0; cursor: pointer; -moz-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; /* переход */ } .iconicmenu > label::after { /* внутренние полосы */ content: ""; display: block; position: absolute; width: 100%; height: 18%; top: 19%; left: 0; border: 6px solid black; border-width: 6px 0; -moz-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; /* переход */ } .iconicmenu ul { /* UL меню внутри контейнера */ margin: 0; padding: 0; position: absolute; margin-left: 40px; background: #eee; left: -100%; /* скрыть меню */ height: 40px; /* высота меню*/ font: bold 14px Verdana; text-align: center; list-style: none; opacity: 0; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; -moz-perspective: 10000px; perspective: 10000px; -moz-transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in; /* переход для анимации */ } .iconicmenu li { display: inline; margin: 0; padding: 0; } .iconicmenu ul label { cursor: pointer; position: relative; height: 100%; text-align: center; } .iconicmenu ul label::after { content: "x"; display: inline-block; line-height: 14px; color: white; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; width: 20px; height: 20px; background: black; font-size: 18px; margin: 5px; margin-top: 10px; -moz-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu ul label:hover::after { -moz-transform: rotatey(180deg); -ms-transform: rotatey(180deg); -webkit-transform: rotatey(180deg); transform: rotatey(180deg); /* флип наклейки вертикально */ } .iconicmenu > label:hover, .iconicmenu > label:hover::after, .iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu input[type="checkbox"]:checked ~ label::after { border-color: darkred; /* цвет выделения главного меню */ } .iconicmenu input[type="checkbox"]:checked ~ ul { left: 8px; /* анимация */ opacity: 1; -moz-box-shadow: 1px 1px 5px gray; -webkit-box-shadow: 1px 1px 5px gray; box-shadow: 1px 1px 5px gray; } .iconicmenu li a { display: block; float: left; text-align: center; text-decoration: none; color: black; margin: 0; padding: 10px; padding-right: 15px; height: 100%; } .iconicmenu li a:hover { background: black; color: white; } /* ----------------------------- CSS Media запросы для адаптации ----------------------------- */ /* Эти правила регламентируют, какие части меню отображается в том случае, когда Размер экрана меньше определенной ширины. По умолчанию 2 этапа определяются в зависимости от браузера по ширине экрана */ @media screen and (max-width: 580px) { .iconicmenu input[type="checkbox"]:checked ~ label { display: none; } .iconicmenu input[type="checkbox"]:checked ~ ul { margin-left: 0; } } @media screen and (max-width: 560px) { /* Конвертировать горизонтального меню, чтобы перепад высот вниз, а не вверх (понятное для всех размеров экрана) */ .iconicmenu { overflow: visible; } .iconicmenu ul { height: auto; } .iconicmenu ul li { min-width: 200px;; display: block; } .iconicmenu ul li a { float: none;; text-align: left; } }

Media-запросы можно изменить под нужный вам размер экрана. По умолчанию стоит 580px и меньше это тот размер при котором меню будет преобразовываться в выпадающий список.


Красивое горизонтальное меню для Blogger

Источник: dynamicdrive.com

rss