Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML .
Вертикальное меню
Первым шагом создания вертикального меню будет создание маркированного списка . Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором "navbar". Каждый элемент
Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:
#navbar { margin: 0; padding: 0; list-style-type: none; width: 100px; }
Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.
Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.
#navbar a { background-color: #949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid #33ADFF; display: block; } #navbar li { border-left: 10px solid #666; border-bottom: 1px solid #666; }
Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:
При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса:hover.
Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:
#navbar a:hover { background-color: #666; border-left: 5px solid #3333FF; } Попробовать »
Горизонтальное меню
В предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.
Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов
Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:
Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:
#navbar { margin: 0; padding: 0; list-style-type: none; } #navbar li { display: inline; } Попробовать »
Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:
#navbar { margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; } #navbar a { color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; } #navbar a:hover { border-radius: 20px 5px; background-color: #0066FF; } Попробовать »
Выпадающее меню
Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.
Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:
Подпункты мы разместим в отдельном списке, вложив его в элемент
Попробовать »
Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент
#navbar ul { display: none; } #navbar li:hover ul { display: block; }
Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none; , чтобы они отображались друг под другом.
#navbar, #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar li { float: left; } #navbar ul li { float: none; }
Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative; , а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.
#navbar ul { display: none; position: absolute; top: 100%; } #navbar li { float: left; position: relative; } #navbar { height: 30px; } Попробовать »
Высота для родительского списка была добавлена специально, так как браузеры не учитывают в качестве содержимого элемента плавающий контент, то без добавления высоты наш список будет проигнорирован браузером и контент, следующий за списком, будет обтекать наше меню.
Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:
#navbar ul { display: none; background-color: #f90; position: absolute; top: 100%; } #navbar li:hover ul { display: block; } #navbar, #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar { height: 30px; background-color: #666; padding-left: 25px; min-width: 470px; } #navbar li { float: left; position: relative; height: 100%; } #navbar li a { display: block; padding: 6px; width: 100px; color: #fff; text-decoration: none; text-align: center; } #navbar ul li { float: none; } #navbar li:hover { background-color: #f90; } #navbar ul li:hover { background-color: #666; }
Здравствуйте, дорогие читатели блога. Сегодня мы будем учиться делать с Вами классное, цветное и выпадающее меню на чистом CSS3. Огромный плюс данного меню в том, что тут не используются скрипты, только CSS.
Так же мы сделаем его в нескольких цветах, которые пользователь может выбрать сам. Честно скажу Вам, что смотрится очень клёво и практично.
Ну а теперь давайте будем делать это наше .
Выпадающее и цветное меню для сайта на чистом CSS3
ι
HTML
Для начала давайте сделаем сам код HTML, и посмотрим как он будет выглядеть. Тут как обычно ничего сложного нет. Мы здесь выведем сам перечень цветов которые находятся над меню, и которые сможет выбирать пользователь. А также выведем код самого . Вот как этот весь код будет выглядеть:
CSS
Теперь, непосредственно давайте задавать сам стиль CSS для меню и для цвета. Вот он сам CSS код:
#nav,#nav ul { list-style: none outside none; margin: 0; padding: 0; } #nav { background-color: #000000; border-radius: 5px 5px 5px 5px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); display: table; padding: 10px; position: relative; } #nav ul { background-color: red; border:1px solid red; border-radius: 0 5px 5px 5px; border-width: 0 1px 1px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); left: -9999px; overflow: hidden; padding: 20px 0 10px; position: absolute; top: -9999px; -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -moz-transition: -moz-transform 0.1s linear; -ms-transition: -ms-transform 0.1s linear; -o-transition: -o-transform 0.1s linear; -webkit-transition: -webkit-transform 0.1s linear; transition: transform 0.1s linear; } #nav li { float: left; position: relative; } #nav li a { color: #FFFFFF; display: block; font-size: 16px; padding: 7px 20px; text-decoration: none; } #nav li:hover > a { background-color: red; border-radius: 5px 5px 5px 5px; color: #FFFFFF; } #nav li:hover > a.hsubs { border-radius: 5px 5px 0 0; } #nav li:hover ul.subs { left: 0; top: 34px; width: 180px; -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); -webkit-transform: scaleY(1); } #nav ul li { width: 100%; } #nav ul li:hover > a { background-color: #222222 !important; border-radius: 5px 5px 5px 5px; } /* colors */ .colorScheme { height: 32px; list-style: none outside none; margin: 0 auto 25px; width: 320px; } .colorScheme a { cursor: pointer; float: left; height: 30px; margin: 0 5px; width: 30px; } .colorScheme .red { background-color: red; } .colorScheme .orange { background-color: orange; } .colorScheme .pink { background-color: pink; } .colorScheme .green { background-color: green; } .colorScheme .blue { background-color: blue; } .colorScheme .indigo { background-color: indigo; } .colorScheme .violet { background-color: violet; } .colorScheme .grey { background-color: grey; } #red:target ~ #nav ul { background-color: red; border: 1px solid red; } #orange:target ~ #nav ul { background-color: orange; border: 1px solid orange; } #pink:target ~ #nav ul { background-color: pink; border: 1px solid pink; } #green:target ~ #nav ul { background-color: green; border: 1px solid green; } #blue:target ~ #nav ul { background-color: blue; border: 1px solid blue; } #indigo:target ~ #nav ul { background-color: indigo; border: 1px solid indigo; } #violet:target ~ #nav ul { background-color: violet; border: 1px solid violet; } #grey:target ~ #nav ul { background-color: grey; border: 1px solid grey; } #red:target ~ #nav li:hover > a { background-color: red; } #orange:target ~ #nav li:hover > a { background-color: orange; } #pink:target ~ #nav li:hover > a { background-color: pink; } #green:target ~ #nav li:hover > a { background-color: green; } #blue:target ~ #nav li:hover > a { background-color: blue; } #indigo:target ~ #nav li:hover > a { background-color: indigo; } #violet:target ~ #nav li:hover > a { background-color: violet; } #grey:target ~ #nav li:hover > a { background-color: grey; }
Приветствую! Если ты начинающий верстальщик, то рано или поздно ты столкнешься с тем, что захочешь как-то оживить свои страницы, сделать их хоть немного интерактивными. Как нельзя лучше тут тебя смогут выручить CSS анимации. Но нужно знать, где и как их применять.
Сегодня я расскажу, как сделать выпадающее меню на чистом CSS и как добавить ему плавности с помощью CSS анимации. Если ты не знаешь, то самое время ознакомиться с азами.
Верстаем меню HTML + CSS
Для начала, чтобы нам было с чем работать, давайте сверстаем простое одноуровневое меню. Не будем сильно заморачиваться с дизайном, для наглядности хватит и этого:
Что мы имеем? Самый обыкновенные ненумерованный список с идентификатором «top_menu» и со ссылками, обернутыми в элементы этого самого списка. Все банально и просто. При наведении пункты меню меняют цвет… это все вы уже знаете и понимаете, как это сделать (я надеюсь).
Добавляем меню второго уровня
Чтобы сделать многоуровневое меню, нам нужно добавить второй ненумерованный список внутрь первого. Думаю, это вы проходили где-то на начальных уроках. А также то, что его вставить нужно не просто внутри нашего списка, а именно внутри элемента списка, то есть тега «li », сразу после закрывающего тега «a».
Позиционируем вложенные списки абсолютно по отношению к «li », в которые они вложены. А все «li » верхнего уровня позиционируем относительно (relative ). Чтобы выпадающее меню находилось СРАЗУ же после нашего меню верхнего уровня, ему (выпадающему – “inner_menu ”) нужно задать
Position: absolute; top: 100%;
То есть отступ от верхней границы родителя будет равен высоте родителя. Очень логично, по-моему.
Помимо позиционирования нужно придать выпадающему меню стиль как у меню верхнего уровня. Яблочко от яблоньки, как говорится…
Как видите, наше выпадающее меню пока выглядит не выпадающим, а выпавшим и висящим. Но ничего, это мы скоро исправим.
Как сделать выпадающее меню действительно выпадающим
Нет ничего проще! Чтобы наш вложенный список сделать выпадающим меню, его нужно просто скрыть! А потом открывать только тогда, когда курсор мыши будет проноситься над пунктом меню верхнего уровня, который содержит в себе выпадающее меню. Звучит, может быть, немного сложно, но на самом деле это решается буквально несколькими строчками кода.
Выпадающему меню добавляем:
Display: none;
А чтобы его отобразить, нужно прописать:
#top_menu > li:hover > ul { display: block; }
Что нам говорит это целое скопище селекторов? Читаем с конца. Мы задаем стили (видмости) для списка второго уровня, который лежит внутри элемента списка первого уровня, но стили эти сработают только в том случае, если мы наведем мышкой (ховер) на элемент « li» в который вложен наш список второго уровня.
Надеюсь, я выразился понятно. Если нет, попробуйте прочитать несколько раз. А еще лучше просто понимать это, глядя на код. Смотрим, что у нас получилось:
Да, мы вроде бы добились того, чего хотели – мы сделали выпадающее меню, самое настоящее выпадающее меню, мать его! Но ему чего-то не хватает. А знаете чего? Плавности! Ведь все выглядит так, как будто меню не выпадает, а просто появляется. Причем очень резко, моментально даже, я бы сказал.
Ну что же, давайте еще немного поколдуем над ним.
Плавное выпадающее меню – это просто
Итак, давайте сделаем плавное выпадающее меню на чистом CSS. Зачем это делать? Потому что люди любят, когда все плавненько и мягонько… и это выглядит красиво. Будет плюс к юзабилити вашего сайта. Погнали!
Запомните, вы можете анимировать только точные математические величины, например 50px и 300px, 0 и 100%, 0,5 и 1,0 и так далее. В нашем случае мы не сможем анимировать два состояния нашего выпадающего меню (display:none; и display:block; ).
Но мы можем заменить их на прозрачность – opacity:0 и opacity:1. И задать время в течение которого наше меню будет проявляться из прозрачного состояния. Да, это действительно сработает, однако это не совсем тот эффект, который вы возможно ожидали. Поэтому давайте сделаем немного сложнее. Но это того стоит, поверьте.
Чтобы анимация получилась более плавной и предсказуемой, пришлось задать фиксированную высоту пунктам выпадающего меню, хотя можно было обойтись и без этого. Методов уйма, только придумывай комбинации и решай задачи.
Как видно из кода, мы анимировали высоту элементов выпадающего списка и их прозрачность. Этого оказалось достаточно для того, чтобы сделать красивую плавную анимацию выпадающего меню.
Что нам понадобилось для анимации? Два состояния пунктов нашего меню, а также свойство transition, которое проинтерполировало эти состояния, то есть заполнило все промежуточные значения за отведенный промежуток времени. Вот и все!
Еще проще можно было бы сделать с применением jQuery, но мы же оговорили сначала, что будем сегодня работать с чистым CSS. А еще красивее можно было сделать, добавив к анимациям кривые Безье, однако эта тема немного выходит за рамки сегодняшней. Но мы к ней обязательно вернемся позже.
Вывод:
Теперь вы можете похвастаться своим друзьям и близким, что знаете, как сделать выпадающее меню на чистом CSS. Это действительно полезный навык, который вам еще не раз пригодится. Ну, сами посудите, много ли вы видели сайтов со статичным меню? Нет, большинство сайтов имеют именно выпадающее меню.
Кстати это был мой первый урок по CSS. Опишите, как вам? Понятно все объяснил или нужно еще подробнее разжевывать? И стоит ли вообще продолжать писать статьи на тему лайфхаков в CSS?
Спасибо за внимание и до скорых встреч!
Вы дочитали до самого конца?
Была ли эта статья полезной?
Да Нет
Что именно вам не понравилось? Статья была неполной или неправдивой?
Напишите в клмментариях и мы обещаем исправиться!
Горизонтальное выпадающее меню используется для упорядочения структуры навигации по сайту. Оптимальное количество уровней вложения — один-два. Чем меньше уровней вложений, тем легче посетителю сайта найти нужную информацию. Как создать обычное горизонтальное меню, подробно изложено в .
Как сделать горизонтальное выпадающее меню
1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения
HTML-разметка горизонтального выпадающего меню отличается от обычного меню тем, что к нужному элементу списка
- или <оl> .
- display: flex;
- используем transition ;
- будем позиционировать элементы при помощи position .
- Одежда
- Электроника
- Продукты питания
- Инструменты
- Быт. химия
- Электроника
- Камеры
- Компьютеры
- Телефоны
- Главная
- Продукция
- Одежда
- Обувь
- Куртки
- Брюки
- Электроника
- Камеры
- Компьютеры
- Телефоны
- Samsung
- Flf
- Apple
- Продукты питания
- Инструменты
- Быт. химия
- Одежда
- Услуги
- Услуга 1
- Услуга 2
- Услуга 3
- Новости
- Контакты
Для позиционирования вложенного меню относительно основного меню объявляются следующие стили:
— для элемента списка, в который вложен выпадающий список: li {position: relative;} ;
— для выпадающего меню ul {position: absolute;} , а также значения left и top .
Для наглядности и удобства форматирования добавим основному меню класс topmenu , выпадающему — submenu .
Скрыть выпадающее меню можно несколькими способами:
1) display: none;
2) visibility: hidden;
3) opacity: 0;
4) transform: scaleY(0);
5) с помощью библиотеки jQuery.
Способ 1. {display: none;}
Выпадающее меню скрывается с помощью.submenu {display: none;} , при наведении показывается с помощью.topmenu li:hover .submenu {display: block;} .
Способ 2. {visibility: hidden;}
Меню скрывается с помощью.submenu {visibility: hidden;} , показывается — .topmenu li:hover .submenu {visibility: visible;} .
Способ 3. {opacity: 0;}
Меню скрывается с помощью.submenu {opacity: 0;} , показывается — .topmenu li:hover .submenu {opacity: 1;} . Чтобы меню не появлялось при наведении на область, где оно расположено, добавляем visibility: hidden; , а при наведении меняем на visibility: visible; .
Способ 4. {transform: scaleY(0);}
Меню скрывается с помощью.submenu {transform: scaleY(0);} , показывается — .topmenu li:hover .submenu {transform: scaleY(1);} . Поскольку трансформация элемента по умолчанию происходит из центра, нужно добавить для.submenu {transform-origin: 0 0;} , т.е. из верхнего левого угла.
Способ 5. С помощью jQuery
$(".five li ul").hide(); // скрываем выпадающее меню $(".five li:has(".submenu")").hover(function(){ $(".five li ul").stop().fadeToggle(300);} /* отбираем элемент списка, который содержит элемент с классом.submenu и добавляем ему функцию при наведении, которая показывает и скрывает выпадающее меню */);2. 3D выпадающее меню
Интересные эффекты можно создавать с помощью CSS3-трансформаций, например, заставить меню появляться из глубины экрана.
* { box-sizing: border-box; } body { margin: 0; background: radial-gradient(#BFD6E2 1px, rgba(255,255,255,0) 2px); background-size: 10px 10px; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { display: block; text-decoration: none; outline: none; transition: .4s ease-in-out; } .topmenu { backface-visibility: hidden; background: rgba(255,255,255,.8); } .topmenu > li { display: inline-block; position: relative; } .topmenu > li > a { font-family: "Exo 2", sans-serif; height: 70px; line-height: 70px; padding: 0 30px; font-weight: bold; color: #003559; text-transform: uppercase; } .down:after { content: "\f107"; margin-left: 8px; font-family: FontAwesome; } .topmenu li a:hover { color: #E6855F; } .submenu { background: white; border: 2px solid #003559; position: absolute; left: 0; visibility: hidden; opacity: 0; z-index: 5; width: 150px; transform: perspective(600px) rotateX(-90deg); transform-origin: 0% 0%; transition: .6s ease-in-out; } .topmenu > li:hover .submenu{ visibility: visible; opacity: 1; transform: perspective(600px) rotateX(0deg); } .submenu li a { color: #7f7f7f; font-size: 13px; line-height: 36px; padding: 0 25px; font-family: "Kurale", serif; }
3. Разворачивающееся выпадающее меню с логотипом
В этом примере в верхнем разделе страницы расположены логотип и навигация по сайту. В качестве логотипа может быть картинка или текст. Выпадающее меню постепенно разворачивается из-под элемента верхнего списка с помощью функции CSS3-трансформации.
4. Увеличивающееся выпадающее меню
Ещё один пример для выпадающего меню. Эффект увеличения при появлении меню реализуется за счет уменьшения первоначального размера.submenu {transform: scale(.8);} , при наведении размер увеличивается до.topmenu > li:hover .submenu {transform: scale(1);} .
* { box-sizing: border-box; } body { margin: 0; background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) } nav { background: white; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { text-decoration: none; outline: none; display: block; transition: .4s ease-in-out; } .topmenu { text-align: center; padding: 10px 0; } .topmenu > li { display: inline-block; position: relative; } .topmenu > li:after { content: ""; position: absolute; right: 0; width: 1px; height: 12px; background: #d2d2d2; top: 16px; box-shadow: 4px -2px 0 #d2d2d2; transform: rotate(30deg); } .topmenu > li:last-child:after { background: none; box-shadow: none; } .topmenu > li > a { padding: 12px 26px; color: #767676; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; font-family: "Exo 2", sans-serif; } .topmenu li a:hover { color: #c0a97a; } .submenu { position: absolute; left: 50%; top: 100%; width: 210px; margin-left: -105px; background: #fafafa; border: 1px solid #ededed; z-index: 5; visibility: hidden; opacity: 0; transform: scale(.8); transition: .4s ease-in-out; } .submenu li a { padding: 10px 0; margin: 0 10px; border-bottom: 1px solid #efefef; font-size: 12px; color: #484848; font-family: "Kurale", serif; } .topmenu > li:hover .submenu { visibility: visible; opacity: 1; transform: scale(1); }
5. Подъезжающее выпадающее меню
Горизонтальное меню с мини-анимацией: при наведении на ссылки верхнего меню появляется маленький кружок, который также сопровождает появление выпадающего меню.
@import url("https://fonts.googleapis.com/css?.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100vh; position: relative; } body:before { content: ""; position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; background: linear-gradient(45deg, rgba(0,0,0,0), rgba(255,255,255,.8)); } nav { text-align: center; padding: 40px 0 0; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { text-decoration: none; display: block; color: #222; } .topmenu > li { display: inline-block; position: relative; } .topmenu > li > a { position: relative; padding: 10px 15px; font-family: "Kaushan Script", cursive; font-size: 1.5em; line-height: 1; letter-spacing: 3px; } .topmenu > li > a:before { content: ""; position: absolute; z-index: 5; left: 50%; top: 100%; width: 10px; height: 10px; background: white; border-radius: 50%; transform: translate(-50%, 20px); opacity: 0; transition: .3s; } .topmenu li:hover a:before { transform: translate(-50%, 0); opacity: 1; } .submenu { position: absolute; z-index: 4; left: 50%; top: 100%; width: 150px; padding: 15px 0 15px; margin-top: 5px; background: white; border-radius: 5px; box-shadow: 0 0 30px rgba(0,0,0,.2); box-sizing: border-box; visibility: hidden; opacity: 0; transform: translate(-50%, 20px); transition: .3s; } .topmenu > li:hover .submenu { visibility: visible; opacity: 1; transform: translate(-50%, 0); } .submenu a { font-family: "Libre Baskerville", serif; font-size: 11px; letter-spacing: 1px; padding: 5px 10px; transition: .3s linear; } .submenu a:hover {background: #e8e8e8;}
В этом уроке мы сделаем, классическое горизонтальное меню на чистом CSS. Оно имеет иконки в списках. При наведение на пункт он плавно меняет цвет кнопки и текста, добавляется тень. Выпадающие списки можно делать многоуровневыми и главное это все довольно просто реализовано на чистом CSS3.
В уроке задействуем:
HTML структура горизонтального меню
П ервым делом напишем разметку под горизонтальное меню. Открываем свою среду разработки в моем случае это PhpStorm , создаем index.html файл, пропишем каркас html:5 , заменю lang на ru .
Все meta удалю кроме кодировки, пропишу свой заголовок «Tom menu ».
Между body пишем тег header , а в нем блок с классом .dws-menu в котором будет находиться наше меню. Далее структура будет следующая, создадим списки в количестве пяти штук. В каждом списке будет ссылка с атрибутом href="#" . Затем будет идти иконка I с классом .fa .fa-
Жмем применить.
Пропишем название пунктов меню (Главная, Продукция, Услуги, Новости, Контакты ).
Далее отбираем и подключаем иконки. Переходим на сайт
Font Awesome , отберем себе иконки под данные пункты меню:
Скачиваем архив с сайта с иконками, извлекаем его содержимое к себе на компьютер, копируем папку fonts и папку css в свою среду разработки.
В папке fonts лежат шрифты иконок, а в папке css их стили. Сжатые стили можно удалить font-awesome.min, подключим не сжатый font-awesome.css .
В index.html подключаем иконки, и прописываем каждому пункту свой стиль иконки (home , shopping-cart , cogs , th-list , envelope-open ).
Основной каркас мы сделали, подменю сформируем после описания основного стиля, а теперь создадим файл где будем описывать основные стили горизонтального меню style.css
и подключим его к index.html
. Для проверки, что стили подключены, создам папку img
, в ней размещу произвольную картинку на задний фон. Пропишем подключение картинки при помощи background
.
Body{ background-image: url("../img/ep_naturalwhite.png"); }
Описываем CSS стили горизонтального меню
Первым делом сбросим все отступы, которые могут задавать по умолчанию разные браузеры:
Dws-menu *{ margin: 0; padding: 0; }
Зададим header в 200 пик. и назначим шрифт Cuprum который можно скачать и отдельно подключить к себе на сайте, на всякий случай пропишем дополнительные шрифты.
Header{ margin: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }
Скроем маркеры у списков:
Dws-menu ul, .dws-menu ol{ list-style: none; }
Списки отобразим по горизонтали при помощи display: flax , и делаем его по центру:
Dws-menu > ul{ display: flex; justify-content: center; }
В header сделаем отступ только сверху, пропишем margin-top .
Header{ margin-top: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }
Оформим наше меню, зададим цвет кнопок, шрифт и т.д.
Dws-menu > ul li a{ display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; }
Затем позиционируем иконки, спискам присвоим position: relative; для дальнейшее центровки иконок:
Dws-menu > ul li{ position: relative; }
Dws-menu > ul li > a i.fa{ position: absolute; top: 15px; left: 12px; font-size: 18px; }
Назначим спискам разделитель в виде бордюрчика, отбираем первый элемент LI, задаем бордюр. Отбираем последний элемент LI присваиваем ему аналогичный бордюр.
Dws-menu > ul li:first-child{ border-left: 1px solid #b2b3b5; } .dws-menu > ul li:last-child{ border-right: 1px solid #babbbd; }
Делаем разделители спискам LI :
.dws-menu > ul li{ position: relative; border-right: 1px solid #c7c8ca; }Меню приобрело внешний вид, затем можно приступать к описанию стилей при наведении.
Анимируем горизонтальное меню при наведение
Dws-menu li a:hover{ background: #454547; color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0.3s ease; }
И что бы этот эффект плавно исчезал, добавим этот стиль к ссылке в покое:
.dws-menu > ul li a{ display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; transition: all 0.3s ease; }Основное меню закончили и можно приступать к описанию подменю и вложенные в них меню.
Описываем выпадающее меню CSS / HTML
О ткрываем index.html и добавим, к примеру, в продукцию дополнительное меню. Между списками LI вставляем UL , в нем разместим пять списков, в которых будут находиться ссылки с атрибутом herf=”#” .
ul>li*5>a
Жмем применить, пропишем название пунктов (Одежда, Электроника, Продукты питания, Инструменты, Быт. химия ).
Затем открываем style.css
и опишем стили подменю.
Отбираем второй список и присвоим ему position: absolute; , зададим минимальную ширину в 150 пик.
/*sub menu*/ .dws-menu li ul{ position: absolute; min-width: 150px; }
Пропишем спискам border в 1 пик.
Dws-menu li > ul li{ border: 1px solid #c7c8ca; }
Для ссылок в подменю установим отступы в 10 пик., уберем трансформацию текста и фон сделаем на пару тонов темнее background: #e4e4e5; .
Dws-menu li > ul li a{ padding: 10px; text-transform: none; background: #e4e4e5; }
Затем создадим еще одно вложенное меню. Перейдем в файл разметки и к примеру в "Электронике" формируем по аналогии меню как делали мы до этого. Описываем заголовки пунктов (Камеры, Компьютеры, Телефоны ) и сохраняемся.
Они вывелись, но скрыты под основным меню, теперь position: absolute; вложенного UL и сдвинем его на 150 пик. в сторону:
Dws-menu li > ul li ul{ position: absolute; right: -150px; top: 0; }
/*sub menu*/ .dws-menu li ul{ position: absolute; min-width: 150px; display: none; }А для их появления отберем списки при наведении и отобразим их при помощи display: block; .
Dws-menu li:hover > ul{ display: block; }
Теперь можно добавлять многоуровневые меню просто простым копированием блока UL , изменением его пунктов.
Затем давайте завершающим этапам оформим кнопки ингредиентом. Я пользуюсь
CSS генератором , у меня создано несколько Presets
, вы можете создать свои, в моем случае я просто копирую данный код и размещаю в место background
который прописывал до этого.
При желании данное меню можно оформить под тот стиль, который именно подойдем вам на сайте, достаточно просто с генерировать цвет и заменить его в коде. Получилась простое и в тоже время симпатичное горизонтальное меню, сделанное на чистом CSS.
