Это список ссылок, ведущих на разные страницы сайта. Неплохо смотрится, когда список ссылок вместо простых маркеров, дополняется иконками и совсем необязательно здесь использовать графику. Зачем создавать лишние запросы к базе данных?
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;
}
Теперь вертикальное меню приняло свой окончательный вид. Смотрите весь код и результат.
Хорошая навигация по сайту очень важна блоггеров. С ее помощью посетитель быстро находит нужную страницу блога. Ценят понятность сайта и поисковики. В этой статье вы узнаете как сделать горизонтальное меню для 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 " />
- Скачать
- MySql
- Html
- Контакты
- Главная
- Внесите в код, который добавили в гаджет HTML / JavaScript необходимые изменения:
- Значок # измените на ссылку на нужную страницу блога (например, страницу метки, страницу “контакты”, главную страницу блога и др)
- ссылку на картинку, выделенную оранжевым , замените на прямую ссылку на иконку-картинку для соответствующего пункта.
- Пункт, выделенный синим , это название страницы меню css.
Для вашего меню вы можете использовать иконки, логотипы и другие картинки png с прозрачным фоном. Для того, чтобы найти нужные картинки лучше использовать поиск по иконками. Например, iconsearch.ru
В этом уроке мы сделаем, классическое горизонтальное меню на чистом 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.
Вертикальное меню делается на основе списка, маркированного или нумерованного. По умолчанию все элементы списка располагаются вертикально, занимая по ширине всю ширину элемента контейнера , который в свою очередь занимает всю ширину его блока-контейнера.
Элементы списка могут содержать не только ссылки, но также заголовки, иконки, картинки. С помощью вертикального меню можно оформлять комментарии на сайте, список категорий и т.д.
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">
