Вертикальное меню на CSS. Горизонтальное меню css с иконками Выпадающее меню с иконками css

В этом уроке мы сделаем, классическое горизонтальное меню на чистом CSS. Оно имеет иконки в списках. При наведение на пункт он плавно меняет цвет кнопки и текста, добавляется тень. Выпадающие списки можно делать многоуровневыми и главное это все довольно просто реализовано на чистом CSS3.

В уроке задействуем:

• display: flex;
• используем transition ;
• будем позиционировать элементы при помощи position .

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 , изменением его пунктов.

• Главная
• Продукция
  • Одежда
    • Обувь
    • Куртки
    • Брюки
  • Электроника
    • Камеры
    • Компьютеры
    • Телефоны
      • Samsung
      • Flf
      • Apple
  • Продукты питания
  • Инструменты
  • Быт. химия
• Услуги
  • Услуга 1
  • Услуга 2
  • Услуга 3
• Новости
• Контакты

Затем давайте завершающим этапам оформим кнопки ингредиентом. Я пользуюсь CSS генератором , у меня создано несколько Presets , вы можете создать свои, в моем случае я просто копирую данный код и размещаю в место background который прописывал до этого.

.dws-menu > ul li a{ display: block; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Custom+3 */ background: #c9c9c9; /* Old browsers */ background: -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9c9c9", endColorstr="#757577",GradientType=0); /* IE6-9 */ padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; transition: all 0.3s ease; } .dws-menu li a:hover{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0e1e5+0,454547+2,454547+98,e0e1e5+100 */ background: #e0e1e5; /* Old browsers */ background: -moz-linear-gradient(top, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e0e1e5", endColorstr="#e0e1e5",GradientType=0); /* IE6-9 */ color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0.3s ease; }

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

Хорошая навигация по сайту очень важна блоггеров. С ее помощью посетитель быстро находит нужную страницу блога. Ценят понятность сайта и поисковики. В этой статье вы узнаете как сделать горизонтальное меню для Blogger со всплывающими иконками.
Меню со всплывающими кнопками-иконками создан на CSS. Для просмотра меню, нажмите на кнопку ниже:

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

1. Перейдите во вкладку “Шаблон”, поставьте курсор в редактор (в любое место),
2. Нажмите Ctrl + F для поиска по коду и найдите отрезок кода ]]>
3. Вставьте перед этим кодом следующий код:
   ..
   

   /* The CSS Code for the menu starts here bloggertrix.com */ #btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
   #btrix-nav li {float: left;}
   #btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
   #btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
   #btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}
   #btrix-nav li a:hover {cursor: pointer;}
   #btrix-nav li a:hover img {top: -85px;}
   #btrix-nav li a:hover .aname {top: 85px;}
   #btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
   #btrix-nav li:nth-child(2) a {background: #9bc704;}
   #btrix-nav li:nth-child(3) a {background: #0dc3ff;}
   #btrix-nav li:nth-child(4) a {background: #51a2ec;}
   #btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}

4. Теперь перейдите во вкладку “Дизайн”,
5. Добавьте новый элемент HTML / JavaScript и добавьте код:

   
   

   Главная https://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png " />

   
   

   Скачать https://2.bp.blogspot.com/-TcXder58ssQ/Ug5ASx8pT0I/AAAAAAAAA0o/5UdA4_gLnV8/s1600/btrix-download.png " />

   
   

   MySql https://2.bp.blogspot.com/-umlQ7fKXobk/Ug5AT2bLnnI/AAAAAAAAA08/yrQHl6qPMH8/s1600/btrix-mysql.png " />

   
   

   Html https://2.bp.blogspot.com/-2-iy8RJ92V8/Ug5ASDCru-I/AAAAAAAAA0c/GOBCPpZlA04/s1600/Btrix-html.png " />

   
   

   Контакты https://4.bp.blogspot.com/-vsm9s0yQr9I/Ug5ASjqawnI/AAAAAAAAA0k/rqb01AbGaFw/s1600/btrix-contact.png " />

6. Внесите в код, который добавили в гаджет HTML / JavaScript необходимые изменения:

• Значок # измените на ссылку на нужную страницу блога (например, страницу метки, страницу “контакты”, главную страницу блога и др)
• ссылку на картинку, выделенную оранжевым , замените на прямую ссылку на иконку-картинку для соответствующего пункта.
• Пункт, выделенный синим , это название страницы меню css.

Переместите элемент HTML ? JavaScript в нужное место во вкладке “Дизайн” блога.

Для вашего меню вы можете использовать иконки, логотипы и другие картинки png с прозрачным фоном. Для того, чтобы найти нужные картинки лучше использовать поиск по иконками. Например, iconsearch.ru

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

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

Что изначально закреплены за каждым запросом, где сам разработчик может сменить на ту тематику, или на те фигуры, что больше тематически подходят. Само меню создано в темно-зеленом цвете, просто выбран этот оттенок, которой редко можно встретить. Но все можно кардинально изменить, это зайдя в стилистику CSS, и там выставить тот стиль дизайна, который вам нужен, а больше всего, чтоб отлично списался в саму основу интернет ресурса.

1 . Так по умолчанию идет или при заходе на портал.

2 . Уже смотрим с мобильного аппарата, но пока не вызвали под меню.

3 . Здесь сделали клик, что показались все запрашиваемые запросы.

Приступаем к установке:

ZORNET.RU

CSS

section{
width:100%;
max-width:1198px;
margin:0px auto;
display:table;
position:relative;
}

Header{
width:100%;
display:table;
background-color: #175812;
margin-bottom:50px;
}

#kamtukagnpos{
float: left;
font-size: 25px;
text-transform: uppercase;
color: #fffab2;
font-weight: 600;
padding: 19.8px 0px;
}

#kamtukagnpos:hover {
text-shadow: 0px 0px 6px rgba(255, 250, 250, 0.67);
}

Nav{
width:auto;
float:right;
}

Nav ul{
display:table;
float:right;
}

Nav ul li{
float:left;
}

Nav ul li:last-child{
padding-right:0px;
}

Nav ul li a {
color: #e4f2ff;
font-size: 19px;
padding: 24px 19px;
display: inline-block;
text-shadow: 0 1px 0 #2e2f2e;
}

Nav ul li a:hover {
background-color: #143a06;
color: #fff9c8;
transition: all 0.7s ease 0s;
text-shadow: 0 1px 0 #282b28;
}

Nav ul li a:hover i {
color: #fdf7c9;
transition: all 0.7s ease 0s;
text-shadow: 0 1px 0 #1c1d1c;
}

Nav ul li a i {
padding-right: 9px;
color: #f4faff;
transition: all 0.7s ease 0s;
text-shadow: 0 1px 0 #202120;
}

Navigation-menusaita ul{
display:table;
width:24px;
}

Navigation-menusaita ul li{
width:100%;
height:3px;
background-color:#e9f0f7;
margin-bottom:4px;
}

Navigation-menusaita ul li:last-child{
margin-bottom:0px;
}

Input, label{
display:none;
}

@media only screen and (max-width: 1440px){
section{
max-width:95%;
}
}

@media only screen and (max-width: 980px){
header{
padding:20px 0px;
}

#kamtukagnpos{
padding:0px;
}

Input{
position: absolute;
top: -9999px;
left: -9999px;
background:none;
}

Input:fous{
background:none;
}

Label{
float:right;
padding:8px 0px;
display:inline-block;
cursor:pointer;
}

Input:checked ~ nav{
display:block;
}

Nav{
display:none;
position:absolute;
right:0px;
top:53px;
background-color:#174810;
padding:0px;
z-index:99;
}

Nav ul{
width:auto;
}

Nav ul li{
float:none;
padding:0px;
width:100%;
display:table;
}

Nav ul li a{
color:#f7f2f2;
font-size:15px;
padding:10px 20px;
display:block;
border-bottom: 1px solid rgba(204, 197, 197, 0.1);
}

Nav ul li a i{
color:#f9f5d5;
padding-right:13px;
}
}

@media only screen and (max-width: 480px) {
section {max-width: 90%;}
}

@media only screen and (max-width: 360px) {
label{padding:5px 0px;}
#kamtukagnpos{font-size: 20px;}
nav{top:47px;}
}

Перед тем как ставить, то важно посмотреть на Demo страницу, и реально оценить, как все работает, но по факту не чего такого нет, разве только к названию ресурса добавлен эффект, где при наведенье все знаки идут под тенью, что намного ярче отображаются.

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

Элементы списка могут содержать не только ссылки, но также заголовки, иконки, картинки. С помощью вертикального меню можно оформлять комментарии на сайте, список категорий и т.д.

1. Вертикальное меню с заголовком

Простой элегантный вариант оформления. Подходит для стилизации категорий на сайте. При наведении элемент списка меняет цвет ссылки.

* {box-sizing: border-box; margin: 0;} .widget { padding: 20px 30px; background: white; font-family: "Roboto", sans-serif; } .widget-title { text-transform: uppercase; letter-spacing: 2px; color: #222; font-size: 16px; padding-left: 15px; margin-bottom: 15px; border-left: 2px solid #b99d61; } .widget-list { padding: 0; list-style: none; } .widget-list a:before { content: "\2014"; margin-right: 14px; } .widget-list a { text-decoration: none; outline: none; display: block; padding: 6px 0; letter-spacing: 1px; font-weight: 300; color: #444; transition: .3s linear; } .widget-list a:hover {color: #b99d61;}

2. Вертикальное меню в стиле «схема метро»

Интересное решение для оформления вертикального меню, предусмотрено добавление вложенных меню. «Ветка метро» — левая граница списка, маркеры генерируются перед каждой ссылкой.

• Элемент списка
  • Элемент вложенного списка
  • Элемент вложенного списка
  • Элемент вложенного списка
• Элемент списка
• Элемент списка

.metro { list-style: none; padding: 0; margin: 30px 0 0 50px; border-left: 5px solid #DAE4F1; } .metro li {line-height: 2em;} .metro ul { margin: 20px 0 20px 15px; padding: 0; border: none; list-style: none; } .metro ul:before, .metro ul:after { content: ""; width: 5px; height: 28px; background: #DAE4F1; position: relative; display: block; left: -9px; } .metro ul:before { transform: rotate(-45deg); margin-top: -15px; } .metro ul:after { transform: rotate(45deg); bottom: -20px; } .metro ul li {border-left: 5px solid #DAE4F1;} .metro ul li:first-child { margin-top: -5px; padding-top: 5px; } .metro ul li:last-child { padding-bottom: 9px; margin-bottom: -25px; } .metro a { text-decoration: none; display: block; font-family: "Noto Sans", sans-serif; color: #4A4B4D; } .metro a:before { content: ""; display: inline-block; background: #CA682D; width: 12px; height: 12px; left: -9px; position: relative; border-radius: 50%; margin-right: .5em; }

3. Вертикальное меню с эффектами при наведении

Иконка и фоновая заливка, проявляющиеся при наведении на элемент списка, помогут разнообразить дизайн элементов вертикального меню.

.category-wrap { padding: 15px; background: white; width: 200px; box-shadow: 2px 2px 8px rgba(0,0,0,.1); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .category-wrap h3 { font-size: 16px; color: rgba(0,0,0,.6); margin: 0 0 10px; padding: 0 5px; position: relative; } .category-wrap h3:after { content: ""; width: 6px; height: 6px; background: #80C8A0; position: absolute; right: 5px; bottom: 2px; box-shadow: -8px -8px #80C8A0, 0 -8px #80C8A0, -8px 0 #80C8A0; } .category-wrap ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0,0,0,.3); } .category-wrap li {margin: 12px 0 0 0px;} .category-wrap a { text-decoration: none; display: block; font-size: 13px; color: rgba(0,0,0,.6); padding: 5px; position: relative; transition: .3s linear; } .category-wrap a:after { content:"\f18e"; font-family: FontAwesome; position: absolute; right: 5px; color: white; transition: .2s linear; } .category-wrap a:hover { background: #80C8A0; color: white; }

4. Вертикальное меню с иконками

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

* {box-sizing: border-box; margin: 0;} .widget { padding: 20px; border: 5px solid #f1f1f1; background: #fff; border-radius: 5px; font-family: "Roboto", sans-serif; } .widget h3 { margin-bottom: 20px; text-align: center; font-size: 24px; font-weight: normal; color: #424949; } .widget ul { margin: 0; padding: 0; list-style: none; width: 250px; } .widget li { border-bottom: 1px solid #eaeaea; padding-bottom: 15px; margin-bottom: 15px; } .widget li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .widget a { text-decoration: none; color: #616a6b; display: inline-block; } .widget li:before { font-family: FontAwesome; font-size: 20px; vertical-align:bottom; color: #dd3333; margin-right: 14px; } .widget li:nth-child(1):before {content:"\f1fc";} .widget li:nth-child(2):before {content:"\f0d0";} .widget li:nth-child(3):before {content:"\f0cd";} .widget li:nth-child(4):before {content:"\f028";} .widget li:nth-child(5):before {content:"\f03d";}

5. Вертикальное меню с картинками

Данный пример можно использовать для оформления блоков с новинками, похожими товарами, и т.п. сайте интернет-магазина.

Jpeg">