.
Внутри базового контейнера размещаем нужное нам содержимое.
) сформированную в css в виде той самой «кнопки-гамбургер», с помощью которой установим связь с скрытым флажком checkbox . Для этого обязательно, имя атрибута for должно соответствовать id чекбокса. Пустой атрибут onclick используем для в iOS
сайт
<
ul>
<
li><
a href=
"#1"
>
Один
<
li><
a href=
"#2"
>
Два
<
li><
a href=
"#3"
>
Три
<
li><
a href=
"#4"
>
Четыре
<
li><
a href=
"#5"
>
Пять
<
li><
a href=
"#6"
>
Шесть
<
li><
a href=
"#7"
>
Семь
Один
Два
Три
Четыре
Пять
Шесть
Семь
На этом разметка нашего бокового меню заканчивается. Правда есть ещё одна совсем необязательная фишка, это фон затемнения основного контента при включенной панели. Если оно вам надо, просто
<
div class
=
"mask-content"
>
В демо эту фичу по-умолчанию исключил из работы, заккоментировав данный блок, если вдруг понадобится, легко найдёте и так же легко включите))).
Итак, все необходимые элементы на своих местах, остаётся самое главное и интересное, сформировать внешний вид , цвет, форму, и придать движухи нашему меню. Всё это мы будем делать исключительно средствами CSS. Ни каких javascript и дополнительных изображений.
CSS Расписывать каждое правило и свойство не буду, так как сделал это непосредственно в самом коде css.
/**
* Переключаемая боковая панель навигации
* выдвигающаяся по клику слева
*/
.
nav {
/* ширна произвольная, не стесняйтесь экспериментировать */
width:
320px;
min-
width:
320px;
/* фиксируем и выставляем высоту панели на максимум */
height:
100
%;
position:
fixed;
top:
0
;
bottom:
0
;
margin:
0
;
/* сдвигаем (прячем) панель относительно левого края страницы */
left:
-
320px;
/* внутренние отступы */
padding:
15px 20px;
/* плавный переход смещения панели */
-
webkit-
transition:
left 0.
3s;
-
moz-
transition:
left 0.
3s;
transition:
left 0.
3s;
/* определяем цвет фона панели */
background:
#16a085;
/* поверх других элементов */
z-
index:
2000
;
}
/**
* Кнопка переключения панели
* тег
*/
.
nav-
toggle {
/* абсолютно позиционируем */
position:
absolute;
/* относительно левого края панели */
left:
320px;
/* отступ от верхнего края панели */
top:
1em;
/* внутренние отступы */
padding:
0.
5em;
/* определяем цвет фона переключателя
* чаще вчего в соответствии с цветом фона панели
*/
background:
inherit;
/* цвет текста */
color:
#dadada;
/* вид курсора */
cursor:
pointer;
/* размер шрифта */
font-
size:
1.
2em;
line-
height:
1
;
/* всегда поверх других элементов страницы */
z-
index:
2001
;
/* анимируем цвет текста при наведении */
-
webkit-
transition:
color .
25s ease-
in-
out;
-
moz-
transition:
color .
25s ease-
in-
out;
transition:
color .
25s ease-
in-
out;
}
/* определяем текст кнопки
* символ Unicode (TRIGRAM FOR HEAVEN)
*/
.
nav-
toggle:
after {
content:
"\2630"
;
text-
decoration:
none;
}
/* цвет текста при наведении */
.
nav-
toggle:
hover {
color:
#f4f4f4;
}
/**
* Скрытый чекбокс (флажок)
* невидим и недоступен:)
* имя селектора атрибут флажка
*/
[
id=
"nav-toggle"
]
{
position:
absolute;
display:
none;
}
/**
* изменение положения переключателя
* при просмотре на мобильных устройствах
* когда навигация раскрыта, распологаем внутри панели
*/
[
id=
"nav-toggle"
]
:
checked ~ .
nav >
.
nav-
toggle {
left:
auto;
right:
2px;
top:
1em;
}
/**
* Когда флажок установлен, открывается панель
* используем псевдокласс:checked
*/
[
id=
"nav-toggle"
]
:
checked ~ .
nav {
left:
0
;
box-
shadow:
4px 0px 20px 0px rgba(0
,
0
,
0
,
0.5
)
;
-
moz-
box-
shadow:
4px 0px 20px 0px rgba(0
,
0
,
0
,
0.5
)
;
-
webkit-
box-
shadow:
4px 0px 20px 0px rgba(0
,
0
,
0
,
0.5
)
;
overflow-
y:
auto;
}
/*
* смещение контента страницы
* на размер ширины панели,
* фишка необязательная, на любителя
*/
[
id=
"nav-toggle"
]
:
checked ~ main >
article {
-
webkit-
transform:
translateX(320px)
;
-
moz-
transform:
translateX(320px)
;
transform:
translateX(320px)
;
}
/*
* изменение символа переключателя,
* привычный крестик (MULTIPLICATION X),
* вы можете испльзовать любой другой значок
*/
[
id=
"nav-toggle"
]
:
checked ~ .
nav >
.
nav-
toggle:
after {
content:
"\2715"
;
}
/**
* профиксим баг в Android <= 4.1.2
* см: http://timpietrusky.com/advanced-checkbox-hack
*/
body {
-
webkit-
animation:
bugfix infinite 1s;
}
@-
webkit-
keyframes bugfix {
to {
padding:
0
;
}
}
/**
* позаботьтимся о средних и маленьких экранах
* мобильных устройств
*/
@
media screen and (min-
width:
320px)
{
html,
body {
margin:
0
;
overflow-
x:
hidden;
}
}
@
media screen and (max-
width:
320px)
{
html,
body {
margin:
0
;
overflow-
x:
hidden;
}
.
nav {
width:
100
%;
box-
shadow:
none
}
}
/**
* Формируем стиль заголовка (логотип) панели
*/
.
nav h2 {
width:
90
%;
padding:
0
;
margin:
10px 0
;
text-
align:
center;
text-
shadow:
rgba(255
,
255
,
255
,
.1
)
-
1px -
1px 1px,
rgba(0
,
0
,
0
,
.5
)
1px 1px 1px;
font-
size:
1.
3em;
line-
height:
1.
3em;
opacity:
0
;
transform:
scale(0.1
,
0.1
)
;
-
ms-
transform:
scale(0.1
,
0.1
)
;
-
moz-
transform:
scale(0.1
,
0.1
)
;
-
webkit-
transform:
scale(0.1
,
0.1
)
;
transform-
origin:
0
%
0
%;
-
ms-
transform-
origin:
0
%
0
%;
-
moz-
transform-
origin:
0
%
0
%;
-
webkit-
transform-
origin:
0
%
0
%;
transition:
opacity 0.
8s,
transform 0.
8s;
-
ms-
transition:
opacity 0.
8s,
-
ms-
transform 0.
8s;
-
moz-
transition:
opacity 0.
8s,
-
moz-
transform 0.
8s;
-
webkit-
transition:
opacity 0.
8s,
-
webkit-
transform 0.
8s;
}
.
nav h2 a {
color:
#dadada;
text-
decoration:
none;
text-
transform:
uppercase;
}
/*плавное появление заголовка (логотипа) при раскрытии панели */
[
id=
"nav-toggle"
]
:
checked ~ .
nav h2 {
opacity:
1
;
transform:
scale(1
,
1
)
;
-
ms-
transform:
scale(1
,
1
)
;
-
moz-
transform:
scale(1
,
1
)
;
-
webkit-
transform:
scale(1
,
1
)
;
}
/**
* формируем непосредственно само меню
* используем неупорядоченный список для пунктов меню
* прикрутим трансфомации и плавные переходы
*/
.
nav >
ul {
display:
block;
margin:
0
;
padding:
0
;
list-
style:
none;
}
.
nav >
ul >
li {
line-
height:
2.5
;
opacity:
0
;
-
webkit-
transform:
translateX(-
50
%
)
;
-
moz-
transform:
translateX(-
50
%
)
;
-
ms-
transform:
translateX(-
50
%
)
;
transform:
translateX(-
50
%
)
;
-
webkit-
transition:
opacity .
5s .
1s,
-
webkit-
transform .
5s .
1s;
-
moz-
transition:
opacity .
5s .
1s,
-
moz-
transform .
5s .
1s;
-
ms-
transition:
opacity .
5s .
1s,
-
ms-
transform .
5s .
1s;
transition:
opacity .
5s .
1s,
transform .
5s .
1s;
}
[
id=
"nav-toggle"
]
:
checked ~ .
nav >
ul >
li {
opacity:
1
;
-
webkit-
transform:
translateX(0
)
;
-
moz-
transform:
translateX(0
)
;
-
ms-
transform:
translateX(0
)
;
transform:
translateX(0
)
;
}
/* определяем интервалы появления пунктов меню */
.
nav >
ul >
li:
nth-
child(2
)
{
-
webkit-
transition:
opacity .
5s .
2s,
-
webkit-
transform .
5s .
2s;
transition:
opacity .
5s .
2s,
transform .
5s .
2s;
}
.
nav >
ul >
li:
nth-
child(3
)
{
-
webkit-
transition:
opacity .
5s .
3s,
-
webkit-
transform .
5s .
3s;
transition:
opacity .
5s .
3s,
transform .
5s .
3s;
}
.
nav >
ul >
li:
nth-
child(4
)
{
-
webkit-
transition:
opacity .
5s .
4s,
-
webkit-
transform .
5s .
4s;
transition:
opacity .
5s .
4s,
transform .
5s .
4s;
}
.
nav >
ul >
li:
nth-
child(5
)
{
-
webkit-
transition:
opacity .
5s .
5s,
-
webkit-
transform .
5s .
5s;
transition:
opacity .
5s .
5s,
transform .
5s .
5s;
}
.
nav >
ul >
li:
nth-
child(6
)
{
-
webkit-
transition:
opacity .
5s .
6s,
-
webkit-
transform .
5s .
6s;
transition:
opacity .
5s .
6s,
transform .
5s .
6s;
}
.
nav >
ul >
li:
nth-
child(7
)
{
-
webkit-
transition:
opacity .
5s .
7s,
-
webkit-
transform .
5s .
7s;
transition:
opacity .
5s .
7s,
transform .
5s .
7s;
}
/**
* оформление ссылок пунктов меню
*/
.
nav >
ul >
li >
a {
display:
inline-
block;
position:
relative;
padding:
0
;
font-
family:
"Open Sans"
,
sans-
serif;
font-
weight:
300
;
font-
size:
1.
2em;
color:
#dadada;
width:
100
%;
text-
decoration:
none;
/* плавный переход */
-
webkit-
transition:
color .
5s ease,
padding .
5s ease;
-
moz-
transition:
color .
5s ease,
padding .
5s ease;
transition:
color .
5s ease,
padding .
5s ease;
}
/**
* состояние ссылок меню при наведении
*/
.
nav >
ul >
li >
a:
hover,
.
nav >
ul >
li >
a:
focus {
color:
white;
padding-
left:
15px;
}
/**
* линия подчеркивания ссылок меню
*/
.
nav >
ul >
li >
a:
before {
content:
""
;
display:
block;
position:
absolute;
right:
0
;
bottom:
0
;
height:
1px;
width:
100
%;
-
webkit-
transition:
width 0s ease;
transition:
width 0s ease;
}
.
nav >
ul >
li >
a:
after {
content:
""
;
display:
block;
position:
absolute;
left:
0
;
bottom:
0
;
height:
1px;
width:
100
%;
background:
#3bc1a0;
-
webkit-
transition:
width .
5s ease;
transition:
width .
5s ease;
}
/**
* анимируем линию подчеркивания
* ссылок при наведении
*/
.
nav >
ul >
li >
a:
hover:
before {
width:
0
%;
background:
#3bc1a0;
-
webkit-
transition:
width .
5s ease;
transition:
width .
5s ease;
}
.
nav >
ul >
li >
a:
hover:
after {
width:
0
%;
background:
transparent;
-
webkit-
transition:
width 0s ease;
transition:
width 0s ease;
}
/* фон затемнения на основной контент
* при этом элементы блокируютя
* спорная такая фича, если оно вам надо
* просто раскомментируйте
*/
/*
.mask-content {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
visibility: hidden;
opacity: 0;
}
:checked ~ .mask-content {
visibility: visible;
opacity: 1;
-webkit-transition: opacity .5s, visibility .5s;
transition: opacity .5s, visibility .5s;
}
*/
/**
* Переключаемая боковая панель навигации
* выдвигающаяся по клику слева
*/ .nav {
/* ширна произвольная, не стесняйтесь экспериментировать */
width: 320px;
min-width: 320px;
/* фиксируем и выставляем высоту панели на максимум */
height: 100%;
position: fixed;
top: 0;
bottom: 0;
margin: 0;
/* сдвигаем (прячем) панель относительно левого края страницы */
left: -320px;
/* внутренние отступы */
padding: 15px 20px;
/* плавный переход смещения панели */
-webkit-transition: left 0.3s;
-moz-transition: left 0.3s;
transition: left 0.3s;
/* определяем цвет фона панели */
background: #16a085;
/* поверх других элементов */
z-index: 2000;
} /**
* Кнопка переключения панели
* тег
*/ .nav-toggle {
/* абсолютно позиционируем */
position: absolute;
/* относительно левого края панели */
left: 320px;
/* отступ от верхнего края панели */
top: 1em;
/* внутренние отступы */
padding: 0.5em;
/* определяем цвет фона переключателя
* чаще вчего в соответствии с цветом фона панели
*/
background: inherit;
/* цвет текста */
color: #dadada;
/* вид курсора */
cursor: pointer;
/* размер шрифта */
font-size: 1.2em;
line-height: 1;
/* всегда поверх других элементов страницы */
z-index: 2001;
/* анимируем цвет текста при наведении */
-webkit-transition: color .25s ease-in-out;
-moz-transition: color .25s ease-in-out;
transition: color .25s ease-in-out;
} /* определяем текст кнопки
* символ Unicode (TRIGRAM FOR HEAVEN)
*/ .nav-toggle:after {
content: "\2630";
text-decoration: none;
} /* цвет текста при наведении */ .nav-toggle:hover {
color: #f4f4f4;
} /**
* Скрытый чекбокс (флажок)
* невидим и недоступен:)
* имя селектора атрибут флажка
*/ {
position: absolute;
display: none;
} /**
* изменение положения переключателя
* при просмотре на мобильных устройствах
* когда навигация раскрыта, распологаем внутри панели
*/ :checked ~ .nav > .nav-toggle {
left: auto;
right: 2px;
top: 1em;
} /**
* Когда флажок установлен, открывается панель
* используем псевдокласс:checked
*/ :checked ~ .nav {
left: 0;
box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
-moz-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
-webkit-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
overflow-y: auto;
} /*
* смещение контента страницы
* на размер ширины панели,
* фишка необязательная, на любителя
*/ :checked ~ main > article {
-webkit-transform: translateX(320px);
-moz-transform: translateX(320px);
transform: translateX(320px);
} /*
* изменение символа переключателя,
* привычный крестик (MULTIPLICATION X),
* вы можете испльзовать любой другой значок
*/ :checked ~ .nav > .nav-toggle:after {
content: "\2715";
} /**
* профиксим баг в Android <= 4.1.2
* см: http://timpietrusky.com/advanced-checkbox-hack
*/ body {
-webkit-animation: bugfix infinite 1s;
} @-webkit-keyframes bugfix {
to {
padding: 0;
}
} /**
* позаботьтимся о средних и маленьких экранах
* мобильных устройств
*/ @media screen and (min-width: 320px) {
html,
body {
margin: 0;
overflow-x: hidden;
}
} @media screen and (max-width: 320px) {
html,
body {
margin: 0;
overflow-x: hidden;
}
.nav {
width: 100%;
box-shadow: none
}
} /**
* Формируем стиль заголовка (логотип) панели
*/ .nav h2 {
width: 90%;
padding: 0;
margin: 10px 0;
text-align: center;
text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
font-size: 1.3em;
line-height: 1.3em;
opacity: 0;
transform: scale(0.1, 0.1);
-ms-transform: scale(0.1, 0.1);
-moz-transform: scale(0.1, 0.1);
-webkit-transform: scale(0.1, 0.1);
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
transition: opacity 0.8s, transform 0.8s;
-ms-transition: opacity 0.8s, -ms-transform 0.8s;
-moz-transition: opacity 0.8s, -moz-transform 0.8s;
-webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
} .nav h2 a {
color: #dadada;
text-decoration: none;
text-transform: uppercase;
} /*плавное появление заголовка (логотипа) при раскрытии панели */ :checked ~ .nav h2 {
opacity: 1;
transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
} /**
* формируем непосредственно само меню
* используем неупорядоченный список для пунктов меню
* прикрутим трансфомации и плавные переходы
*/ .nav > ul {
display: block;
margin: 0;
padding: 0;
list-style: none;
} .nav > ul > li {
line-height: 2.5;
opacity: 0;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
-moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
-ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
transition: opacity .5s .1s, transform .5s .1s;
} :checked ~ .nav > ul > li {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
} /* определяем интервалы появления пунктов меню */ .nav > ul > li:nth-child(2) {
-webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
transition: opacity .5s .2s, transform .5s .2s;
} .nav > ul > li:nth-child(3) {
-webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
transition: opacity .5s .3s, transform .5s .3s;
} .nav > ul > li:nth-child(4) {
-webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
transition: opacity .5s .4s, transform .5s .4s;
} .nav > ul > li:nth-child(5) {
-webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
transition: opacity .5s .5s, transform .5s .5s;
} .nav > ul > li:nth-child(6) {
-webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
transition: opacity .5s .6s, transform .5s .6s;
} .nav > ul > li:nth-child(7) {
-webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
transition: opacity .5s .7s, transform .5s .7s;
} /**
* оформление ссылок пунктов меню
*/ .nav > ul > li > a {
display: inline-block;
position: relative;
padding: 0;
font-family: "Open Sans", sans-serif;
font-weight: 300;
font-size: 1.2em;
color: #dadada;
width: 100%;
text-decoration: none;
/* плавный переход */
-webkit-transition: color .5s ease, padding .5s ease;
-moz-transition: color .5s ease, padding .5s ease;
transition: color .5s ease, padding .5s ease;
} /**
* состояние ссылок меню при наведении
*/ .nav > ul > li > a:hover,
.nav > ul > li > a:focus {
color: white;
padding-left: 15px;
} /**
* линия подчеркивания ссылок меню
*/ .nav > ul > li > a:before {
content: "";
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 1px;
width: 100%;
-webkit-transition: width 0s ease;
transition: width 0s ease;
} .nav > ul > li > a:after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 100%;
background: #3bc1a0;
-webkit-transition: width .5s ease;
transition: width .5s ease;
} /**
* анимируем линию подчеркивания
* ссылок при наведении
*/ .nav > ul > li > a:hover:before {
width: 0%;
background: #3bc1a0;
-webkit-transition: width .5s ease;
transition: width .5s ease;
} .nav > ul > li > a:hover:after {
width: 0%;
background: transparent;
-webkit-transition: width 0s ease;
transition: width 0s ease;
} /* фон затемнения на основной контент
* при этом элементы блокируютя
* спорная такая фича, если оно вам надо
* просто раскомментируйте
*/ /*
.mask-content {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
visibility: hidden;
opacity: 0;
} :checked ~ .mask-content {
visibility: visible;
opacity: 1;
-webkit-transition: opacity .5s, visibility .5s;
transition: opacity .5s, visibility .5s;
}
*/
Как вы понимаете, практически все значения свойств опциональные, т.е. вы легко сможете изменить и все её элементы на свой вкус и цвет, пояснения, надеюсь, помогут вам в этом. Ну, а ежели что не попрёт, или обнаружится какой-нибудь мой косяк, пишите в комментариях, обязательно разберёмся и выправим.
В завершение, хочу напомнить, что ещё не все браузеры одинаково хорошо справляются с свойствами из обоймы CSS3. Данное решение, конечно очень интересное, но всё же пока ещё больше экспериментальное. Подкорректировав под свои нужды, прежде чем намертво прикручивать к рабочему сайту, обязательно проверьте его работу в разных браузерах и на различных мобильных устройствах.
Ещё раз смотрите результат, скачивайте архив с исходниками, экспериментируйте с различными параметрами и творите, творите, творите...
В ближайшее время постараюсь рассказать и показать, как на основе данного решения, можно легко реализовать выдвижные, боковые панели, с другими, не менее важными элементами, для взаимодействия с пользователями, на борту.
Теперь у пользователей есть возможность ознакомиться с . Все они представлены в отдельной категории, которую можно найти найти на маркетплейсе TemplateMonster. С ними не должно возникнуть никаких сложностей. Просто добавьте свой уникальный контент и готово — можно запускать бизнес и привлекать все новых и новых читателей. Также очень важно помнить о том, что текст для каждого шаблона был написан вручную.
С Уважением, Андрей
Хорошая навигация по сайту очень важна блоггеров. С ее помощью посетитель быстро находит нужную страницу блога. Ценят понятность сайта и поисковики. В этой статье вы узнаете как сделать горизонтальное меню для Blogger со всплывающими иконками.
Как вставить горизонтальное меню 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;}
Теперь перейдите во вкладку “Дизайн”,
Добавьте новый элемент HTML / JavaScript и добавьте код:
Главная
Скачать
MySql
" />
Html
" />
Контакты
Внесите в код, который добавили в гаджет HTML / JavaScript необходимые изменения:
Значок #
измените на ссылку на нужную страницу блога (например, страницу метки, страницу “контакты”, главную страницу блога и др)
ссылку на картинку, выделенную оранжевым
, замените на прямую ссылку на иконку-картинку для соответствующего пункта.Пункт, выделенный синим
, это название страницы меню css.Переместите элемент HTML ? JavaScript в нужное место во вкладке “Дизайн” блога.
Для вашего меню вы можете использовать иконки, логотипы и другие картинки png с прозрачным фоном . Для того, чтобы найти нужные картинки лучше использовать поиск по иконками. Например, iconsearch.ru
Это список ссылок, ведущих на разные страницы сайта. Неплохо смотрится, когда список ссылок вместо простых маркеров, дополняется иконками и совсем необязательно здесь использовать графику. Зачем создавать лишние запросы к базе данных?
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 {
Позиционируем наше меню относительно окна браузера, отступая сверху на 10% и слева на 20%. Разумеется, что эти цифры взяты с "потолка", у вас они будут свои.
Ul {
Фиксируем ширину меню на 200 пикселях.
Width: 200px;
Мы дошли до пунктов меню списка. Убираем маркеры у пунктов li
.
Ul li {
Обозначаем рамки сверху и снизу, отделяющие пункты меню друг от друга.
Border-top: 1px solid #131313;
Не хватает боковых рамок и разделителей между иконками и названий ссылок.
Рисуем правую рамку у тега a
, который является строчным элемент, а вокруг строчного элемента рамку нельзя сделать. Поэтому отображаем тег a
блочным элементом.
Ul li a {
Теперь можно и рамку задать, убрать подчеркивание ссылок и прописать цвет ссылок.
Border-right: 1px solid #131313;
Не хватает ещё левой рамки.
Теги span
- блочные элементы, внутри которых будет текст, поэтому span
отобразим строчно-блочным элементом.
Ul li a span {
Нам необходимо для первого span
, внутри которого будет иконка, задать стили, отличающиеся от второго span
. Для этого первый span
обозначим псевдоклассом - span:nth-child(1)
и стилизуем его отдельно. Установим правую и левую рамку и ширину.
Ul li a span:nth-child(1) {
Иконки встанут посередине с полями по 10 пикселей во все стороны.
Text-align: center;
Иконки будут темного цвета, размером 20 пикселей на красном фоне.
Color: #131313;
Во втором псевдоклассе, надо задать только поля.
Ul li a span:nth-child(2) {
Теперь вертикальное меню
приняло свой окончательный вид. Смотрите весь код и результат.
Вертикальное меню
делается на основе списка, маркированного или нумерованного. По умолчанию все элементы списка располагаются вертикально, занимая по ширине всю ширину элемента контейнера , который в свою очередь занимает всю ширину его блока-контейнера.
Элементы списка могут содержать не только ссылки, но также заголовки, иконки, картинки. С помощью вертикального меню можно оформлять комментарии на сайте, список категорий и т.д.
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. Вертикальное меню в стиле «схема метро»
Интересное решение для оформления вертикального меню, предусмотрено добавление вложенных меню. «Ветка метро» — левая граница списка, маркеры генерируются перед каждой ссылкой.
.metro {
list-style: none;
padding: 0;
margin: 30px 0 0 50px;
border-left: 5px solid #DAE4F1;
}
.metro li {line-height: 2em;}
.metro ul {
margin: 20px 0 20px 15px;
padding: 0;
border: none;
list-style: none;
}
.metro ul:before, .metro ul:after {
content: "";
width: 5px;
height: 28px;
background: #DAE4F1;
position: relative;
display: block;
left: -9px;
}
.metro ul:before {
transform: rotate(-45deg);
margin-top: -15px;
}
.metro ul:after {
transform: rotate(45deg);
bottom: -20px;
}
.metro ul li {border-left: 5px solid #DAE4F1;}
.metro ul li:first-child {
margin-top: -5px;
padding-top: 5px;
}
.metro ul li:last-child {
padding-bottom: 9px;
margin-bottom: -25px;
}
.metro a {
text-decoration: none;
display: block;
font-family: "Noto Sans", sans-serif;
color: #4A4B4D;
}
.metro a:before {
content: "";
display: inline-block;
background: #CA682D;
width: 12px;
height: 12px;
left: -9px;
position: relative;
border-radius: 50%;
margin-right: .5em;
}
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">
