Горизонтальне меню, що випадає на css і Html своїми руками. Гарне горизонтальне меню на всю ширину Css3 меню в рядок на всю ширину

Вітання. Дуже давно не писав постів на тему 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_menu, u width: 100%; height: 47px; border: 1px solid #dadbda; z-index: 1000; position: relative; border-left: none; ). ( 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; ) .inner_table_menu td.inner_table_img (width: 30px!important; height: 30px!important; padding-left: 15px; )

Для краси округлимо куточки з боків меню:

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: 5px; border-right: 1px solid #dadbda; -bottom-right-radius: 5px;-moz-border-radius-topright: 5px;-moz-border-radius-bottomright: 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); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#CAE285), to(#9FCB56)); background-image: -webkit-linear -gradient(top, #CAE285, #9FCB56);background-image: -o-linear-gradient(top, #CAE285, #9FCB56);background-image: linear-gradient(to bottom, #CAE285, #9FCB56); border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; border-left: none; z-index: 5000; .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: 1px solid #9FCB56; border-l eft: 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 > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond ( display: block; ) /* обробляємо випадки першого та останнього пункту* ) .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .borderLeftSecond ( display: block; )

От і все!

У нас вийшло чудове меню, розтягнуте на всю ширину батьківського блоку! Пункти один на одного при наведенні миші не наїжджають і верстка не скаче.

Горизонтальне менює список розділів сайту, тому логічніше розмітити всередині елемента

Як зробити горизонтальне меню: розмітка та приклади оформлення

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;) та стилізуємо їх за своїм бажанням.

1. Адаптивне меню з ефектом підкреслення при наведенні на посилання

2. Адаптивне меню для весільного сайту

3. Адаптивне меню із фестонами

4. Адаптивне меню на стрічці

5. Адаптивне меню з логотипом посередині

6. Адаптивне меню з логотипом зліва

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

Ми пропонуємо вам приклад реалізації гумового менюпри допомоги 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+	-	-

Браузери