Створюємо багаторівневе горизонтальне меню з ефектом анімації на CSS3

57

Создаем многоуровневое горизонтальное меню с эффектом анимации на CSS3

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

Сьогодні ми навчимося створювати багаторівневе, горизонтальне меню з цікавим ефектом анімації для випадають підпунктів, виключно засобами CSS3. В уроці представлені структура побудови меню і випадаючих списків, всі стилі оформлення, включаючи візуальний ефект, для створення якого застосовуються псевдо-елементи з особливими атрибутами.

Примітка: Слід пам’ятати, що ще не всі браузери однаково добре підтримують функції CSS3. Наприклад, в Internet Explorer використовуйте це меню буде виглядати дещо інакше ??

Многоуровневое горизонтальное меню навигации

ДемоСкачать

Приклад подивилися, тепер давайте подивимося на весь розклад, почнемо з розмітки html каркаса нашого меню.

HTML

Тут нічого не звичайного, для меню ми будемо використовувати типову розмітку у вигляді неупорядкованого списку. Ось як виглядає уривок коду розмітки html основних пунктів меню з випадаючими підпунктами стосовно до нашої версії:

<nav id="menu-wrap">
<ul id="menu">
<li><a href="#">Головна</a></li>
<li><a href="#">Категорії</a>
<ul>
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">Графіка</a></li>
<li><a href="#">Розробка</a></li>
<li><a href="#">Веб дизайн</a></li>
</ul>
</li>
<li><a href="#">Статті</a></li>
<li><a href="#">Сайт</a></li>
<li><a href="#">Контакти</a></li>
</ul>
</nav>

Як бачите нічого складного, це всього лише уривок великий навігаційної панелі. Ви можете додавати і видаляти основні пункти, вбудовувати багатоступеневу структуру випадають підпунктів. Якщо виникнуть труднощі, ніхто не заважає Вам звернутися до вихідного коду демо-версії меню, де видно весь розклад, керуючись їм, ви зможете побудувати свій список многоуровненго меню.

CSS3

З розміткою, думаю, все більш чи менш зрозуміло. Тепер нас чекає найцікавіше, це оформити наше меню, визначити форму, кольорову гаму, за допомогою функції лінійного градієнта CSS3 надати виразності пунктів меню. Додамо трохи движухи, з допомогою магії CSS3 створимо ефект анімації для випадають підпунктів.
Для більшої ясності додав деякі пояснення пояснення стилів.

Скидаємо стилі списку ul за замовчуванням:

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

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

Маркер для списку в нашому випадку непотрібен, значить list-style виставляємо значення none.

Встановлюємо базові стилі для основної панелі #menu списку ul. Виставляємо ширину панелі, додаємо функції градієнта, закруглені кути і тінь для нижньої межі:

CSS3 стили меню

#menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left, top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}

#menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left, top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}

При верстці макета меню ніяк не обійтися без плаваючих елементів: HTML елементів з властивостями float:left float:right які зазвичай випадають з основного потоку і виходять за межі його батьківського елементу, і в результаті цього батьківський елемент схлопывается. Для того, щоб запобігти схлопування необхідна очищення потоку (Clear Float). Для цього використовуємо компактний метод очищення потоку стилями за допомогою псевдокласів :before і :after.

#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1; /* Хак для IE 6 і 7 */
}

#menu:before,
#menu:after {
content: “”;
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1; /* Хак для IE 6 і 7 */
}

Елементи списку

Элементы списка меню

Зверніть увагу на #menu li:hover > a селектор. Це, мабуть, один з найбільш важливих елементів побудови та оформлення цього випадаючого меню

Ось як це працює: Вибираємо «a» елемент, який є дочірнім «li» ,«li» елемент повинен бути в основному потоці «# menu». Встановлюємо необхідні нам властивості цих елементів, розташування, параметри тексту, світло посилань і т. д.:

#menu li {
float: left;
border-right: 1px solid #222;
-webkit-box-shadow: 1px 0 0 #444;
-moz-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* Для IE6 */
color: #fafafa;
}

#menu li {
float: left;
border-right: 1px solid #222;
-webkit-box-shadow: 1px 0 0 #444;
-moz-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* Для IE6 */
color: #fafafa;
}

Підпункти меню

З допомогою CSS3 transiton ми можемо анімувати зміни властивостей CSS, таких як margin або opacity. Використовував цю чудову функцію CSS3 для анімації появи підменю. Результат на лице:

CSS3 Анимация меню навигации

#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
background: -webkit-linear-gradient(#444, #111);
background: -moz-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
/ * Призначаємо зміни властивостей CSS плавно і протягом встановленого часу */
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #0186ba;
background-image: linear-gradient(#04acec, #0186ba);
}

#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
background: -webkit-linear-gradient(#444, #111);
background: -moz-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
/ * Призначаємо зміни властивостей CSS плавно і протягом встановленого часу */
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #0186ba;
background-image: linear-gradient(#04acec, #0186ba);
}

Перший(:first-child) і останній(:last-child) дочірні елементи списку в стилі:

CSS3 меню навигации

#menu ul li:first-child > a {
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: ";
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

#menu ul li:first-child > a {
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > after a: {
content: “;
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child after a: {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

На цьому мабуть і все. Зібравши воєдино всі елементи стилів і підключивши до сторінки html, ми отримаємо чудове, горизонтальне, багаторівневе меню з привабливим ефектом анімації для випадають підпунктів. Якщо включити трохи фантазії і поекспериментувати з параметрами стилів CSS, можна досягти приголомшливих результатів, створити свій, неповторний стиль навігаційного меню.

ДемоСкачать

Цей урок підготовлено за матеріалами: RedTeamDesign

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: