Привіт! Дуже давно не писав постів на тему html/css. Нещодавно почав верстати новий макет і в процесі натрапив на цікавий прийом, який дозволяє зробити меню гумовим (в нього можна буде додавати нові пункти і розмір не збільшитися, а завжди буде 100% батьківського блоку). Отже, сьогодні реалізуємо на css гумове меню.
Кому ліньки читати статтю, можна подивитися це відео. Автор також все дуже класно пояснює:
Гумове меню на CSS - крок 1
Перший крок - це завжди HTML розмітка, куди ж без неї. Але в нашому випадку все буде просто:
- блок обгортка для меню
- саме меню, виведене через маркований список (тег ul)
- ну і пункти меню всередині, а в них, відповідно, вже посилання
Все зрозуміло, ось такий у мене код розмітки:
Виглядає все це стандартно, ось так:
Тепер приводитимемо все в потрібний вигляд, за роботу береться CSS.
Крок 2 - базові стилі
Далі я додам стилі блоку-обгортці. А саме, встановлю максимальну ширину в 600 пікселів (просто, щоб зручно було робити скріншот, щоб меню влазило), а також відцентрую блок.
Wrap(
background: #fff;
max-width: 600px;
margin: 0 auto;
}
Крок 3 - реалізуємо гумовість
Тепер беремося за саме меню. У нього (у тега ul) я приберу маркери, зроблю фоновий лінійний градієнт і, найголовніше, властивістю display: table-row примушу контейнер для меню поводитися як табличний ряд. Це важливо зробити для подальших маніпуляцій.
R-menu(
background: linear-gradient(to right, #b0d4e3 0%, #88bacf 100%);
display: table-row;
list-style: none;
}
Як бачите, наведений код вирішив усе, про що я писав. До речі, градієнти зручно генерувати за допомогою інструмента Ultimate CSS Gradient Generator. Про нього я ще якось напишу.
R-menu li(
vertical-align: bottom;
display: table-cell;
width: auto;
text-align: center;
height: 50px;
border-right: 1px solid #222;
}
- vertical-align: bottom — ця властивість потрібна для того, щоб у випадку, якщо текст у пункті меню займе 2 рядки, він відображався рівно. Коли ми зробимо меню, можете видалити цю властивість, збільшити масштаб, щоб пункти стиснулися і текст перенісся на два рядки і побачите проблему з відображенням. Поверніть властивість і все буде гаразд.
- display: table-cell - оскільки ми задали самому меню відображення табличним рядом, логічно буде задати його пунктам відображення як комірки в таблиці. Це неодмінно.
- width: auto — ширина обчислюватиметься автоматично, залежно від довжини тексту в пункті
- text-align: center — це просто для вирівнювання тексту всередині центром
- height: 50px - задаємо висоту в 50 пікселів
- ну і border-right це просто межа праворуч, такий роздільник для пунктів
Поки меню виглядає непоказно, але нічого, настав час довести його до пуття. 
Останнє, що потрібно зробити, — задати стилі посиланням усередині пунктів. Тут у мене такий код:
R-menu li a (
text-decoration: none;
width: 1000px;
height: 50px;
vertical-align: middle;
display: table-cell;
color: #fff;
font: normal 14px Verdana;
}
І ось так тепер виглядає меню:
Знову ж таки, поясню деякі рядки:
- властивість text-decoration скасовує підкреслення у посилань, що ставиться за умовчанням
- width: 1000px - мабуть, найважливіший рядок. Потрібно задати посиланням приблизно таку ширину, можна і менше, але обов'язково більше максимально широкого пункту меню. Посилання не стануть завширшки 1000 пікселів, оскільки ширину обмежить пункт меню li, у якого ширина задана як auto, зате це дозволить зробити так, щоб за будь-якої кількості пунктів у меню воно завжди було на 100 відсотків ширини.
- vertical-align: middle і display: table-cell — перше вирівняє текст по вертикалі центром, а друге також робить відображення посилань у вигляді осередків. Обидві властивості потрібні.
- font — це просто набір установок для шрифту. Читайте про css властивості для шрифтів у цій статті.
Крок 4 (за бажанням) можна додати інтерактивності
Наприклад, щоб змінити колір пункту меню при наведенні. Реалізується це дуже просто, за допомогою псевдокласу.
R-menu li:hover(
background-color: #6bba70;
}
Тестуємо меню на гумовість
Відмінно меню готові, але ми не перевірили найголовніше — наскільки воно гумове, як я вам і обіцяв. Що ж, додам у меню ще 2 пункти:
Меню залишилося завширшки на 600 пікселів. Інші пункти просто трохи втиснулися, щоб помістилися 2 нових.
Додам ще 1 довгий пункт:
Як бачите, меню ще трохи зменшилося і довгий пункт відобразився цілком нормально. А якби не було властивості vertical-align: bottom, про яке я вам говорив, то меню виглядало б гірше.
Зменшу меню до трьох пунктів.
Пунктам стало набагато вільніше, але саме меню не змінилося в ширині. Ось ми і зробили 100% гумове меню!
Як його адаптувати?
В принципі, якщо ви задали блоку-обертку не фіксовану, а максимальну ширину, то його навіть не потрібно адаптувати. У моєму випадку у мене стоїть властивість max-width: 600px і коли ширина стане менше 600 пікселів, блок просто зменшуватиметься слідом за екраном, не утворюючи горизонтального прокручування.
Ну а якщо ви хочете якось змінити або виправити меню на мобільних пристроях або широких екранах, то медіа запити вам на допомогу! Успіхів у сайтобудуванні!
Доброго дня!
Часто буває потрібно зробити горизонтальне меню, яке розтягуватиметься на всю ширину батьківського блоку незалежно від того, скільки пунктів у ньому міститься.
Сьогодні я хотів би вам показати, як створювати саме таке меню.
Отже, наше меню буде наступним:
Воно розтягнуте на всю ширину, при наведенні виділяється. З боків меню закруглено.
HTML РОЗМІТКА
| ... |
Щоб зробити меню на всю ширину, я використав таблиці зі 100% шириною. У кожній таблиці є divконтейнер пункту меню. Залежно від того перший, останній або проміжний пункт меню div-У присвоюється відповідний клас.
У кожному divконтейнері є 2 бічні бордери з абсолютним позиціонуванням, які потрібні для коректного відображення. Якщо використовувати стандартні бордери, то при перемиканні пунктів меню текст скакатиме на 1-2 пікселі, що не є добре.
Клас activeвідповідає за вибраний пункт меню та виділяє його.
У кожному пункті у нас є картинка та текст. Щоб це вирівнювалося суворо посередині по вертикалі ми використовуємо таблицю. Завдяки властивості вертикального вирівнювання наші пункти меню завжди будуть рівно відображатися та не поїдуть.
CSS ПРАВИЛА
Спочатку задаємо стилі для загального відображення меню:
Menu_container ( padding-top: 40px; width: 100%; height: 47px; border-spacing: 0px; ) .menu_container td ( vertical-align: middle; / * вертикальне вирівнювання * / ) .last_point_men_, width: 100%; height: 47px; border: 1px; position: relative; ( padding: 0px; vertical-align: middle; border: none; text-align: left; width: 150px; padding-left: 4px; ) .td.inner_table_title ( padding-top: 4px; font-weight: bold; ) .td.inner_table_img (width: 40px!important; ) .inner_table_menu ( height: 100%; padding: 0px; vertical-align: middle; border: none; text-align: left; ) .inner_table_title ( pad1 padding-right: 10px; text-transform: uppercase; line-height: 13px;
Для краси округлимо куточки з боків меню:
First_point_menu ( -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 1px solid #dadbda; -bottom-right-radius: 5px; -moz-border-radius-topright: 5px; ;)
Тепер наше меню набуло більш гарного вигляду:
Поки що перший пункт не має лівого бордера. Його ми виправимо трохи згодом.
А зараз давайте додамо для меню ефекти при наведенні.
Middle_point_menu:hover, .last_point_menu:hover, .first_point_menu:hover, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active ( background-col: gradient(top, #CAE285, #9FCB56); -gradient(top, #CAE285, #9FCB56); background-image: -o-linear-gradient(top, #CAE285, #9FCB56); border: 1px solid #9FCB56; border-color: #aec671 #97ac4a; border-left: none; .first_point_menu:hover, .first_point_menu.active ( border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( border: 1px solid #dadbda; border-; ( border: 1px solid #9FCB56; border-left: none; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( border-left: none; )
Тепер наше меню виглядає набагато приємніше, але поки що у нас немає бордерів у виділених пунктів меню. Давайте це виправимо!
/* стилі для бічних бордерів */ .borderLeftSecond, .borderRightSecond ( display: none; position: absolute; width: 1px; height: 47px; background-color: #9fbb62; top: 0px; z-index: 1000; ) абсолютные смещения для бордеров */ .borderLeftSecond ( left: 0px; ) .borderRightSecond ( right: -1px; ) /* у активного и наведенного показываем бордеры */ .active .borderLeftSecond, .active .borderRightSecond, .middle_point_menu:hover > .borderLeftSecond . .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond ( display: block; ) /* обробляємо випадки першого та останнього пункту*/ : none; ) .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .borderLeftSecond ( display: block; )
Ось і все!
У нас вийшло чудове меню, розтягнуте на всю ширину батьківського блоку! Пункти один на одного при наведенні миші не наїжджають і верстка не скаче.
Досить поширена схема розташування меню сайту, коли контейнер із ним займає всю ширину, доступну на сторінці. При цьому перший пункт прилягає до лівого краю, а останній – до правого, а відстань між усіма елементами дорівнює. Сьогодні ми розповімо, як це робиться.
Ми пропонуємо приклад реалізації гумового меню за допомогою CSS для Вашого ресурсу. У цьому меню пункти будуть розміщені в один рядок. Javascript не використовуватиметься. Вміст меню буде поміщений у звичайний список. Головною рисою такого меню є універсальність, яка виявляється у тому, що як число, так і довжина пунктів може бути будь-яка.
Як це реалізувати?
Кожен програміст може запропонувати свій спосіб вирішення поставленого завдання. Все залежить від його фантазії, рівня професіоналізму та здібностей. Найбільш поширене вирішення цієї проблеми – використання таблиці. Також багато хто запропонував би скористатися JavaScript. Тих, хто запропонував би скористатися властивістю display зі значенням tableабо table-cell– поспішаю засмутити. Цей спосіб не має достатньої кросбраузерності.
Наше рішення
Наша пропозиція буде споруджена на міцному фундаменті зі знань HTML5 та CSS3.
Суть процесу виходить з властивості text-align зі значенням justify. Для тих, хто забув - нагадую: ця властивість орієнтує вирівнювання тексту по всій ширині контейнера.
При використанні нашого рішення має дотримуватися двох обов'язкових правил. Перше полягає в тому, що ширина контейнера пункту меню повинна бути меншою, ніж текст. Тобто не в один рядок. Друге важливе правило – слова розтягуються однаково, незалежно від цього, до одного пункту вони належать чи ні.
Нижче представлений код, який є прикладом створення «гумового» меню:
HTML
< ul> < li>< a href= "#" >Головна < li>< a href= "#" >Блог < li>< a href= "#" >Новини < li>< a href= "#" >Популярне < li>< a href= "#" >Новинки
ul (text-align: justify; overflow: hidden; /* усуває побічний вплив методу*/ height: 20px; /* теж усуває зайве */ cursor: default; /* встановлює початкову форму курсора*/ margin: 50px 100px 0 100px; background: #eee; padding: 5px; ) li (display: inline; /* робить пункти меню текстовими */) li a (display: inline-block; /* усуває розрив слів у меню */ color: #444; ) a: hover ( color: #ff0000; ) ul: after ( /* формування другого рядка для відпрацювання методу */ content: "1"; margin-left: 100%; height: 1px; overflow: hidden; display: inline- block; )
Для роботи в старому доброму Internet Explower необхідно додатково внести до CSS наступний код
ul ( z- index: expression(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" > ")); ) ul .last ( margin-left: 100%; ) * html ul ( /* need ie6 only */ height: 30px; )
Прописавши необхідні значення властивостей та код, отримаємо ось таке гумове меню:
Недоліки методу
- Об'ємний код
- Неможливість визначення активного стану елемента через селектор класу. Це відбувається через розрив слів у пунктах (якщо воно одне). Вирішенням цієї проблеми буде додавання ще одного контейнера до елементів списку.
- Для меню, що випадає, потрібно підганяти код через негативний вплив overflow .
У яких браузерах працює?
| 6.0+ | 6.0+ | 10.5+ | 5.0+ | 3.6+ | - | - |
Горизонтальне менює список розділів сайту, тому логічніше розмітити всередині елемента
- , а потім застосувати CSS-стилі до його елементів. Таке розташування меню є найбільш поширеним через очевидні переваги в його позиціонуванні на веб-сторінці.
- Пункт меню
- Пункт меню
- Пункт меню ...
Як зробити горизонтальне меню: розмітка та приклади оформлення
HTML-розмітка та базові стилі для горизонтального меню
За замовчуванням усі елементи списку розміщуються вертикально, займаючи по ширині всю ширину елемента контейнера , який займає всю ширину його блока-контейнера.
HTML розмітка для горизонтальної навігації
Горизонтальне меню, що знаходиться всередині тега, можна додатково поміщати всередину елемента та/або
Існує кілька способів розмістити їх горизонтально. Для початку потрібно скинути стилі браузера за промовчанням для елементів навігації:
Ul ( list-style: none; /*прибираємо маркери списку*/ margin: 0; /*прибираємо верхнє і нижнє поле, що дорівнює 1em*/ padding-left: 0; /*прибираємо лівий відступ, рівний 40px*/ ) a ( text-decoration: none; /*прибираємо підкреслення тексту посилань*/
Спосіб 1. li (display: inline;)
Робимо елементи списку малими. В результаті вони розташовуються по горизонталі, праворуч між ними додається проміжок, що дорівнює 0.4em (обчислюється щодо розміру шрифту). Щоб прибрати його, додаємо li негативне праве поле li (margin-right: -4px;) . Далі стилізуємо посилання за власним бажанням.
Спосіб 2. li (float: left;)
Робимо елементи списку плаваючими. В результаті вони розташовуються по горизонталі. Висота блоку-контейнера ul стає рівною нулю. Щоб вирішити цю проблему, додаємо для ul (overflow: hidden;), розширюючи його і дозволяючи йому таким чином утримувати плаваючі елементи. Для посилань додаємо a (display: block;) та стилізуємо їх за своїм бажанням.
Спосіб 3. li (display: inline-block;)
Робимо елементи списку рядково-блоковими. Вони розташовуються по горизонталі, праворуч утворюється проміжок, як і першому випадку. Для посилань додаємо a (display: block;) та стилізуємо їх за своїм бажанням.
Спосіб 4. ul (display: flex;)
Робимо список ul гнучким контейнером за допомогою моделі. В результаті елементи списку розміщуються горизонтально. Додаємо для посилань a (display: block;) та стилізуємо їх за своїм бажанням.