.
Внутри базового контейнера размещаем нужное нам содержимое.
) сформированную в 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. С ними не должно возникнуть никаких сложностей. Просто добавьте свой уникальный контент и готово — можно запускать бизнес и привлекать все новых и новых читателей. Также очень важно помнить о том, что текст для каждого шаблона был написан вручную.
С Уважением, Андрей
Доброго времени суток, дорогие читатели. Сегодня мы разберем тему «как сделать горизонтальное меню используя HTML и CSS
». Меню, как правило, находится в шапке сайта и является перечнем ссылок на самые важные страницы, его также называют главным меню
. Данные ссылки пользователи будут постоянно нажимать. То, как вы их расположите и какой дизайн вы зададите меню будет влиять на поведение пользователей, конверсию, их общее впечатление от вашего сайта и, конечно, на .
HTML-код для горизонтального меню
Когда-то давно главное меню для сайта делали на картинках, таблицах, флэше и возможно на чем-то еще, но в наше время существует самый популярный и он же правильный метод создания меню используя теги «списка».
Для создания меню используют теги
Пример использования html тегов для создания меню в коде ниже:
Главная
Услуги
Цены
Контакты
Стандартные CSS стили для горизонтального меню
ul {
list-style: none; /*убираем маркеры списка*/
margin: 0; /*убираем отступы*/
padding-left: 0; /*убираем отступы*/
}
a {
text-decoration: none; /*убираем подчеркивание текста ссылок*/
}
li {
float:left; /*Размещаем список горизонтально для реализации меню*/
margin-right:5px; /*Добавляем отступ у пунктов меню*/
}
Мы получаем готовое верхнее меню в шапку, без каких-либо особых стилей и наворотов это можно назвать каркасом вашего будущего красивого меню . Если вы скопируете и поставите у себя данный html и css это будет выглядеть следующим образом.
Пример каркаса (шаблона) вашего будущего меню
Получилось все достаточно простенько, вы,конечно же, хотите сразу красивое главное меню, но без понимания основ у вас просто не получится создать хорошее меню без ошибок в html и css.
Существует так же несколько других CSS методов используемых для того чтобы сделать меню горизонтальным помимо float:left; , например, display:inline-block; или display:flex; , но рекомендуется использовать способ описанный выше.
Давайте же наполним наш шаблон меню различными стилями и сделаем его красивым
.
Примеры красивого горизонтального меню для сайта
Сейчас я приведу несколько готовых примеров с готовым дизайном горизонтального меню.
Все «красивости» вы можете создать для своего сайта сами, а не искать в интернете. Проще всего это сделать взяв за основу один из примеров ниже
Простое меню синего цвета с раздельными пунктами
CSS стили «верхнего» меню
Ниже расположены стили данного меню. HTML остается тем же, что и в «каркасе» меню.
Ul {
list-style: none; /*убираем маркеры списка*/
margin: 0; /*убираем отступы*/
padding-left: 0; /*убираем отступы*/
margin-top:25px; /*делаем отступ сверху*/
}
a {
text-decoration: none; /*убираем подчеркивание текста ссылок*/
background:#30A8E6; /*добавляем фон к пункту меню*/
color:#fff; /*меняем цвет ссылок*/
padding:10px; /*добавляем отступ*/
font-family: arial; /*меняем шрифт*/
border-radius:4px; /*добавляем скругление*/
-moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
-o-transition: all 0.3s 0.01s ease;
-webkit-transition: all 0.3s 0.01s ease;
}
a:hover {
background:#1C85BB;/*добавляем эффект при наведении*/
}
li {
float:left; /*Размещаем список горизонтально для реализации меню*/
margin-right:5px; /*Добавляем отступ у пунктов меню*/
}
Главное меню, расположенное на цветной линии с красным фоном
CSS стили меню на цветной линии
ul {
list-style: none; /*убираем маркеры списка*/
margin: 0; /*убираем отступы*/
padding-left: 0; /*убираем отступы*/
margin-top:25px; /*делаем отступ сверху*/
background:#FF4444; /*добавляем фон всему меню (заменив этот параметр, вы поменяете цвет всего меню)*/
height: 50px; /*задаем высоту*/
}
a {
text-decoration: none; /*убираем подчеркивание текста ссылок*/
background:#FF4444; /*добавляем фон к пункту меню (заменив этот параметр, вы поменяете цвет всех пунктов меню)*/
color:#fff; /*меняем цвет ссылок*/
padding:0px 15px; /*добавляем отступ*/
font-family: arial; /*меняем шрифт*/
line-height:50px; /*ровняем меню по вертикали*/
display: block;
border-right: 1px solid #F36262; /*добавляем бордюр справа*/
-moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
-o-transition: all 0.3s 0.01s ease;
-webkit-transition: all 0.3s 0.01s ease;
}
a:hover {
background:#D43737;/*добавляем эффект при наведении*/
}
li {
float:left; /*Размещаем список горизонтально для реализации меню*/
}
Выпадающее меню на HTML+CSS
Для реализации дополнительного выпадающего (раскрывающегося) меню на сайте
у какого-либо пункта меню нам необходимо добавить дополнительный перечень пунктов в HTML-код для какой-либо ссылки из горизонтального меню и изменить стили CSS. В стилях мы будем применять простой трюк — изменение отображения раскрывающегося меню по средствам наведения на нужный нам пункт в верхнем меню . Для примера возьмем пункт «услуги».
Пример создания простого выпадающего меню
HTML код выпадающего меню
Главная
Услуги
Услуга 1
Длинная услуга 2
Услуга 3
Цены
Контакты
Стили CSS выпадающего меню
ul {
list-style: none; /*убираем маркеры списка*/
margin: 0; /*убираем отступы*/
padding-left: 0; /*убираем отступы*/
margin-top:25px; /*делаем отступ сверху*/
background:#819A32; /*добавляем фон всему меню*/
height: 50px; /*задаем высоту*/
}
a {
text-decoration: none; /*убираем подчеркивание текста ссылок*/
background:#819A32; /*добавляем фон к пункту меню*/
color:#fff; /*меняем цвет ссылок*/
padding:0px 15px; /*добавляем отступ*/
font-family: arial; /*меняем шрифт*/
line-height:50px; /*ровняем меню по вертикали*/
display: block;
border-right: 1px solid #677B27; /*добавляем бордюр справа*/
-moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
-o-transition: all 0.3s 0.01s ease;
-webkit-transition: all 0.3s 0.01s ease;
}
a:hover {
background:#D43737;/*добавляем эффект при наведении*/
}
li {
float:left; /*Размещаем список горизонтально для реализации меню*/
position:relative; /*задаем позицию для позиционирования*/
}
/*Стили для скрытого выпадающего меню*/
li > ul {
position:absolute;
top:25px;
display:none;
}
/*Делаем скрытую часть видимой*/
li:hover > ul {
display:block;
width:250px; /*Задаем ширину выпадающего меню*/
}
li:hover > ul > li {
float:none; /*Убираем горизонтальное позиционирование*/
}
А чтобы понять, какие именно у вас должны быть услуги и категории рекомендую ознакомиться с материалом: .
Я постарался максимально кратко рассказать вам о том как создать главное горизонтальное меню, сделать несколько шаблонов, как добавить к нему простые стили и сделать его симпатичнее, как сделать выпадающее меню для вашего сайта. Для удобства я собрал все меню, представленные выше, в одном html-файле, который вы можете скачать ниже. Выглядит это как на скриншоте:
Благодарю за внимание.
В этом уроке мы сделаем, классическое горизонтальное меню на чистом 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
, изменением его пунктов.
Одежда
Электроника
Камеры
Компьютеры
Телефоны
Продукты питания
Инструменты
Быт. химия
Услуга 1
Услуга 2
Услуга 3
Затем давайте завершающим этапам оформим кнопки ингредиентом. Я пользуюсь
CSS генератором , у меня создано несколько Presets
, вы можете создать свои, в моем случае я просто копирую данный код и размещаю в место background
который прописывал до этого.
.dws-menu > ul li a{
display: block;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Custom+3 */
background: #c9c9c9; /* Old browsers */
background: -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9c9c9", endColorstr="#757577",GradientType=0); /* IE6-9 */
padding: 15px 30px 15px 40px;
font-size: 14px;
color: #454547;
text-decoration: none;
text-transform:uppercase;
transition: all 0.3s ease;
}
.dws-menu li a:hover{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0e1e5+0,454547+2,454547+98,e0e1e5+100 */
background: #e0e1e5; /* Old browsers */
background: -moz-linear-gradient(top, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e0e1e5", endColorstr="#e0e1e5",GradientType=0); /* IE6-9 */
color: #ffffff;
box-shadow: 1px 5px 10px -5px black;
transition: all 0.3s ease;
}
При желании данное меню можно оформить под тот стиль, который именно подойдем вам на сайте, достаточно просто с генерировать цвет и заменить его в коде. Получилась простое и в тоже время симпатичное горизонтальное меню, сделанное на чистом CSS.
В этом посте мы сделаем фиксированное боковое информационное меню. Для реализации иконок подключим шрифт .
Шаг 1. Подключаем шрифт с иконками, создаем пустой документ
Подробную инфу о работе со шрифтом FontAwesome и ссылку на сам проект вы можете найти в моем посте – .
Вот код странички с подключенными файлами:
Фиксированное боковое меню
Шаг 2. Добавляем HTML разметку фиксированного меню
Вот и сам код разметки нашего фиксированного меню:
Как вы заметили я применил тег – это элемент разметки html5, если вы используете html4, то можете заменить этот тег на обычный или вовсе его убрать, а идентификатор перенести к списку, вот так:
