Горизонтальне менює список розділів сайту, тому логічніше розмітити всередині елемента
- , а потім застосувати CSS-стилі до його елементів. Таке розташування меню є найбільш поширеним через очевидні переваги в його позиціонуванні на веб-сторінці.
- Пункт меню
- Пункт меню
- Пункт меню ...
- блок обгортка для меню
- саме меню, виведене через маркований список (тег ul)
- ну і пункти меню всередині, а в них, відповідно, вже посилання
- vertical-align: bottom — ця властивість потрібна для того, щоб у випадку, якщо текст у пункті меню займе 2 рядки, він відображався рівно. Коли ми зробимо меню, можете видалити цю властивість, збільшити масштаб, щоб пункти стиснулися і текст перенісся на два рядки і побачите проблему з відображенням. Поверніть властивість і все буде гаразд.
- display: table-cell – оскільки ми задали самому меню відображення табличним рядом, логічно буде задати його пунктам відображення як комірки у таблиці. Це обов'язково.
- width: auto — ширина обчислюватиметься автоматично, залежно від довжини тексту в пункті
- text-align: center це просто для вирівнювання тексту всередині по центру
- height: 50px - задаємо висоту в 50 пікселів
- ну і border-right це просто межа праворуч, такий роздільник для пунктів
- властивість text-decoration скасовує підкреслення у посилань, яке ставиться за умовчанням
- width: 1000px - мабуть, найважливіший рядок. Потрібно задати посиланням приблизно таку ширину, можна і менше, але обов'язково більше максимально широкого пункту меню. Посилання не стануть завширшки 1000 пікселів, оскільки ширину обмежить пункт меню li, у якого ширина задана як auto, зате це дозволить зробити так, щоб за будь-якої кількості пунктів у меню воно завжди було на 100 відсотків ширини.
- vertical-align: middle і display: table-cell – перше вирівняє текст по вертикалі по центру, а друге також робить відображення посилань у вигляді осередків. Обидві властивості потрібні.
- font — це просто набір установок для шрифту. Читайте про css властивості для шрифтів у цій статті.
- меню тягнеться динамічно;
- відступи від роздільника до пункту скрізь однакові;
- більш красиве та гнучке оформлення.
- з випадашкою при наведенні убік
- зі спливаючою випадкою третього рівня
- Об'ємний код
- Неможливість визначення активного стану елемента через селектор класу. Це відбувається через розрив слів у пунктах (якщо воно одне). Вирішенням цієї проблеми буде додавання ще одного контейнера до елементів списку.
- Для меню, що випадає, потрібно підганяти код через негативний вплив overflow .
Як зробити горизонтальне меню: розмітка та приклади оформлення
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. Адаптивне меню з ефектом підкреслення при наведенні на посилання
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main ( list-style: none; margin: 40px 0 5px; padding: 25px 0 5px; text-align: center; background: white; ) .menu-main li (display: inline-block;) .menu- main li:after (content: "|"; color: #606060; display: inline-block; vertical-align:top; ) .menu-main li:last-child:after (content: none;) .menu-main a (text-decoration: none; font-family: "Ubuntu Condensed", sans-serif; letter-spacing: 2px; position: relative; padding-bottom: 20px; margin: 0 34px 0 30px; font-size: 17px; text-transform: uppercase; display: inline-block; transition: color .2s; ) .menu-main a, .menu-main a:visited (color: #9d999d;) main a:hover(color: #feb386;) .menu-main a:before, .menu-main a:after ( content: ""; position: absolute; height: 4px; top: auto; : -5px; left: 50%; background: #feb386; transition: .8s; ) .menu-main a:hover:before; hover:after, .menu-main .current:after (right: 0; ) @media (max-width: 550px) ( .menu-main (padding-top: 0;) .menu-main li (display: block;) .menu-main li:after (content: none;) .menu- main a ( padding: 25px 0 20px; margin: 0 30px; )2. Адаптивне меню для весільного сайту
@import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu ( position: relative; background: #fff; box-shadow: inset 0 0 10px #ccc; ) .top-menu:before, .top-menu:after ( content: ""; display: block; height : 1px; border-top: 3px solid #575350; border-bottom: 1px solid #575350; margin-bottom: 2px; ) #575350;box-shadow: 0 2px 7px #ccc; margin-top: 2px; ) .menu-main ( list-style: none; padding: 0 30px; center; position: relative; ) .menu-main:before; ) ; . . ( text-decoration: none; display: inline-block; margin: 2px 5px; padding: 6px 15px; font-family: "PT Sans", sans-serif; font-size: 16px; color: #777777; border-bottom : 1px solid transparent; n: .3s linear; ) .menu-main .current, .menu-main a:hover ( border-radius: 3px; background: #f3ece1; color: #313131; text-shadow: 0 1px 0 #fff; @media (max-width: 500px) ( .menu-main li (display: block;) )3. Адаптивне меню із фестонами
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main ( list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; background: white; ) .menu-main:after ( content: ""; position: absolute; width: 100%; height: 20px; left: 0; bottom: -20px; 255,255,255,0) 100%) 0 -10px; background-size: 20px 20px; background-repeat: repeat-x; ) . none; display: inline-block; margin: 0 15px; padding: 10px 30px; font-family: "PT Sans Caption", sans-serif; -main a:before, .menu-main a:after ( content: ""; position: absolute; top: calc(50% - 3px); width: 6px; height: 6px; #F58262;opacity: 0;transition: .5s ease-in-out; ) . current:before, .menu-main a.cur rent: after, . ) @media(max-width:680px) ( .menu-main li (display: block;) )4. Адаптивне меню на стрічці
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu ( margin: 0 60px; position: relative; background: #5A394E; box-shadow: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,2) 0 150px -150px rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255,255,255,.12); ) .top-menu:before, .e z-index: 2; left: 0; width: 100%; height: 3px; ) .top-menu:before ( top: 0; menu:after ( bottom: 0; border-top: 1px dashed rgba(255,255,255,.2); ) .menu-main ( list-style: none; padding: 0; margin: 0; text-align: center; ) . menu-main:before, .menu-main:after ( content: ""; position: absolute; width: 50px; height: 0; top: 8px; 5A394E; transform: rotate(360deg); z-index: -1; ) .menu-main:before ( left: -30px; main:after ( right: -30px; border-right: 12px solid rgba(2 55, 255, 255, 0); ) .menu-main li ( display: inline-block; margin-right: -4px; ) .menu-main a ( text-decoration: none; display: inline-block; Sans Caption", sans-serif; color: white; transition: .3s linear; ) .menu-main a.current, .menu-main a:hover @media (max-width: 680px) ( .top-menu (margin: 0;) .menu-main li ( display: block; margin-right: 0; ) .menu-main:before, .menu-main:after (content: none;) .menu-main a (display: block;) )5. Адаптивне меню з логотипом посередині
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( position: relative; background: rgba(34,34,34,.2); ) .menu-main ( list-style: none; margin: 0; padding: 0; ) .menu-main:after ( content: ""; display: table; clear: both; ) .left-item (float: left;) .right-item (float: right;) .navbar-logo ( position: absolute; left: 50%; top : 50%; transform: translate(-50%,-50%); ) .menu-main a ( text-decoration: none; displej: блок; ; letter-spacing: 2px; font-family: "Arimo", sans-serif; font-weight: білий; 0,0,.3);) @media (max-width: 830px) (.menu-main (padding-top: 90px; text-align: center;)). ; top: 10px; transform: translateX(-50%); ) .menu-main li (float: none; display: inline-block; ) -size: 16px; ) ) @media (max-width: 630px) ( .menu-main li (display: block;) )6. Адаптивне меню з логотипом зліва
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( background: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); padding: 20px; ) .top-menu:after ( content: "" .display: table; clear: both; ) .navbar-logo (display: inline-block;) . li (display: inline-block;) .menu-main a ( text-decoration: none; display: блок; : 2px; font-family: "Arimo", sans-serif; font-weight: bold; color: #F73E24; transition:.3s linear; ) . height: 9px;background:#F73E24;position: absolute;left:50%;transform: rotate(45deg) translateX(6.5px);opacity:0;transition:.3s linear; (opacity: 1;) @media (max-width: 660px) ( .menu-main ( float: none; padding-top: 20px; ) .top-menu ( text-align: center; padding: 20px 0 0 0; ) .menu-main a (padding: 0 10px;) .menu-main a:be fore (transform: rotate(45deg) translateX(-6px);) ) @media (max-width: 600px) ( .menu-main li (display: block;) )Вітання. Дуже давно не писав постів на тему html/css. Нещодавно почав верстати новий макет і в процесі натрапив на цікавий прийом, який дозволяє зробити меню гумовим (до нього можна буде додавати нові пункти і розмір не збільшитися, а завжди буде 100% батьківського блоку). Отже сьогодні реалізуємо на css гумове меню.
Кому ліньки читати статтю, можна подивитися це відео. Автор також все дуже класно пояснює:
Гумове меню на CSS - крок 1
Перший крок – це завжди html розміткакуди ж без неї. Але в нашому випадку все буде просто:
Все зрозуміло, ось такий у мене код розмітки:
Виглядає все це стандартно, ось так:
Тепер приводитимемо все в потрібний вигляд, за роботу береться 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;
}
Поки меню виглядає непоказно, але нічого, настав час довести його до пуття. 
Останнє, що потрібно зробити, — задати стилі посиланням усередині пунктів. Тут у мене такий код:
R-menu li a (
text-decoration: none;
width: 1000px;
height: 50px;
vertical-align: middle;
display: table-cell;
color: #fff;
font: normal 14px Verdana;
}
І ось так тепер виглядає меню:
Знову ж таки, поясню деякі рядки:
Крок 4 (за бажанням) можна додати інтерактивності
Наприклад, щоб змінити колір пункту меню при наведенні. Реалізується це дуже просто, за допомогою псевдокласу.
R-menu li: hover (
background-color: #6bba70;
}
Тестуємо меню на гумовість
Відмінно, меню готові, але ми не перевірили найголовніше — наскільки воно є гумовим, як я вам і обіцяв. Що ж, додам у меню ще 2 пункти:
Меню залишилося завширшки на 600 пікселів. Інші пункти просто трохи стиснулися, щоб помістилися 2 нових.
Додам ще 1 довгий пункт:
Як бачите, меню ще трохи зменшилося і довгий пункт відобразився цілком нормально. А якби не було властивості vertical-align: bottom, про яке я вам говорив, то меню виглядало б гірше.
Зменшу меню до трьох пунктів.
Пунктам стало набагато вільніше, але саме меню не змінилося в ширині. Ось ми і зробили 100% гумове меню!
Як його адаптувати?
В принципі, якщо ви задали блоку-обертку не фіксовану, а максимальну ширину, то його навіть не потрібно адаптувати. У моєму випадку у мене стоїть властивість max-width: 600px і коли ширина стане менше 600 пікселів, блок просто зменшуватиметься слідом за екраном, не утворюючи горизонтального прокручування.
Ну а якщо ви хочете якось змінити або виправити меню на мобільних пристрояхабо широких екранах, то медіа запити вам на допомогу! Успіхів у сайтобудуванні!
Продовжуємо серію уроком присвячених меню, що випадає. На черзі горизонтальне меню, що випадає, на css своїми руками.
Якщо ви потрапили сюди випадково або ви шукали іншу реалізацію меню, що випадає, раджу перейти в батьківський розділ.
У цьому розділі буде описано горизонтальне меню, що випадає на CSS і HTML.
Навігація по сторінці:
І так, Наша задача:
зробити горизонтальне менюзі списком css (на списках ul li) без використання jQueryта Javascript, а також без застосування таблиць
у коді.
Горизонтальне меню, що випадає
Насамперед, перед тим як приступати писати код, нам потрібно зробити html шаблондля меню.
У зв'язку з тим, що ми робимо універсальне меню, я хочу зробити його максимально схожим під виведення меню WordPress. На мій погляд, це один із найпростіших і універсальних Html кодів меню. Виглядає він так:
Як видно з коду, наше меню, що випадає, буде реалізовано на списках ul і li. Ось так виглядає це меню без стилів CSS:
Скажімо, прямо виглядає потворно, як звичайний список. Далі нам потрібно прикрасити це меню за допомогою стилів CSS.
Горизонтальне меню, що випадає на CSS
Стилі CSS для меню, що випадає, і не тільки – річ необхідна як повітря. Адже вкладка, що випадає, робиться на основі псевдокласу: hover.
Для горизонтального меню, що випадає, нам знадобляться ось такі стилі:
#menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100 %;height:auto;list-style:none;background:#F3A601; menu1 ul li( position:relative; display:block; float:left; width:auto; height:auto; ) #menu1 ul li a( display:block; padding:9px 25px 0px 25px; font-size:14px; font- family:Arial, sans-serif;color:#ffffef;line-height:1.3em;text-decoration:none;font-weight:bold;text-transform:uppercase;height:36px;box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; )
Це ще не кінець, а лише частина CSS для головного горизонтального меню. Далі ми напишемо стилі для списку меню:
#menu1 ul li ul ( position:absolute; top:36px; left:0px; display:none; width:200px; background:#EBBD5B; ) #menu1 ul li:hover ul(display:block;) механізм випадання*/ #menu1 ul li ul li( float:none; width:100%; ) #menu1 ul li ul li(display:block; text-transform:none; height:auto; 100% box-sizing:border-box;border-top:1px solid #ffffff; ) #menu1 background:#FDDC96; color:#6572BC;
Ось тепер усі. Сам механізм випадки реалізований одним рядком.
Дивіться скін із цим меню:
Рис. 2 (горизонтальне меню, що випадає)
Нижче доступний демо-перегляд роботи випадаючого меню, а також посилання на завантаження вихідників. (Демо буде відкрито випадком поверх цієї сторінки, не потрібно натискати відкрити в новому вікні 🙂 або коліщатко мишки)
Горизонтальне меню, що випадає на всю ширину
Більшість з вас можуть мене дорікнути, мовляв, такі менюшки, як я показав вище, це привіт з минулого і від частини ви маєте рацію, хоча я зустрічав свіжі верстки з такими менюшками.
Сподіваюся, ви завантажили приклад вище. Html у нас залишається незмінним, а ось CSS ми поміняємо повністю. Ви можете просто взяти від сюди код CSS і вставити в завантажений приклад, або подивитися в режимі демо як він працює.
#conteiner( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; :relative; display:inline-block;width:auto;height:auto;vertical-align:top;text-align:left; ) #menu1 ul li a( display:block; :14px;font-family:Arial, sans-serif;color:#ffffef;line-height:1.3em;text-decoration:none;font-weight:bold;text-transform:uppercase; :border-box; ) #menu1 ul li > a:hover; :0px; display: none; width:auto; background:#EBBD5B; white-space:nowrap; ) #menu1 ul li:last-child ul(/*останній пункт буде прикріплений по правому краю*/ left:auto; right:0px; ) випадання*/ #menu1 ul li ul li(display:block; width:auto; ) #menu1 ul li ul li(display:block; text-transform:none; height:auto; box-sizing:border-box;border-top:1px solid #ffffff;) #menu1 #FDDC96; color:#6572BC;
Також цей приклад відрізняється від першого тим, що меню, що випадає, сама випадка, тягнеться в залежності від ширини всіх пунктів меню.
Для дуже довгих пунктів меню такий варіант може бути не дуже зручним, тому що вони будуть вилазити за межі. Щоб вимкнути цю властивість, достатньо знайти властивість "white-space:nowrap;" у селектора #menu1 ul li ul і видалити його.
Нижче ви можете переглянути демо або завантажити вихідні випадки горизонтального меню:
Без роздільників це меню виглядає так собі. Розділювачі можна додати в хтмл руками, але якщо у вас CMS, наприклад WordPress, то руками там додавати не дуже зручно.
Горизонтальне меню з роздільниками
Існує кілька десятків варіантів, як на чистому CSSдодати смужку (розділювач) між пунктами меню. Варіанти, які використовують::before або::after , або набагато простіше border-left, border-right я дублювати не буду.
Бувають ситуації, коли верстка побудована так чудово, що без jquery не обійтися.
Html код у нас залишається колишнім, ми тільки підключаємо на самому початку бібліотеку jQuery та файл, який її використовує:
Одразу після.
Як ви зрозуміли, потрібно створити файл script-menu-3.jsі туди закинути такий маленький код:
$(document).ready(function()( $("#menu1 > ul > li:not(:last-child)").after(" "); ));
Стилі CSS для такого меню потрібно залишити ті, що є, + закинути ось цей шматок в кінець:
#menu1 ul li.razd( height:28px; width:1px; background:#ffffff; margin-top:4px; )
Виглядати таке горизонтальне меню з роздільниками на jQuery буде ось так:
Можна переглянути в режимі демо або завантажити шаблон горизонтального меню нижче:
Перевагами такого рішення є:
Горизонтальне багаторівневе меню CSS+HTML
Раз йшлося про багаторівневі випадають меню при наведенні, напевно варто поділити їх на підгрупи:
У своїх прикладах я показуватиму багаторівневе меню CSS на 3 рівня, далі думаю буде не складно здогадатися, що потрібно робити.
Багаторівневе меню з випадашкою в бік при наведенні
Для початку нам потрібно трохи підкоригувати наш хтмл. Там додасться пара рядків для 3 рівня:
#conteiner( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; :relative; display:inline-block;width:auto;height:auto;vertical-align:top;text-align:left;) #menu1 ul li.razd( height:28px; width:1px; background:#ffffff; margin-top:4px; ) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; em;text-decoration:none;font-weight:bold;text-transform:uppercase;height:36px;box-sizing:border-box;) #menu1 ul li ( background: #EBBD5B; color:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; ) #menu1 > ul > li:last-child > ul(/*останній пункт буде прикріплений по правому краю*/ left:auto; right:0px; ) #menu1 ul li:hover > ul(display:block;)/*ця строчка реалізує механізм випадання*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box-sizing:border-box Border-top: 1px solid #ffffff; ) a( background:#FDDC96; color:#6572BC; ) #menu1 ul li ul li ul( top:0px; > ul ul(left:auto; right:100%;) #menu1
Файли для jQuery копіюємо як були з попереднього прикладу. Вирішив залишити роздільники, щоб меню хоч трохи краще виглядало. Можна, звісно, і без них.
Ось так вийшло:
Я зробив 2 скіни в одному, щоб показати як випадок виглядає праворуч і посередині.
Нижче ви можете подивитися демо і скачати приклад:
Багаторівневе меню, що випадає зі спливаючою випадашкою при наведенні
Трохи масло масляне вийшло в заголовку, але прокотить головне код.
Суть цього прикладу зробити горизонтальне меню, що випадає на всю ширину з випадкою на всю ширину + багаторівневість.
Хтмл код я міняти не буду, його можна взяти з попереднього прикладу. Розділювачі на jQuery також залишаємо.
Змінюватиметься тільки CSS повністю:
#conteiner( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; :relative; display:inline-block;width:auto;height:auto;vertical-align:top;text-align:left; ) #menu1 > ul > li(position:static;) :28px;width:1px;background:#ffffff;margin-top:4px;) #menu1 ul li a(display:block;padding:9px 45px serif; color:#ffffef;line-height:1.3em;text-decoration:none;font-weight:bold;text-transform:uppercase;height:36px; a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:100%; background:#EBBD5B; ) #menu1 > ul > li > ul::after( clear:both; float: none; width:100%; height:0px; content:" "; ) #menu1 :block; width:30%; float:left; ) #menu1 ul li ul li a( display:block; -box ; color:#6572BC; ; block;float:none;width:100%;) #menu1
Ось так меню буде виглядати: Єдиний момент - сайт має бути достатньо місця, так як крайнього пункту справа немає місця для випадки. Цю проблему можна вирішити через: nth-child, але я не став городити город.
Дивіться демо горизонтального багаторівневого меню:
Як ви могли помітити: нижній плашок також на всю ширину. Ось так робляться випадки у кілька блоків.
На цьому у мене все, сподіваюся, хоч один мій приклад вам підійшов. Спасибі за увагу.
це принесе користь і їм, і мені 🙂.Якщо ви прочитали пост повністю, але не знайшли як зробити своє горизонтальне меню, що випадає на css, задайте питання в коментарях або скористайтесь пошуком по сайту.
Також, раджу відвідати батьківську сторінку https://сайт/vypadayushhee-menu/, там зібрані всі приклади та різновиди випадаючих меню.
Досить поширена схема розташування меню сайту, коли контейнер із ним займає всю ширину, доступну на сторінці. При цьому перший пункт прилягає до лівого краю, а останній – до правого, а відстань між усіма елементами дорівнює. Сьогодні ми розповімо, як це робиться.
Ми пропонуємо вам приклад реалізації гумового менюпри допомоги 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; )
Прописавши необхідні значення властивостей та код, отримаємо ось таке гумове меню:
Недоліки методу
У яких браузерах працює?
Планшети
6.0+ 6.0+ 10.5+ 5.0+ 3.6+ - -
