Css добавление иконок в пункты меню. Адаптивное горизонтальное меню с чистым CSS3. Вертикальное меню с заголовком

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

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

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

Мы получаем готовое верхнее меню в шапку, без каких-либо особых стилей и наворотов это можно назвать каркасом вашего будущего красивого меню. Если вы скопируете и поставите у себя данный 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 стили меню на цветной линии

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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;}
}

Это список ссылок, ведущих на разные страницы сайта. Неплохо смотрится, когда список ссылок вместо простых маркеров, дополняется иконками и совсем необязательно здесь использовать графику. Зачем создавать лишние запросы к базе данных?

HTML-код

Между тегами li прописываем ссылку a (# временная заглушка), внутри которой два блочных элемента span . В первом span - тег i с классом иконки, код которой был скопирован с сайта Font Awesome . Во втором span - название ссылки, то есть текст.

• 
  
  
  Велосипеды
  
  


• 
  
  
  Мотоциклы
  
  


• 
  
  
  Автобусы
  
  


• 
  
  
  Автомобили
  
  


• 
  
  
  Вертолёты
  
  

После подключения между тегами head иконочного шрифта Font Awesome - меню имеет вот такой вид.

CSS стили

Для начала на Google Font подберем привлекательный шрифт с поддержкой кириллицы, если вертикальное меню будет на русском.

Копируем код подключения выбранного шрифта и вставляем сверху в CSS файле.

@import url("https://fonts.googleapis.com/css?family=Marck+Script");

В селекторе body пишем название выбранного шрифт и задаем ему размер.

Body {
margin: 0;
padding: 0;
font-family: "Marck Script", sans-serif;
font-size: 20px;
}

Позиционируем наше меню относительно окна браузера, отступая сверху на 10% и слева на 20%. Разумеется, что эти цифры взяты с "потолка", у вас они будут свои.

Ul {
position: absolute;
top: 10%;
left: 20%;
}

Фиксируем ширину меню на 200 пикселях.

Width: 200px;

Мы дошли до пунктов меню списка. Убираем маркеры у пунктов li .

Ul li {
list-style: none;
}

Обозначаем рамки сверху и снизу, отделяющие пункты меню друг от друга.

Border-top: 1px solid #131313;
border-bottom: 1px solid #131313;
margin: -1px 0;

Не хватает боковых рамок и разделителей между иконками и названий ссылок.

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

Ul li a {
display: block;
}

Теперь можно и рамку задать, убрать подчеркивание ссылок и прописать цвет ссылок.

Border-right: 1px solid #131313;
text-decoration: none;
color: #131313;

Не хватает ещё левой рамки.

Теги span - блочные элементы, внутри которых будет текст, поэтому span отобразим строчно-блочным элементом.

Ul li a span {
position: relative;
display: inline-block;
}

Нам необходимо для первого span , внутри которого будет иконка, задать стили, отличающиеся от второго span . Для этого первый span обозначим псевдоклассом - span:nth-child(1) и стилизуем его отдельно. Установим правую и левую рамку и ширину.

Ul li a span:nth-child(1) {
width: 30px;
border-left: 1px solid #131313;
border-right: 1px solid #131313;
}

Иконки встанут посередине с полями по 10 пикселей во все стороны.

Text-align: center;
padding: 10px;

Иконки будут темного цвета, размером 20 пикселей на красном фоне.

Color: #131313;
font-size: 20px;
background: #f44336;

Во втором псевдоклассе, надо задать только поля.

Ul li a span:nth-child(2) {
padding: 10px;
}

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

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

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

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

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

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

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

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

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