Мы выпустили новую книгу «Контент-маркетинг в социальных сетях : Как засесть в голову подписчиков и влюбить их в свой бренд».
Алгоритмы ранжирования – методы оценки качества сайтов
В ТОП-10 должны попадать только те сайты, которые максимально полно отвечают на запрос пользователя. Качественную выдачу обеспечивают – специальные математические формулы, по которым определяется «полезность» того или иного сайта. Поисковики не разглашают информацию о своих алгоритмах, они предоставляют вебмастерам лишь общие рекомендации по улучшению и оптимизации сайтов. Тем не менее, оптимизаторы научились выявлять определенные закономерности, на основании которых разрабатывается стратегия п
родвижения.
Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA
Какие критерии учитывает алгоритм ранжирования
Поисковики оценивают сайты по многим параметрам. Среди наиболее значимых критериев следует отметить:
уникальность и оптимизация текстов (наличие ключевых фраз, тошнота, водность);
возраст домена;
количество и качество входящих ссылок;
тип используемой CMS;
скорость загрузки страниц сайта;
наличие ошибок в коде.
Понимая, как работает алгоритм поисковых систем, вебмастер может оказывать влияние на выдачу своего сайта. Для этого необходимо «подогнать» страницы web-проекта под требования ПС. В частности, потребуется внедрить ключевые фразы в метатеги title и description, а также непосредственно в текст страницы. Если выполняется продвижение по геозависимому запросу, то, кроме ключей, следует добавить название нужного города или региона.
Это интересно! Периодически происходит апгрейд поисковой системы, что приводит к кардинальному изменению действующих алгоритмов. Такие меры направлены на борьбу с поисковым спамом. Нередко смена алгоритма Яндекса приводит к ухудшению позиций сайтов, продвигавшихся «черными» и «серыми» методами.
Поисковые санкции
Если вебмастер явно пытается манипулировать алгоритмами Яндекса, то поисковая система может применять к нему разнообразные санкции. Могут возникнуть следующие проблемы:
Понижение позиций в выдаче
Плохое индексирование новых страниц (или выпадение из индекса старых документов)
Полный или частичный БАН
Алгоритмы Яндекса предполагают санкции за избыточную оптимизацию текстов, например, за размещение на страницах списков ключевых фраз. Фильтр может быть наложен за «невидимый» текст, сливающийся с фоном. Также под санкции попадают сайты-дорвеи и интернет площадки, копирующие чужой контент.
Новый алгоритм Яндекса – Минусинск
Этот алгоритм предполагает пессимизацию web-проекта за использование SEO-ссылок. Речь идет о сайтах, закупающих тысячи ссылок с помощью автоматизированных бирж типа Sape. С точки зрения Яндекса, ссылка считается «сеошной», если она ведет с некачественного сайта-донора и имеет коммерческий анкор.
Основанием для применения фильтра « » может стать резкий прирост ссылочной массы. Поэтому чтобы обезопасить свой web-проект от возможности применения подобной санкции, следует закупать ссылки постепенно и разбавлять анкорные линки безанкорными гиперссылками.
Существует масса готовых решений для создания таких панелей с помощью jQuery , отдельные плагины и модули для различных систем управления сайтом.средствами CSS ? Конечно можно! Но осторожно))), с оглядкой на то, что не все браузеры одинаково хорошо поддерживают современные свойства CSS3.
Не так давно, «выдал на-гора» решение и пример работы . Один из первых комментариев был таким: «давайте её в бок переместим...». Почему-бы и нет? Давайте)).
Сегодня расскажу и покажу на примере, как с помощью «магии CSS» можно забабахать, вполне себе функциональное, меню, по клику.
HTML-Разметка Начнём разбор с переключателя панели, в качестве которого используем стандартный флажок ():
Располагаем чекбокс в верхней части документа, лучше сразу после тега
. Прописываем атрибут hidden , напрямую указывая состояние «скрытый» у
данного элемента , а так же присвоим
уникальный идентификатор , id="nav-toggle" например, для связки с атрибутом for тега
, который мы оформим и будем использовать в виде кнопки переключения панели.В качестве обёртки содержимого боковой панели использовал тег с определённым классом class="nav" , так как Internet Explorer до версии 8.0 включительно игнорирует этот тег, вы можете использовать привычный .
Внутри базового контейнера размещаем нужное нам содержимое.
В первую очередь пропишем метку (тег
) сформированную в 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. С ними не должно возникнуть никаких сложностей. Просто добавьте свой уникальный контент и готово — можно запускать бизнес и привлекать все новых и новых читателей. Также очень важно помнить о том, что текст для каждого шаблона был написан вручную.
С Уважением, Андрей
Вертикальное меню
Элементы списка могут содержать не только ссылки, но также заголовки, иконки, картинки. С помощью вертикального меню можно оформлять комментарии на сайте, список категорий и т.д.
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">
