В этом посте мы сделаем фиксированное боковое информационное меню. Для реализации иконок подключим шрифт .

Шаг 1. Подключаем шрифт с иконками, создаем пустой документ

Подробную инфу о работе со шрифтом FontAwesome и ссылку на сам проект вы можете найти в моем посте – .

Вот код странички с подключенными файлами:

Шаг 2. Добавляем HTML разметку фиксированного меню

Вот и сам код разметки нашего фиксированного меню:

Как вы заметили я применил тег

Шаг 3. Добавляем HTML разметку подменю

• Текст вашей ссылки
• Текст вашей ссылки
• Текст вашей ссылки

Подменю как представляет собой такой же список как и основное меню, плюс тег , который выводит иконку “каретки слева”, выполняет функцию некого “хвостика”, более подробнее на картинке ниже 🙂

Также этот элемент соединяет пустоту между блоком меню и подменю, тем самым позволяя нам осуществить возможность перехода.

Шаг 4. Прописываем стили для фиксированного бокового меню

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

#sidebar-menu { position: fixed; /* фиксируем наше меню */ top: 200px; /* положение меню относительно верхнего края браузера */ left: 0; /* прилипили меню к левому краю */ padding: 10px; background: #323A45; color: #FFF; border-radius: 0 8px 8px 0; } #sidebar-menu li { position: relative; cursor: pointer; } #sidebar-menu li i { /* Задаем иконкам фиксированный размер, height и line-height должны быть одинаковыми */ width: 27px; height: 27px; line-height: 27px; border-radius: 4px; background: #3CB7E7; text-align: center; } #sidebar-menu li+li {margin-top: 4px;} #sidebar-menu b { display: none; position: absolute; /* позиция относительно левого края равна ширине эл-та li */ left: 27px; top: 0; height: 27px; /* ширина равна зазору между блоком меню и подменю */ width: 16px; line-height: 27px; background: transparent; color: #323A45; /* саму иконку позиционируем вправо, чтобы визуально она смотрелась вместе с блоком подменю */ text-align: right; } #sidebar-menu li > ul { display: none; position: absolute; top: -10px; left: 42px; width: 120px; padding: 10px; background: #323A45; border-radius: 8px; } #sidebar-menu li:hover b, #sidebar-menu li:hover ul {display: block;} #sidebar-menu li a { display: block; padding: 4px 8px; border-radius: 4px; color: #FFF; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s; } #sidebar-menu li a:hover { display: block; background: #3CB7E7; }

Если по стилизации у вас есть вопросы пишите в комментарии к этому посту, с удовольствием отвечу.
Вот и все! Фиксированное боковое меню готово 🙂

В этом уроке мы сделаем, классическое горизонтальное меню на чистом 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

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

HTML-код для горизонтального меню

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

Для создания меню используют теги

,
• и .

Пример использования html тегов для создания меню в коде ниже:

• Главная
• Услуги
• Цены
• Контакты

Стандартные CSS стили для горизонтального меню

ul { list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем отступы*/ padding-left: 0; /*убираем отступы*/ } a { text-decoration: none; /*убираем подчеркивание текста ссылок*/ } li { float:left; /*Размещаем список горизонтально для реализации меню*/ margin-right:5px; /*Добавляем отступ у пунктов меню*/ }

Мы получаем готовое верхнее меню в шапку, без каких-либо особых стилей и наворотов это можно назвать каркасом вашего будущего красивого меню. Если вы скопируете и поставите у себя данный html и css это будет выглядеть следующим образом.

Пример каркаса (шаблона) вашего будущего меню

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

Существует так же несколько других CSS методов используемых для того чтобы сделать меню горизонтальным помимо float:left; , например, display:inline-block; или display:flex; , но рекомендуется использовать способ описанный выше.

Давайте же наполним наш шаблон меню различными стилями и сделаем его красивым .

Примеры красивого горизонтального меню для сайта

Сейчас я приведу несколько готовых примеров с готовым дизайном горизонтального меню.

Все «красивости» вы можете создать для своего сайта сами, а не искать в интернете. Проще всего это сделать взяв за основу один из примеров ниже

Простое меню синего цвета с раздельными пунктами

CSS стили «верхнего» меню

Ниже расположены стили данного меню. HTML остается тем же, что и в «каркасе» меню.

Ul { list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем отступы*/ padding-left: 0; /*убираем отступы*/ margin-top:25px; /*делаем отступ сверху*/ } a { text-decoration: none; /*убираем подчеркивание текста ссылок*/ background:#30A8E6; /*добавляем фон к пункту меню*/ color:#fff; /*меняем цвет ссылок*/ padding:10px; /*добавляем отступ*/ font-family: arial; /*меняем шрифт*/ border-radius:4px; /*добавляем скругление*/ -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/ -o-transition: all 0.3s 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; } a:hover { background:#1C85BB;/*добавляем эффект при наведении*/ } li { float:left; /*Размещаем список горизонтально для реализации меню*/ margin-right:5px; /*Добавляем отступ у пунктов меню*/ }

Главное меню, расположенное на цветной линии с красным фоном

CSS стили меню на цветной линии

ul { list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем отступы*/ padding-left: 0; /*убираем отступы*/ margin-top:25px; /*делаем отступ сверху*/ background:#FF4444; /*добавляем фон всему меню (заменив этот параметр, вы поменяете цвет всего меню)*/ height: 50px; /*задаем высоту*/ } a { text-decoration: none; /*убираем подчеркивание текста ссылок*/ background:#FF4444; /*добавляем фон к пункту меню (заменив этот параметр, вы поменяете цвет всех пунктов меню)*/ color:#fff; /*меняем цвет ссылок*/ padding:0px 15px; /*добавляем отступ*/ font-family: arial; /*меняем шрифт*/ line-height:50px; /*ровняем меню по вертикали*/ display: block; border-right: 1px solid #F36262; /*добавляем бордюр справа*/ -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/ -o-transition: all 0.3s 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; } a:hover { background:#D43737;/*добавляем эффект при наведении*/ } li { float:left; /*Размещаем список горизонтально для реализации меню*/ }

Выпадающее меню на HTML+CSS

Для реализации дополнительного выпадающего (раскрывающегося) меню на сайте у какого-либо пункта меню нам необходимо добавить дополнительный перечень пунктов в HTML-код для какой-либо ссылки из горизонтального меню и изменить стили CSS. В стилях мы будем применять простой трюк — изменение отображения раскрывающегося меню по средствам наведения на нужный нам пункт в верхнем меню. Для примера возьмем пункт «услуги».

Пример создания простого выпадающего меню

HTML код выпадающего меню

• Главная
• Услуги
  • Услуга 1
  • Длинная услуга 2
  • Услуга 3
• Цены
• Контакты

Стили CSS выпадающего меню

ul { list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем отступы*/ padding-left: 0; /*убираем отступы*/ margin-top:25px; /*делаем отступ сверху*/ background:#819A32; /*добавляем фон всему меню*/ height: 50px; /*задаем высоту*/ } a { text-decoration: none; /*убираем подчеркивание текста ссылок*/ background:#819A32; /*добавляем фон к пункту меню*/ color:#fff; /*меняем цвет ссылок*/ padding:0px 15px; /*добавляем отступ*/ font-family: arial; /*меняем шрифт*/ line-height:50px; /*ровняем меню по вертикали*/ display: block; border-right: 1px solid #677B27; /*добавляем бордюр справа*/ -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/ -o-transition: all 0.3s 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; } a:hover { background:#D43737;/*добавляем эффект при наведении*/ } li { float:left; /*Размещаем список горизонтально для реализации меню*/ position:relative; /*задаем позицию для позиционирования*/ } /*Стили для скрытого выпадающего меню*/ li > ul { position:absolute; top:25px; display:none; } /*Делаем скрытую часть видимой*/ li:hover > ul { display:block; width:250px; /*Задаем ширину выпадающего меню*/ } li:hover > ul > li { float:none; /*Убираем горизонтальное позиционирование*/ }

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

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

Благодарю за внимание.

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

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

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