Вітання. Дуже давно не писав постів на тему роботи html / css. Нещодавно якраз почав верстати новий макет і в процесі натрапив на цікавий прийом, який дозволяє зробити меню гумовим (в нього можна буде додавати нові пункти і розмір не збільшитися, а завжди буде 100% батьківського блоку). Отже, сьогодні реалізуємо на css гумове меню.
Гумове меню на CSS - крок 1
Перший крок - це завжди html розмітка, куди ж без неї. Але в нашому випадку все буде просто:
- блок обгортка для меню
- саме меню, виведене через маркований список (тег ul)
- ну і пункти меню всередині, а в них, відповідно, вже посилання
Все зрозуміло, ось такий у мене код розмітки:
Виглядає це все стандартно, ось так:
Тепер будемо приводити все в потрібний вид, за роботу береться CSS.
Крок 2 - базові стилі
Створюємо і підключаємо таблицю стилів до html документу. Насамперед я скину відступи у всіх елементів.
Далі я додам стилі блоку-обгортці. А саме, встановлю максимальну ширину в 600 пікселів (просто щоб зручно було робити скріншот, щоб меню влазило), а також відцентруйте блок.
Крок 3 - реалізуємо резиновость
Тепер беремося за саме меню. У нього (у тега ul) я приберу маркери, зроблю фоновий лінійний градієнт. і, найголовніше, властивістю display: table-row змушу контейнер для меню поводитися як табличний ряд. Це важливо зробити для подальших маніпуляцій.
Як бачимо, показаний код якраз вирішив все, про що я писав. До речі, градієнти зручно генерувати за допомогою інструменту Ultimate CSS Gradient generator. Про нього я ще напишу якось.
Далі потрібно задати стилі для пунктів меню. ось:
- vertical-align: bottom - це властивість необхідно для того, щоб в разі, якщо текст в пункті меню займе 2 рядки, він відображався рівно. Коли ми зробимо меню, можете видалити це властивість, збільшити масштаб щоб пункти стиснулися і текст перенісся на два рядки і побачите проблему з відображенням. Поверніть властивість і все буде нормально.
- display: table-cell - оскільки ми задали самому меню відображення табличних поруч, логічно буде поставити його пунктам відображення як осередки в таблиці. Це обов'язково.
- width: auto - ширина буде обчислюватися автоматично, в залежності від довжини тексту в пункті
- text-align: center - це просто для вирівнювання тексту всередині по центру
- height: 50px - задаємо висоту в 50 пікселів
- ну і border-right це просто межа праворуч, такий роздільник для пунктів
І ось так тепер виглядає меню:
Знову ж, поясню деякі рядки:
Крок 4 (за бажанням) можна додати інтерактивності
Наприклад, щоб при наведенні змінювався колір пункту меню. Реалізується це зовсім просто, за допомогою псевдокласу hover:
Тестуємо меню на резиновость
Відмінно, меню готові, але ми не перевірили найголовніше - наскільки воно гумове, як я вам і обіцяв. Що ж, додам в меню ще 2 пункти:
Меню залишилося в ширину на 600 пікселів. Інші пункти просто трохи стиснулися, щоб помістилися 2 нових.
Додам ще 1 довгий пункт:
Як бачите, меню ще трохи ужалось і довгий пункт відобразився цілком собі нормально. А якби не було властивості vertical-align: bottom. про який я вам говорив, то меню виглядало б гірше.
Зменшу меню до трьох пунктів.
Пунктах стало набагато вільніше, але саме меню не змінилося в ширині. Ось ми і зробили 100% гумове меню!
Як його адаптувати?
В принципі, якщо ви задали блоку-обгортці не фіксували, а максимальну ширину, то його навіть не потрібно адаптувати. У моєму випадку у мене стоїть властивість max-width: 600px і коли ширина стане менше 600 пікселів, блок просто буде зменшуватися слідом за екраном, не утворюючи горизонтальної прокрутки.
Ну а якщо ви хочете якось змінити або поправити меню на мобільних пристроях або широких екранах, то медіа запити вам в помощь! Успіхів в сайтобудування!
Вам також може бути цікаво