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

Как можно заметить, то здесь использовали простые списки 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. Вертикальное меню с заголовком

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

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

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

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

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

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

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

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

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

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

Jpeg">