Вертикальное меню на 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
который прописывал до этого.
При желании данное меню можно оформить под тот стиль, который именно подойдем вам на сайте, достаточно просто с генерировать цвет и заменить его в коде. Получилась простое и в тоже время симпатичное горизонтальное меню, сделанное на чистом CSS.
Доброго времени суток, дорогие читатели. Сегодня мы разберем тему «как сделать горизонтальное меню используя 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. Вертикальное меню в стиле «схема метро»
Интересное решение для оформления вертикального меню, предусмотрено добавление вложенных меню. «Ветка метро» — левая граница списка, маркеры генерируются перед каждой ссылкой.
- Элемент списка
- Элемент вложенного списка
- Элемент вложенного списка
- Элемент вложенного списка
- Элемент списка
- Элемент списка
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">