Это список ссылок, ведущих на разные страницы сайта. Неплохо смотрится, когда список ссылок вместо простых маркеров, дополняется иконками и совсем необязательно здесь использовать графику. Зачем создавать лишние запросы к базе данных?
HTML-код
Между тегами li
прописываем ссылку a
(# временная заглушка), внутри которой два блочных элемента span
. В первом span - тег i
с классом иконки, код которой был скопирован с сайта Font Awesome
. Во втором span
- название ссылки, то есть текст.
Велосипеды
Мотоциклы
Автобусы
Автомобили
Вертолёты
После подключения между тегами head
иконочного шрифта Font Awesome
- меню имеет вот такой вид.
CSS стили
Для начала на Google Font
подберем привлекательный шрифт с поддержкой кириллицы, если вертикальное меню будет на русском.
Копируем код подключения выбранного шрифта и вставляем сверху в CSS
файле.
Позиционируем наше меню относительно окна браузера, отступая сверху на 10% и слева на 20%. Разумеется, что эти цифры взяты с "потолка", у вас они будут свои.
Ul {
position: absolute;
top: 10%;
left: 20%;
}
Фиксируем ширину меню на 200 пикселях.
Width: 200px;
Мы дошли до пунктов меню списка. Убираем маркеры у пунктов li
.
Ul li {
list-style: none;
}
Обозначаем рамки сверху и снизу, отделяющие пункты меню друг от друга.
Не хватает боковых рамок и разделителей между иконками и названий ссылок.
Рисуем правую рамку у тега a
, который является строчным элемент, а вокруг строчного элемента рамку нельзя сделать. Поэтому отображаем тег a
блочным элементом.
Ul li a {
display: block;
}
Теперь можно и рамку задать, убрать подчеркивание ссылок и прописать цвет ссылок.
Теги 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 пикселей на красном фоне.
Теперь вертикальное меню
приняло свой окончательный вид. Смотрите весь код и результат.
Вертикальное меню
делается на основе списка, маркированного или нумерованного. По умолчанию все элементы списка располагаются вертикально, занимая по ширине всю ширину элемента контейнера , который в свою очередь занимает всю ширину его блока-контейнера.
Элементы списка могут содержать не только ссылки, но также заголовки, иконки, картинки. С помощью вертикального меню можно оформлять комментарии на сайте, список категорий и т.д.
1. Вертикальное меню с заголовком
Простой элегантный вариант оформления. Подходит для стилизации категорий на сайте. При наведении элемент списка меняет цвет ссылки.
Интересное решение для оформления вертикального меню, предусмотрено добавление вложенных меню. «Ветка метро» — левая граница списка, маркеры генерируются перед каждой ссылкой.
Иконки в меню создают визуальный якорь, дополняя словесное описание каждой категории. Для отображения иконок нужно подключить . Вы также можете использовать любой другой иконочный шрифт или иконки-картинки.
В этом уроке мы сделаем, классическое горизонтальное меню на чистом 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
.
Первым делом сбросим все отступы, которые могут задавать по умолчанию разные браузеры:
Dws-menu *{
margin: 0;
padding: 0;
}
Зададим header
в 200 пик. и назначим
шрифт Cuprum который можно скачать и отдельно подключить к себе на сайте, на всякий случай пропишем дополнительные шрифты.
Затем позиционируем иконки, спискам присвоим 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;
}
Меню приобрело внешний вид, затем можно приступать к описанию стилей при наведении.
Анимируем горизонтальное меню при наведение
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;
}
А для их появления отберем списки при наведении и отобразим их при помощи display: block;
.
Dws-menu li:hover > ul{
display: block;
}
Теперь можно добавлять многоуровневые меню просто простым копированием блока UL
, изменением его пунктов.
Главная
Продукция
Одежда
Обувь
Куртки
Брюки
Электроника
Камеры
Компьютеры
Телефоны
Samsung
Flf
Apple
Продукты питания
Инструменты
Быт. химия
Услуги
Услуга 1
Услуга 2
Услуга 3
Новости
Контакты
Затем давайте завершающим этапам оформим кнопки ингредиентом. Я пользуюсь
CSS генератором , у меня создано несколько Presets
, вы можете создать свои, в моем случае я просто копирую данный код и размещаю в место background
который прописывал до этого.
При желании данное меню можно оформить под тот стиль, который именно подойдем вам на сайте, достаточно просто с генерировать цвет и заменить его в коде. Получилась простое и в тоже время симпатичное горизонтальное меню, сделанное на чистом CSS.
В этом посте мы сделаем фиксированное боковое информационное меню. Для реализации иконок подключим шрифт .
Шаг 1. Подключаем шрифт с иконками, создаем пустой документ
Подробную инфу о работе со шрифтом FontAwesome и ссылку на сам проект вы можете найти в моем посте – .
Вот код странички с подключенными файлами:
Фиксированное боковое меню
Шаг 2. Добавляем HTML разметку фиксированного меню
Вот и сам код разметки нашего фиксированного меню:
Компьютерные советы и хитрости
