Чистий стиль меню за допомогою CSS3

33

Чистый стиль меню с помощью CSS3

Всім знову привіт!
У своїх статтях, я не раз звертався до різних способів створення навігаційних меню для веб-сайтів. Розглядалися менюшки на будь-який смак і колір, навігація в популярному стилі «акордеон», горизонтальні і вертикальні, з використанням javascript і картинок, не мало уваги приділялося багаторівневим меню jQuery. Як ви розумієте способи створення меню обмежені лише фантазією розробників, а вона у них воістину безмежна.
Сьогодні мені хотілося б розповісти і показати на прикладі ще один варіант виконання меню виключно засобами CSS3, без javascript і додаткових зображень. У дизайні меню ми будемо використовувати округлені кути, градієнт фону і прості ефекти при наведенні курсору. Все це разом працює досить добре і стабільно, звичайно тільки в сучасних браузерах, які підтримують CSS3, навіть нові версії замшелого IE, зі скрипом, але все ж відображають кінцевий результат.

І так, озброївшись терпінням і шпаргалками (кому воно треба), почнемо з «фаршу» мертвого коду, творити живе та динамічне меню навігації. Почнемо, як завжди з побудови в Html, найпростішого списку нашої менюшки.

HTML-розмітка

Як ви бачите, розмітка до неподобства просто, виконана у вигляді елементарного неупорядкованого списку. Щоб вдихнути життя та надати привабливості цього списку, ми вдамося до допомоги «магії» CSS3, а точніше сказати, попрацюємо з параметрами таблиць каскадних стилів. Присвоївши списком ідентифікатор id=”main-navigation”, а першим пунктом class=”first”, і вже в css, волю почаклуємо над формою, за кольором, і за функціональністю нашого майбутнього меню.

CSS3 верстка

В оформленні меню використовуємо закруглені кути border-radius і функцію лінійного градієнта, до речі з не давніх пір, і моя улюблена Opera, починаючи з 11-ї версії, нарешті таки включила підтримку градієнта. Ну, а ІЕшка теж пижиться і не відстає від побратимів, нехай навіть і не без допомоги спеціального фільтра.

#main-navigation {
 width: 100%;
border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
background: -webkit-gradient(linear, left, top, left bottom, from(#444444), to(#666666));
 background: -moz-linear-gradient(top, #444444, #666666);
 background: -ms-linear-gradient(top, #444444, #666666);
 background-image: -o-linear-gradient(top,rgb(68,68,68), rgb(102,102,102));
filter: програми:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#666666');
border: 1px solid #444;
 list-style: none;
padding: 0;
margin: 0;
float: left;
}
#main-navigation li {
 float: left;
border-right: 1px solid #777;
 }
#main-navigation li a {
 font: 13px Georgia, "Times New Roman', Times, serif;
letter-spacing: 1px;
padding: 12px 20px;
border-right: 1px solid #333;
 display: block;
color: #fff;
 }

#main-navigation {
width: 100%;
border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
background: -webkit-gradient(linear, left, top, left bottom, from(#444444), to(#666666));
background: -moz-linear-gradient(top, #444444, #666666);
background: -ms-linear-gradient(top, #444444, #666666);
background-image: -o-linear-gradient(top,rgb(68,68,68), rgb(102,102,102));
filter: програми:DXImageTransform.Microsoft.gradient(startColorstr=’#444444′, endColorstr=’#666666′);
border: 1px solid #444;
list-style: none;
padding: 0;
margin: 0;
float: left;
}
#main-navigation li {
float: left;
border-right: 1px solid #777;
}
#main-navigation li a {
font: 13px Georgia, “Times New Roman’, Times, serif;
letter-spacing: 1px;
padding: 12px 20px;
border-right: 1px solid #333;
display: block;
color: #fff;
}

Проробивши все вище описане, на вихлопі ви отримаєте відмінний результат і він буде виглядати наступним чином:

Все вийшло просто чудово. В першому прикладі, при наведенні на пункт меню, ми використовували стандартне підкреслення. Давайте трохи ускладнимо стиль, приберемо підкреслення посилання і додамо більш красивий ефект. Сильно мудрувати не будемо, а просто змінимо напрям градієнта в момент наведення вказівника миші на пункт меню:

#main-navigation li a:hover {
 background: -webkit-gradient(linear, left, top, left bottom, from(#666666), to(#444444));
 background: -moz-linear-gradient(top, #666666, #444444);
 background: -ms-linear-gradient(top, #666666, #444444);
 filter: програми:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#444444');
text-decoration: none;
}

#main-navigation li a:hover {
background: -webkit-gradient(linear, left, top, left bottom, from(#666666), to(#444444));
background: -moz-linear-gradient(top, #666666, #444444);
background: -ms-linear-gradient(top, #666666, #444444);
filter: програми:DXImageTransform.Microsoft.gradient(startColorstr=’#666666′, endColorstr=’#444444′);
text-decoration: none;
}

В результаті ми отримаємо зовсім інший вид активних пунктів навігації:

  • Головна
  • Про Блозі
  • Контакт
  • Наша Карта

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

#main-navigation li.first a {
 border-radius: 8px 0 0 8px;
-moz-border-radius: 8px 0 0 8px;
-khtml-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
}

#main-navigation li.first a {
border-radius: 8px 0 0 8px;
-moz-border-radius: 8px 0 0 8px;
-khtml-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
}

Нічого надприродного ми не зробили, лише додали функцію border-radius верхнім і нижнім лівим кутах. Якщо все правильно зробите(інакше і бути не може), повинно вийти чудове, легковаге, а головне повністю функціональне меню навігації:

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

Матеріал був підготовлений, переведений і доведений до розуму, на основі розробок, напевно доброчесної буржуина: San Bavota

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

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