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

38

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

Єдині зображення, які ми застосуємо для іконок; з допомогою нового інструменту під назвою SpriteRight я створю спрайт, але це необов’язково. Додатково для створення градієнтів CSS3 я використовую GradientApp, але це теж необов’язково.

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

Крок 1: Основна розмітка HTML

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

Vertical Navigation Menu: Coded CSS3

А тепер розмітка нашого меню: ненумерованний список всередині контейнера — пакувальника.

  • Friends 340
  • Videos 147
  • Galleries 340
  • Podcasts 222
  • Robots 16

Нарешті, створюємо підменю, поміщаючи всередину кожного з існуючих елементів невпорядкований список.

  • Friends 340
    • Cute Kittens 14
    • Strange «Stuff» 6
    • Automatic Fails 2
  • Videos 147
    • Cute Kittens 14
    • Strange «Stuff» 6
    • Automatic Fails 2
  • Galleries 340
    • Cute Kittens 14
    • Strange «Stuff» 6
    • Automatic Fails 2
  • Podcasts 222
    • Cute Kittens 14
    • Strange «Stuff» 6
    • Automatic Fails 2
  • Robots 16
    • Cute Kittens 14
    • Strange «Stuff» 6
    • Automatic Fails 2

Так, можливо, здасться занадто багато, але нехай це вас не бентежить. Спочатку ми створили ненумерованний список з п’яти елементів, кожен з тегом-прив’язкою всередині. Потім додали вкладені невпорядковані списки, кожен з яких складається з трьох елементів.

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

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

Крок 2: «Рухливий» шрифт

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

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.8125 em;
}

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

Крок 3: CSS головного меню

Далі додамо меню кілька стилів. Встановимо ширину і висоту ul меню auto, потім застосуємо до нього тінь. Встановивши на висоту auto, ми доб’ємося того, що при відкритті слайдера тінь стане підлаштовуватися.

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

Додамо фон градієнт 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.8125 em;
}
.menu {
width: auto;
height: auto;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 0px 18px rgba(0,0,0,.13);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 0px 18px rgba(0,0,0,.13);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 0px 18px 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: програми:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr=’#727a86′, EndColorStr=’#505864′);
border-bottom: 1px solid #33373d;
-webkit-box-shadow: inset 1px 0px 0px 0px #878e98;
-moz-box-shadow: inset 1px 0px 0px 0px #878e98;
box-shadow: inset 1px 0px 0px 0px #878e98;
width: 100%;
height: 2.75 em;
line-height: 2.75 em;
text-indent: 2.75 em;
display: block;
position: relative;
font-family: «Helvetica Neue», Helvetica, Arial, sans-serif;
font-weight: 600;
color: #fff;
text-shadow: 1px 0px 0px rgba(0,0,0,.5);
}

Так! Тепер все вже виглядає краще, а ще у нас з’явилася структура! А як щодо додати колір фону, щоб краще виділити меню?

body {
background:#32373d;
}

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

Порада: пам’ятайте про EM’ах

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

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

Крок 4: CSS Підменю

Пора додати CSS для білих підменю. Нам потрібно додати білий фон з сірими кордонами. Зверніть увагу, що у останнього елемента немає нижньої межі, тому ми звернемося до нього для її видалення за допомогою псевдоселектора :last-child. У нього є темно-синя кордон, тому ми видалимо сірий колір і додамо синій.

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

Ще давайте змінимо колір тексту на сірий. Зауважте, що використано display:block. Якщо б ми використовували float:left, меню плавно не анимировались б, так що застосуємо display: block для того, анімація відбувалася красиво і плавно. Також зверніть увагу, що доданий додатковий стиль; ми застосовуємо його до останнього дочірньому елементу в під-ul. Це слід зробити для того, щоб мати можливість міняти колір кордону.

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

Починає виглядати реально добре!

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

Крок 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: програми:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr=’#45c7eb’, EndColorStr=’#2698db’);
border-bottom: 1px solid #103c56;
-webkit-box-shadow: inset 1px 0px 0px 0px #6ad2ef;
-moz-box-shadow: inset 1px 0px 0px 0px #6ad2ef;
box-shadow: inset 1px 0px 0px 0px #6ad2ef;
}
.menu > li > a.active {
border-bottom: 1px solid #1a638f;
}

Крок 6: Іконки головного меню

Додамо іконки, використовуючи псевдоклас :before. Спочатку візьмемо всі теги-прив’язки у вкладених ul, застосовується фоновий спрайт і встановимо його на repeat no. Призначимо розмір шрифту 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;
}

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

Крок 7: Числа основного меню

Так, пам’ятайте додані нами діапазони? Ними створяться числа!

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

.menu > li > a span {
font-size: 0.857 em;
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), 1px 0px 0px 0px rgba(255, 255, 255, .15);
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 1px 0px 0px 0px rgba(255, 255, 255, .15);
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 1px 0px 0px 0px rgba(255, 255, 255, .15);
text-shadow: 1px 0px 0px rgba(0,0,0,.5);
font-weight: 500;
}
.menu > li > a:hover span, .menu > li a.active span {
background: #2173a1;
}

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

Крок 8: Числа і покажчики підменю

Цей процес подібний до попереднього кроку, тому не буду вдаватися в подробиці. Основні відмінності тут полягають у тому, що я видалив колір фону, змінив межу і колір шрифту. Нам потрібно додати покажчик, а для цього ще раз довіритися псевдоклассу :before. Визначаємо ширину та висоту і додаємо позиціонування зліва, використовуючи em, щоб гарантувати «рухливість».

І нарешті, стан при наведенні курсору (спасибі тим, хто в коментах вказав це істотне упущення). Просто застосуємо до тексту-прив’язці, псевдоуказателю і числом всередині діапазону більш темний колір (#32373D).

.menu ul > li > a span {
font-size: 0.857 em;
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.7 em;
}
.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
color: #32373D;
}

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

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

Крок 9: Пора jQuery

Тримаю парі, ви чекали цього моменту! Ну що ж, ми, нарешті, дісталися до jQuery. Перш за все, потрібно звернутися до бібліотеки jQuery за допомогою сервісу, що надається google’ом. Остання поточна версія — 1.7.1. В розділ head своєї HTML-сторінки додайте наступне:

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

$(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’);
}
});
});
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_a є клас ‘active’, то його слід видалити.

menu_ul.filter(‘:visible’).slideUp(‘normal’);

Тут ми використовуємо ‘.filter’ і ‘:visible’. Якщо меню відкрито, посуньте його вгору з нормальною швидкістю.

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

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

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

Тепер потрібно використовувати ELSE як частину свого умовного оператора. Так, ELSE видаляє клас «active», і зрушує меню вгору, щоб приховати його. Саме так можна кодувати будь меню без необхідності перезавантаження сторінки.

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

Висновок

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

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

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

Сподіваюся, ви задоволені цим підручником, спасибі за читання!