Вертикальное навигационное меню Ормана Кларка: версия от CSS3

Дата публикации: 2012-07-16

Вертикальное навигационное меню Ормана Кларка

От автора: следующее в серии кодированных Орманом Кларком (Orman Clark) PSD – его потрясающее Вертикальное навигационное меню. Мы воссоздадим его с помощью CSS3 и jQuery, используя минимально возможное количество изображений.

Единственные изображения, которые мы применим – для иконок; с помощью нового инструмента под названием SpriteRight я создам спрайт, но это необязательно. Дополнительно для создания градиентов CSS3 я использую GradientApp, но это тоже необязательно.

Шаг 1: Основная разметка HTML

Давайте начнём с добавления основной разметки в пустой документ HTML5:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
         
        <title>Vertical Navigation Menu: CSS3 Coded</title>
         
        <link rel="stylesheet" href="css/styles.css">
         
    </head>
<body>
 
</body>
</html>

<!DOCTYPE html>

<head>

<title>Vertical Navigation Menu: CSS3 Coded</title>

</head>

<body>

</body>

</html>

А теперь разметка нашего меню: неупорядоченный список внутри контейнера- упаковщика.

<div id="wrapper">
 
    <ul class="menu">
        <li class="item1"><a href="#">Friends <span>340</span></a></li>
        <li class="item2"><a href="#">Videos <span>147</span></a></li>
        <li class="item3"><a href="#">Galleries <span>340</span></a></li>
        <li class="item4"><a href="#">Podcasts <span>222</span></a></li>
        <li class="item5"><a href="#">Robots <span>16</span></a></li>
    </ul>
 
</div>

<li class="item1"><a href="#">Friends 340</a></li>

<li class="item2"><a href="#">Videos 147</a></li>

<li class="item3"><a href="#">Galleries 340</a></li>

<li class="item4"><a href="#">Podcasts 222</a></li>

<li class="item5"><a href="#">Robots 16</a></li>

</ul>

</div>

Наконец, создаём подменю, помещая внутрь каждого из существующих элементов неупорядоченный список.

<div id="wrapper">
 
    <ul class="menu">
        <li class="item1"><a href="#">Friends <span>340</span></a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
                <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
                <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
            </ul>
        </li>
        <li class="item2"><a href="#">Videos <span>147</span></a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
                <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
                <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
            </ul>
        </li>
        <li class="item3"><a href="#">Galleries <span>340</span></a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
                <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
                <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
            </ul>
        </li>
        <li class="item4"><a href="#">Podcasts <span>222</span></a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
                <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
                <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
            </ul>
        </li>
        <li class="item5"><a href="#">Robots <span>16</span></a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
                <li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
                <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
            </ul>
        </li>
    </ul>
 
</div>

<li class="item1"><a href="#">Friends 340</a>

<ul>

<li class="subitem1"><a href="#">Cute Kittens 14</a></li>

<li class="subitem2"><a href="#">Strange “Stuff” 6</a></li>

<li class="subitem3"><a href="#">Automatic Fails 2</a></li>

</ul>

</li>

<li class="item2"><a href="#">Videos 147</a>

<ul>

<li class="subitem1"><a href="#">Cute Kittens 14</a></li>

<li class="subitem2"><a href="#">Strange “Stuff” 6</a></li>

<li class="subitem3"><a href="#">Automatic Fails 2</a></li>

</ul>

</li>

<li class="item3"><a href="#">Galleries 340</a>

<ul>

<li class="subitem1"><a href="#">Cute Kittens 14</a></li>

<li class="subitem2"><a href="#">Strange “Stuff” 6</a></li>

<li class="subitem3"><a href="#">Automatic Fails 2</a></li>

</ul>

</li>

<li class="item4"><a href="#">Podcasts 222</a>

<ul>

<li class="subitem1"><a href="#">Cute Kittens 14</a></li>

<li class="subitem2"><a href="#">Strange “Stuff” 6</a></li>

<li class="subitem3"><a href="#">Automatic Fails 2</a></li>

</ul>

</li>

<li class="item5"><a href="#">Robots 16</a>

<ul>

<li class="subitem1"><a href="#">Cute Kittens 14</a></li>

<li class="subitem2"><a href="#">Strange “Stuff” 6</a></li>

<li class="subitem3"><a href="#">Automatic Fails 2</a></li>

</ul>

</li>

</ul>

</div>

Да, возможно, покажется слишком много, но пусть это вас не смущает. Сначала мы создали неупорядоченный список из пяти элементов, каждый с тегом-привязкой внутри. Затем добавили вложенные неупорядоченные списки, каждый из которых состоит из трёх элементов.

Я также добавил каждому элементу списка класс, позже это облегчит работу со стилями. Наконец, для чисел мы создали тег внутри каждого тега-привязки. Если посмотреть через браузер, это должно выглядеть так:

Шаг 2: «Подвижный» шрифт

Сначала убедимся, что наше меню правильно отображается. Добавьте в css/styles.css эти правила, они установят поля и отступ для всех ul на 0 и удалят стиль списка.

ul,
ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul,

ul ul {

margin: 0;

padding: 0;

list-style: none;

}

Перед назначением стилей нашему меню давайте создадим упаковщик с фиксированной шириной и размером шрифта 13px (выраженном в em). Сначала добавим правило font-size:100%; для body. Это гарантирует, что стили будут основаны на размерах шрифта по умолчанию для браузера (обычно 16px).

Теперь объясню, как работает упаковщик размера шрифта. Нам нужно выразить его как em – пропорционально размеру шрифта его родительского элемента. Нам нужен размер 13px, так, если родительский размер — 16px, наш конечный em получится: 13 / 16 = 0.8125. 13px это 0.8125*16px.

Измеряя шрифты (и прочие элементы) в единицах em, мы делаем их «подвижными». Теперь, если изменить размер шрифта упаковщика (или его значение по умолчанию в браузере), то в зависимости от этого подстроится все меню. Пусть это вас не смущает: если потребуется помощь с конвертированием шрифтов, советую вам посетить сайт pxtoem.com.

body {
    font-size: 100%;
}
a {
    text-decoration: none;
}
ul,
ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#wrapper { 
    width: 220px;
    margin: 100px auto;
    font-size: 0.8125em;
}

body {

font-size: 100%;

}

a {

text-decoration: none;

}

ul,

ul ul {

margin: 0;

padding: 0;

list-style: none;

}

#wrapper {

width: 220px;

margin: 100px auto;

font-size: 0.8125em;

}

Мы назначили упаковщику фиксированную ширину в 220px и отцентрировали его с небольшим верхним полем, добавив margin:100px auto;.

Шаг 3: CSS главного меню

Далее добавим меню несколько стилей. Установим ширину и высоту ul меню на auto, затем применим к нему тень. Установив высоту на auto, мы добьёмся того, что при открытии слайдера тень станет подстраиваться.

Затем тэги-привязки; мы добавим ширину в 100%, это значит, что они будут растягиваться до 220px – ширины упаковщика. Для высоты применим em’ы – значит, вернёмся к основному размеру шрифта 13px. Наш .psd показывает высоту 36px и является нашей целью. Возьмём 36, разделим на 13, получится примерно 2.75em (36 / 13 = 2.76923077). Кроме того, для высоты строки (чтобы выровнять весь текст по вертикали) возьмем 2.75em, затем применим текстовый отступ, чтобы отодвинуть текст, оставив немного места для будущей иконки.

Добавим в фон градиент CSS3, я создал его с помощью GradientApp. Затем изменим шрифт, применив Helvetica Neue и белый цвет наряду с текстовой тенью. Отметьте, что здесь мы не использовали размер шрифта. Это оттого, что основной шрифт упаковщика — 13px, и его унаследовали наши привязки, так что нет нужды его добавлять.

body {
    font-size: 100%;
}
a {
    text-decoration: none;
}
ul,
ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#wrapper { 
    width: 220px;
    margin: 100px auto;
    font-size: 0.8125em;
}
.menu {
    width: auto;
    height: auto;
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
    -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
    background-color: #616975;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
    background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#727a86', EndColorStr='#505864');
    border-bottom: 1px solid #33373d;
    -webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
    -moz-box-shadow: inset 0px 1px 0px 0px #878e98;
    box-shadow: inset 0px 1px 0px 0px #878e98;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 2.75em;
    display: block;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0,0,0,.5);
}

body {

font-size: 100%;

}

a {

text-decoration: none;

}

ul,

ul ul {

margin: 0;

padding: 0;

list-style: none;

}

#wrapper {

width: 220px;

margin: 100px auto;

font-size: 0.8125em;

}

.menu {

width: auto;

height: auto;

-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);

-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);

box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);

}

.menu > li > a {

background-color: #616975;

background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));

background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));

background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));

background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#727a86', EndColorStr='#505864');

border-bottom: 1px solid #33373d;

-webkit-box-shadow: inset 0px 1px 0px 0px #878e98;

-moz-box-shadow: inset 0px 1px 0px 0px #878e98;

box-shadow: inset 0px 1px 0px 0px #878e98;

width: 100%;

height: 2.75em;

line-height: 2.75em;

text-indent: 2.75em;

display: block;

position: relative;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-weight: 600;

color: #fff;

text-shadow: 0px 1px 0px rgba(0,0,0,.5);

}

Так! Теперь все уже смотрится получше, а еще у нас появилась структура! А как насчёт добавить цвет фона, чтобы лучше выделить меню?

body {
    background:#32373d;
}

body {

background:#32373d;

}

Совет: помните об EM’ах

Из вышеприведенного CSS заметно, что забыть о фактическом значении единиц em легко. Представить в комментариях свои исходные вычисления было бы отличной идеей, чтобы, вернувшись в будущем к коду, можно было расшифровать сделанное ранее. Помните формулу: желаемый размер (px) / родительский размер (px) = результант (em) и используйте символ приблизительности (≈), если округляете результат.

#wrapper { 
    font-size: 0.8125em;    /* 13/16 = 0.8125*/
}
 
.menu > li > a {
    height: 2.75em;         /* 36/13 ≈ 2.75*/
    line-height: 2.75em;    /* 36/13 ≈ 2.75*/
    text-indent: 2.75em;    /* 36/13 ≈ 2.75*/
}

#wrapper {

font-size: 0.8125em; /* 13/16 = 0.8125*/

}

.menu > li > a {

height: 2.75em; /* 36/13 ≈ 2.75*/

line-height: 2.75em; /* 36/13 ≈ 2.75*/

text-indent: 2.75em; /* 36/13 ≈ 2.75*/

}

Шаг 4: CSS Подменю

Пора добавить CSS для белых подменю. Нам нужно добавить белый фон с серыми границами. Обратите внимание, что у последнего элемента нет нижней границы, поэтому мы обратимся к нему для ее удаления посредством псевдоселектора :last-child. У него имеется темно-синяя граница, поэтому мы удалим серый цвет и добавим синий.

Следующий шаг аналогичен предыдущему; снова добавим высоту и ширину и изменим фон на белый. На этот раз нам придется изменить размер шрифта. Нам нужно 12px, поэтому с помощью своей формулы желаемый размер (px) / родительский размер (px) = результант (em) получим 0.923em.

Еще давайте поменяем цвет текста на серый. Заметьте, что использован display:block. Если бы мы использовали float:left, меню плавно не анимировались бы, так что применим display: block для того, анимация происходила красиво и плавно. Также обратите внимание, что добавлен дополнительный стиль; мы применяем его к последнему дочернему элементу в под-ul. Это следует сделать для того, чтобы иметь возможность менять цвет границы.

.menu ul li a {
    background: #fff;
    border-bottom: 1px solid #efeff0;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 2.75em;
    display: block;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.923em;
    font-weight: 400;
    color: #878d95;
}
.menu ul li:last-child a {
    border-bottom: 1px solid #33373d;
}

.menu ul li a {

background: #fff;

border-bottom: 1px solid #efeff0;

width: 100%;

height: 2.75em;

line-height: 2.75em;

text-indent: 2.75em;

display: block;

position: relative;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-size: 0.923em;

font-weight: 400;

color: #878d95;

}

.menu ul li:last-child a {

border-bottom: 1px solid #33373d;

}

Начинает смотреться реально хорошо!

Шаг 5: Стили активного состояния и проведения мышью над объектом

Сейчас мы добавим стили активного состояния меню и состояния проведения над ним мышью, специально для того момента, когда «аккордеон» развернут! Кроме того, добавим в активное меню нижнюю границу. Теперь вы думаете: «Почему мы не добавили класс активного состояния?». Что ж, друзья, как раз этим позже займется jQuery.

.menu > li > a:hover,
.menu > li > a.active {
    background-color: #35afe3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
    background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#45c7eb', EndColorStr='#2698db');
    border-bottom: 1px solid #103c56;
    -webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
    -moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
    box-shadow: inset 0px 1px 0px 0px #6ad2ef;
}
.menu > li > a.active {
    border-bottom: 1px solid #1a638f;
}

.menu > li > a:hover,

.menu > li > a.active {

background-color: #35afe3;

background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));

background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));

background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));

background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#45c7eb', EndColorStr='#2698db');

border-bottom: 1px solid #103c56;

-webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;

-moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;

box-shadow: inset 0px 1px 0px 0px #6ad2ef;

}

.menu > li > a.active {

border-bottom: 1px solid #1a638f;

}

Шаг 6: Иконки главного меню

Добавим иконки, используя псевдокласс :before. Сначала возьмем все теги-привязки во вложенных ul, применим фоновый спрайт и установим его на no repeat. Назначим размер шрифта 36px, хотя здесь нет текста; применим 36px, чтобы можно было использовать ширину и высоту в 1em, что равняется сейчас 36px. Затем сдвинем элемент на 50% вниз и удалим .5em с верхнего поля, чтобы отцентрировать его.

Используя классы для каждого элемента списка под-ul’ов, возьмем их и назначим каждому соответствующую фоновую позицию спрайта.

Примечание: Я создал этот спрайт с помощью нового приложения под названием SpriteRight, если хотите поработать над ним, то в исходники я включил изображения и файлы проекта.

.menu > li > a:before {
    content: '';
    background-image: url(../images/sprite.png);
    background-repeat: no-repeat;
    font-size: 36px;
    height: 1em;
    width: 1em;
    position: absolute;
    left: 0;
    top: 50%;
    margin: -.5em 0 0 0;
}
.item1 > a:before {
    background-position: 0 0;
}
.item2 > a:before {
    background-position: -38px 0;
}
.item3 > a:before {
    background-position: 0 -38px;
}
.item4 > a:before {
    background-position: -38px -38px;
}
.item5 > a:before {
    background-position: -76px 0;
}

.menu > li > a:before {

content: '';

background-repeat: no-repeat;

font-size: 36px;

height: 1em;

width: 1em;

position: absolute;

left: 0;

top: 50%;

margin: -.5em 0 0 0;

}

.item1 > a:before {

background-position: 0 0;

}

.item2 > a:before {

background-position: -38px 0;

}

.item3 > a:before {

background-position: 0 -38px;

}

.item4 > a:before {

background-position: -38px -38px;

}

.item5 > a:before {

background-position: -76px 0;

}

Шаг 7: Числа основного меню

Так, помните добавленные нами диапазоны? Ими создадутся числа!

Сначала добавим размер шрифта 11px (что примерно соответствует 0.857em). Мы разместим их абсолютно и сдвинем справа на 1em – снова em, чтобы они были «подвижными». Сдвинем число вниз на 50% от верха и удалим верхнее поле, чтобы разместить его по центру. Фон будет добавлен вместе с тенями блока, внутренней и внешней. Для создания ширины и высоты и «подвижности» снова применим отступ. Мы даже для border radius использовали em’ы; нам это пригодится, потому что если увеличить текст, они окажутся непропорциональными. Еще я добавил другой стиль для моментов, когда к ссылке применяется проведение курсором или активное состояние.

.menu > li > a span {
    font-size: 0.857em;
    display: inline-block;
    position: absolute;
    right: 1em;
    top: 50%;
    background: #48515c;
    line-height: 1em;
    height: 1em;
    padding: .4em .6em;
    margin: -.8em 0 0 0;
    color: #fff;
    text-indent: 0;
    text-align: center;
    -webkit-border-radius: .769em;
    -moz-border-radius: .769em;
    border-radius: .769em;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    text-shadow: 0px 1px 0px rgba(0,0,0,.5);
    font-weight: 500;
}
.menu > li > a:hover span, .menu > li a.active span {
    background: #2173a1;
}

.menu > li > a span {

font-size: 0.857em;

display: inline-block;

position: absolute;

right: 1em;

top: 50%;

background: #48515c;

line-height: 1em;

height: 1em;

padding: .4em .6em;

margin: -.8em 0 0 0;

color: #fff;

text-indent: 0;

text-align: center;

-webkit-border-radius: .769em;

-moz-border-radius: .769em;

border-radius: .769em;

-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);

-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);

box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);

text-shadow: 0px 1px 0px rgba(0,0,0,.5);

font-weight: 500;

}

.menu > li > a:hover span, .menu > li a.active span {

background: #2173a1;

}

Шаг 8: Числа и указатели подменю

Этот процесс подобен предыдущему шагу, поэтому не стану вдаваться в подробности. Основные отличия здесь состоят в том, что я удалил цвет фона, изменил границу и цвет шрифта. Нам нужно добавить указатель, а для этого ещё раз довериться псевдоклассу :before. Определяем ширину и высоту и добавляем позиционирование слева, используя em, чтобы гарантировать «подвижность».

И наконец, состояние при наведении курсора (спасибо тем, кто в комментах указал это важное упущение). Просто применим к тексту-привязке, псевдоуказателю и числу внутри диапазона более тёмный цвет (#32373D).

.menu ul > li > a span {
    font-size: 0.857em;
    display: inline-block;
    position: absolute;
    right: 1em;
    top: 50%; /
    background: #fff;
    border: 1px solid #d0d0d3;
    line-height: 1em;
    height: 1em;
    padding: .4em .7em;
    margin: -.9em 0 0 0;
    color: #878d95;
    text-indent: 0;
    text-align: center;
    -webkit-border-radius: .769em;
    -moz-border-radius: 769em;
    border-radius: 769em;
    text-shadow: 0px 0px 0px rgba(255,255,255,.01));
}
.menu > li > ul li a:before {
    content: '▶';
    font-size: 8px;
    color: #bcbcbf;
    position: absolute;
    width: 1em;
    height: 1em;
    top: 0;
    left: -2.7em;
}
 
.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
    color: #32373D;
}

.menu ul > li > a span {

font-size: 0.857em;

display: inline-block;

position: absolute;

right: 1em;

top: 50%; /

background: #fff;

border: 1px solid #d0d0d3;

line-height: 1em;

height: 1em;

padding: .4em .7em;

margin: -.9em 0 0 0;

color: #878d95;

text-indent: 0;

text-align: center;

-webkit-border-radius: .769em;

-moz-border-radius: 769em;

border-radius: 769em;

text-shadow: 0px 0px 0px rgba(255,255,255,.01));

}

.menu > li > ul li a:before {

content: '▶';

font-size: 8px;

color: #bcbcbf;

position: absolute;

width: 1em;

height: 1em;

top: 0;

left: -2.7em;

}

.menu > li > ul li:hover a,

.menu > li > ul li:hover a span,

.menu > li > ul li:hover a:before {

color: #32373D;

}

Теперь все выглядит весьма круто, верно? Думаю, самое время добавить функциональность!

Шаг 9: Пора jQuery

Держу пари, вы ждали этого момента! Ну что ж, мы, наконец, добрались до jQuery. Прежде всего, нужно обратиться к библиотеке jQuery с помощью сервиса, предоставляемого Google’ом. Последняя текущая версия — 1.7.1. В раздел head своей HTML-страницы добавьте следующее:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

1	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Теперь добавьте кое-что в конец html-документа перед закрывающим тегом body. Не беспокойтесь о том, что это сбивает с толку, через минуту я все объясню.

<script type="text/javascript">
$(function() {
 
    var menu_ul = $('.menu > li > ul'),
        menu_a  = $('.menu > li > a');
     
    menu_ul.hide();
 
    menu_a.click(function(e) {
        e.preventDefault();
        if(!$(this).hasClass('active')) {
            menu_a.removeClass('active');
            menu_ul.filter(':visible').slideUp('normal');
            $(this).addClass('active').next().stop(true,true).slideDown('normal');
        } else {
            $(this).removeClass('active');
            $(this).next().stop(true,true).slideUp('normal');
        }
    });
 
});
</script>

$(function() {

var menu_ul = $('.menu > li > ul'),

menu_a = $('.menu > li > a');

menu_ul.hide();

menu_a.click(function(e) {

e.preventDefault();

if(!$(this).hasClass('active')) {

menu_a.removeClass('active');

menu_ul.filter(':visible').slideUp('normal');

$(this).addClass('active').next().stop(true,true).slideDown('normal');

} else {

$(this).removeClass('active');

$(this).next().stop(true,true).slideUp('normal');

}

});

</script>

var menu_ul = $('.menu > li > ul'),
    menu_a  = $('.menu > li > a');

1 2	var menu_ul = $('.menu > li > ul'), menu_a = $('.menu > li > a');

Сначала сохраняем подменю и теги-привязки основного меню в две разные переменные, так к ним станет легче обращаться.

menu_ul.hide();

1	menu_ul.hide();

Так скрываются все подменю при загрузке страницы.

menu_a.click(function(e) {

1	menu_a.click(function(e) {

Сначала отдаем указание что-либо делать при щелчке по одному из тэгов-привязок основного меню.

e.preventDefault();

1	e.preventDefault();

Здесь мы препятствуем тэгам-привязкам следовать по ссылкам или менять адрес в адресной строке. Например, если вы создадите тэг-привязку со ссылкой на ‘#’ при щелчке на его, то теперь он не станет отображаться в адресной строке. Тэги-привязки в основном отключены.

if(!$(this).hasClass('active')) {
    menu_a.removeClass('active');

1 2	if(!$(this).hasClass('active')) { menu_a.removeClass('active');

Теперь отдадим указание о том, что ЕСЛИ у menu_a имеется класс ‘active’, то его следует удалить.

menu_ul.filter(':visible').slideUp('normal');

1	menu_ul.filter(':visible').slideUp('normal');

Здесь мы используем ‘.filter’ и ‘:visible’. Если меню открыто, сдвиньте его вверх с нормальной скоростью.

$(this).addClass('active').next().stop(true,true).slideDown('normal');

1	$(this).addClass('active').next().stop(true,true).slideDown('normal');

Если меню закрыто, добавить класс ‘active’ (так мы можем обратиться к хорошему стилю CSS) и сдвинуть его вниз с нормальной скоростью.

} else {
    $(this).removeClass('active');
    $(this).next().stop(true,true).slideUp('normal');

} else {

$(this).removeClass('active');

$(this).next().stop(true,true).slideUp('normal');

Теперь нужно использовать ELSE как часть своего условного оператора. Так, ELSE удаляет класс «active», и сдвигает меню вверх, чтобы скрыть его. Именно так можно кодировать любое меню без необходимости в перезагрузке страницы.

Примечание: Если вы хотите изменить скорость скольжения, измените normal на, скажем, ‘500’. Так меню станет сдвигаться за 500 миллисекунд.

Заключение

Итак, мы сделали все полностью! Создали код отличного вертикального навигационного меню Ормана с помощью CSS3 и jQuery! Оставайтесь на связи, чтобы получить подсказки и советы о том, как создать его с помощью одного лишь CSS3 и псевдоселектора :target.