Горизонтальное меню css с иконками. Вертикальное меню на CSS Вертикальное меню с иконками css
Вертикальное меню
делается на основе списка, маркированного или нумерованного. По умолчанию все элементы списка располагаются вертикально, занимая по ширине всю ширину элемента контейнера , который в свою очередь занимает всю ширину его блока-контейнера.
Элементы списка могут содержать не только ссылки, но также заголовки, иконки, картинки. С помощью вертикального меню можно оформлять комментарии на сайте, список категорий и т.д.
1. Вертикальное меню с заголовком
Простой элегантный вариант оформления. Подходит для стилизации категорий на сайте. При наведении элемент списка меняет цвет ссылки.
Интересное решение для оформления вертикального меню, предусмотрено добавление вложенных меню. «Ветка метро» — левая граница списка, маркеры генерируются перед каждой ссылкой.
Иконки в меню создают визуальный якорь, дополняя словесное описание каждой категории. Для отображения иконок нужно подключить . Вы также можете использовать любой другой иконочный шрифт или иконки-картинки.
Хорошая навигация по сайту очень важна блоггеров. С ее помощью посетитель быстро находит нужную страницу блога. Ценят понятность сайта и поисковики. В этой статье вы узнаете как сделать горизонтальное меню для Blogger со всплывающими иконками.
Меню со всплывающими кнопками-иконками создан на CSS. Для просмотра меню, нажмите на кнопку ниже:
Как вставить горизонтальное меню css с иконками на Blogger
Перейдите во вкладку “Шаблон”, поставьте курсор в редактор (в любое место),
Нажмите Ctrl + F для поиска по коду и найдите отрезок кода ]]>
Вставьте перед этим кодом следующий код: ..
/* 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;}
Теперь перейдите во вкладку “Дизайн”,
Добавьте новый элемент HTML / JavaScript и добавьте код:
Главная
https://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png
" />
Внесите в код, который добавили в гаджет HTML / JavaScript необходимые изменения:
Значок #
измените на ссылку на нужную страницу блога (например, страницу метки, страницу “контакты”, главную страницу блога и др)
ссылку на картинку, выделенную оранжевым
, замените на прямую ссылку на иконку-картинку для соответствующего пункта.
Пункт, выделенный синим
, это название страницы меню css.
Переместите элемент HTML ? JavaScript в нужное место во вкладке “Дизайн” блога.
Для вашего меню вы можете использовать иконки, логотипы и другие картинки png с прозрачным фоном. Для того, чтобы найти нужные картинки лучше использовать поиск по иконками. Например, iconsearch.ru
Это список ссылок, ведущих на разные страницы сайта. Неплохо смотрится, когда список ссылок вместо простых маркеров, дополняется иконками и совсем необязательно здесь использовать графику. Зачем создавать лишние запросы к базе данных?
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 пикселей на красном фоне.
https://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png
" /> 
