Чистий стиль меню за допомогою CSS3
І так, озброївшись терпінням і шпаргалками (кому воно треба), почнемо з «фаршу» мертвого коду, творити живе та динамічне меню навігації. Почнемо, як завжди з побудови в Html, найпростішого списку нашої менюшки.
HTML розмітка
Як ви бачите, розмітка виглядає до неподобства просто, виконана у вигляді елементарного невпорядкованого списку. Щоб вдихнути життя і надати привабливості цього списку, ми вдамося до допомоги «магії» CSS 3, а точніше сказати, попрацюємо з параметрами таблиць каскадних стилів. Присвоївши списку ідентифікатор id = "main-navigation". а першим пунктом class = "first", і вже в css, в волю поколдуем над формою, кольором, і функціональністю нашого майбутнього меню.
CSS3 верстка
В оформленні меню використовуємо закруглені кути border-radius і функцію лінійного градієнта, до речі з не давніх пір, і моя улюблена Opera, починаючи з 11-ї версії, нарешті таки включила підтримку градієнта. Ну, а IEшка теж пнеться і не відстає від побратимів, нехай навіть і не без допомоги спеціального фільтра.
Проробивши все вище описане, на вихлопі ви отримаєте відмінний результат і буде він виглядати наступним чином:
Все вийшло просто чудово. У першому прикладі, при наведенні на пункт меню, ми використовували стандартне підкреслення. Давайте трохи ускладнити стиль, приберемо підкреслення посилання і додамо більше гарний ефект. Сильно мудрувати не будемо, а просто змінимо напрямок градієнта в момент наведення покажчика на пункт меню:
У підсумку ми отримаємо зовсім інший вид активних пунктів навігації:
Напевно ви встигли помітити, що перший пункт нашого меню, при наведенні на нього, відображається не зовсім коректно, ліва частина кутів виводяться прямими, що не є добре для симетрії загальної картини. Виправити ситуацію не складе більшого праці, для цього варто додати деякі зміни для класу first. створеного заздалегідь спеціально для першого пункту.
Нічого надприродного ми не зробили, всього лише додали функцію border-radius верхньому і нижньому лівим кутах. Якщо все правильно зробите (інакше і бути не може), має вийти чудове, легковаге, а головне повністю функціональний меню навігації:
Ось і все, дорогі мої друзі, смію тихо сподіватися, що результатом ви залишитеся задоволені. А якщо раптом, кому захочеться видозмінити меню, то це зробити дуже швидко, експериментуючи з параметрами стилів, можна домогтися будь-яких, самих приголомшливих і неймовірних результатів. Не втомлююся повторювати, що майбутнє за новими стандартами і техніками виконання в веб-розробці, постараюся і надалі знайомити вас з дивовижними знахідками і рішеннями веб-дизайну. Наступного разу розповім, як без зайвих і потрібних рухів тіла, можна швидко додати панель пошуку в меню навігації в WordPress.
Матеріал був підготовлений, переведений і доведений до розуму, на основі розробок, напевно добропорядного Буржуїна: Bavota San
Буду всім вдячний, якщо підтримаєте проект - додавши блог в виключення AdBlock і поділіться посиланням на запис в своїх соц-мережах: