Як зробити горизонтальне меню на css3

23

Від автора: вітаю вас на цьому блозі. Після статей про html5 хотілося б також згадати css3 – обидві ці технології принесли багато нового у світ сайтобудування. Зокрема, сьогодні ми оформимо горизонтальне меню на css3, застосувавши властивості нової версії цієї технології.

Створення переходів

Насамперед, потрібно зробити розмітку. Тут можна вчинити по-різному – можна вивести пункти меню списком, можна просто в nav подобавлять різні посилання. Для простоти я так і вчиню в цьому прикладі. Звичайно ж, за створення меню відповідає html, css тільки за його оформлення.

Загалом, я навіть не буду приводити розмітку. Скажу тільки, що в блок nav я додав пару посилань.

Як зробити горизонтальне меню на css3

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

margin-right: -4px;

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

Оформлення навігації

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

a{
display: block;
padding: 20px;
background: #213163;
color: white;
float: left;
}

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

Як зробити горизонтальне меню на css3

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

a:hover{
text-decoration: none;
color: orange
}

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

Як зробити горизонтальне меню на css3

Власне, їх можна зробити і по-іншому. Справа в тому, що звичайна рамка або межа (border) збільшує розмір блоку і іноді це може призвести до додавання потрібної ширини. Відповідно, можна застосувати властивість box-shadow або outline. Друге повністю аналогічно border, але при цьому не збільшує розміри елементів. Також по оформленню такі роздільники можуть трохи відрізнятися.

Як зробити на css3 красиве горизонтальне меню?

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

background: linear-gradient(to bottom, #213163, aqua);

Як зробити горизонтальне меню на css3

Ну от, наше меню стало значно красивіше. Що ще з ним можна було б зробити? При наведенні ви можете використовувати css3 трансформації, щоб збільшувати, повертати або переміщати посилання.

Якщо задати контейнера nav якісь розміри, то йому теж можна задати фон, після цього слід додати зовнішні відступи посиланнями, додати їм скруглення і вийде теж непогано.

nav{
width: 700px;
background: #213163;
height: 90px
}

Як зробити горизонтальне меню на css3

Як адаптувати меню для мобільного сайту

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

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

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

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

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