Как да направите гумено адаптивно меню с помощта на CSS? Направи си сам хоризонтално падащо меню с помощта на CSS и Html. Разширете менюто до пълната ширина.

Признаци на бременност след имплантиране на ембрион

Добър ден

Често е необходимо да се направи хоризонтално меню, което да се простира по цялата ширина на родителския блок, независимо от това колко елемента съдържа.

Днес бих искал да ви покажа как да създадете точно такова меню.

Така че менюто ни ще бъде следното:

Той е опънат на цялата ширина и се откроява, когато се задържи над него. Менюто е заоблено отстрани.

HTML МАРКИРАНЕ

...
У дома
Интересни новини
Друг елемент от менюто!

За да направя менюто с пълна ширина, използвах таблици със 100% ширина. Всяка таблица има контейнер div елемент от менюто. В зависимост от това дали първият, последният или междинният елемент от менюто е div, се присвоява съответният клас.

Всеки div контейнер има 2 странични граници с абсолютно позициониране, които са необходими за правилното показване. Ако използвате стандартни граници, тогава, когато превключвате елементи от менюто, текстът ще скочи с 1-2 пиксела, което е добре.

Активният клас отговаря за избрания елемент от менюто и го маркира.

Във всеки артикул имаме картинка и текст. За да гарантираме, че всичко това е подравнено строго в средата вертикално, използваме таблица. Благодарение на свойството за вертикално подравняване, нашите елементи от менюто винаги ще се показват гладко и няма да се отдалечават.

CSS ПРАВИЛА

Първо, нека зададем стилове за общото показване на менюто:

Menu_container ( padding-top: 40px; width: 100%; height: 47px; border-spacing: 0px; ) .menu_container td ( vertical-align: middle; /* вертикално подравняване */ ) .last_point_menu, .first_point_menu, .middle_point_menu ( ширина: 100%; височина: 47px; граница: 1px плътен #dadbda; z-индекс: 1000; позиция: относителна; border-left: няма;) .inner_table (ширина: 100%; височина: 100%;) .inner_table td (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 (ширина: 40px!важно;) .inner_table_menu (височина: 100%; подложка: 0px; вертикално подравняване: по средата; граница: няма; подравняване на текст: вляво;) .inner_table_title ( подложка вляво: 10px; 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; ) .last_point_menu ( -webkit-border-top-right-radius: 5px; -webkit-border -bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 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 ( цвят на фона: #CAE285; фоново изображение: -moz-linear- градиент (отгоре, #CAE285, #9FCB56); фоново изображение: -webkit-градиент (линеен, 0 0, 0 100%, от (#CAE285), до (#9FCB56)); фоново изображение: -webkit-линеен -градиент (отгоре, #CAE285, #9FCB56); фоново изображение: -o-линеен градиент (отгоре, #CAE285, #9FCB56); фоново изображение: линеен градиент (до долу, #CAE285, #9FCB56); border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; border-left: none; z-index: 5000; ) /* ще изработи граници при задържане */ .first_point_menu ( border: 1px solid #dadbda ; ) .first_point_menu:hover, .first_point_menu.active ( граница: 1px плътен #9FCB56; цвят на границата: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( граница: 1px плътен #dadbda; border-left: няма; ) .last_point_menu :hover ( граница: 1px solid #9FCB56; border-left: няма; цвят на границата: #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; ). , .middle_point_menu: hover > .borderRightSecond, .last_point_menu: hover > .borderLeftSecond .first_point_menu: hover > .borderRightSecond ( display: block; ) /* обработва случаите на първият и последният елемент */ .first_point_menu.active .borderLeftSecond ( display: none; ) .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .borderLeftSecond ( display: block; )

Това е всичко!

Направихме го страхотно менюопъната по цялата ширина на родителския блок! Елементите не се припокриват един с друг, когато задържите курсора на мишката и оформлението не скача.

Хоризонталното меню е списък със секции на уебсайта, така че е по-логично да го поставите вътре в елемента

    и след това приложете CSS стилове към неговите елементи. Това оформление на менюто е най-често срещаното поради очевидните предимства при позиционирането му на уеб страница.

    Как да направите хоризонтално меню: примери за оформление и дизайн HTML маркиране и основни стилове за хоризонтално меню

    По подразбиране всички елементи на списъка са подредени вертикално, заемайки цялата ширина на контейнерния елемент, който от своя страна заема цялата ширина на своя контейнерен блок.

    HTML маркиране за хоризонтална навигация

    Хоризонтално меню, разположено в таг, може допълнително да бъде поставено в елемента ... и/или .... Благодарение на това HTML маркиране се дава и се появява семантично значение допълнителна възможностза форматиране на блока на менюто.

    Има няколко начина да ги поставите хоризонтално. Първо, трябва да нулирате стиловете на браузъра по подразбиране за навигационни елементи:

    Ul ( list-style: none; /*премахване на маркери за списък*/ margin: 0; /*премахване на горното и долното поле равно на 1em*/ padding-left: 0; /*премахване на лявото поле равно на 40px*/ ) a (текстова декорация: няма; /*премахване на подчертаването на текста на връзката*/)

    Метод 1. li (дисплей: вграден;)

    Изписване на елементите на списък с малки букви. В резултат на това те са разположени хоризонтално, като от дясната страна между тях е добавено разстояние от 0,4 em (изчислено спрямо размера на шрифта). За да го премахнете, добавете отрицателно дясно поле за li li (margin-right: -4px;) . След това стилизираме връзките, както желаем.

    Метод 2. li (float: left;)

    Направете елементите на списъка плаващи. В резултат на това те са разположени хоризонтално. Височината на контейнерния блок ul става нула. За да разрешим този проблем, добавяме (overflow: hidden;) към ul, разширявайки го и по този начин му позволявайки да съдържа плаващи елементи. За връзки добавете (display: block;) и ги стилизирайте, както желаете.

    Метод 3. li (дисплей: inline-block;)

    Създаване на елементи от списъка inline-block. Те са разположени хоризонтално, от дясната страна се образува празнина, както в първия случай. За връзки добавете (display: block;) и ги стилизирайте, както желаете.

    Метод 4. ul (дисплей: flex;)

    Превръщане на ul списъка в гъвкав контейнер с помощта на . В резултат на това елементите на списъка се подреждат хоризонтално. Добавяме (display: block;) за връзките и ги стилизираме по желание.

    1. Адаптивно меню с ефект на подчертаване при задържане на курсора на мишката над линк
    • работа
    • относно
    • Блог
    • Контакт
    @import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main (списък стил: няма; margin: 40px 0 5px; padding: 25px 0 5px; text-align: center; background: white; ) .menu-main li (display: inline-block;).menu- main li:after (съдържание: "|"; цвят: #606060; дисплей: 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; преобразуване на текст: главни букви; дисплей: вграден блок; преход: цвят .2s; ) .menu-main a, .menu-main a: visited (цвят: #9d999d;) .menu-main a.current, .menu- main a:hover(color: #feb386;) .menu-main a:before, .menu-main a:after ( съдържание: ""; позиция: абсолютна; височина: 4px; горе: автоматично; дясно: 50%; долу : -5px; ляво: 50%; фон: #feb386; преход: .8s; ) .menu-main a:hover:before, .menu-main .current:before (left: 0;) .menu-main a: hover:after, .menu-main .current:after (дясно: 0;) @media (max-width: 550px) ( .menu-main (padding-top: 0;).menu-main li (дисплей: блок; ) .menu-main li:after (съдържание: няма;) .menu-main a ( padding: 25px 0 20px; поле: 0 30px; ) ) 2. Адаптивно меню за сватбен сайт
    • работа
    • относно
    • Блог
    • Контакт
    @import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu ( позиция: относителна; фон: #fff; box-shadow: inset 0 0 10px #ccc; ) .top-menu:before, .top-menu:after ( съдържание: ""; дисплей: блок; височина : 1px; border-top: 3px solid #575350; border-bottom: 1px solid #575350; margin-bottom: 2px; ) .top-menu:after ( border-bottom: 3px solid #575350; border-top: 1px solid #575350; box-shadow: 0 2px 7px #ccc; margin-top: 2px; ) .menu-main ( list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: център; позиция: относителна; ) .menu-main:before, .menu-main:after ( съдържание: "\25C8"; line-height: 1; position: absolute; top: 50%; transform: translateY(-50% ); ) .menu-main:before (left: 15px;) .menu-main:after (right: 15px;) .menu-main li ( display: inline-block; padding: 5px 0; ) .menu-main a (текстова декорация: няма; дисплей: вграден блок; поле: 2px 5px; подложка: 6px 15px; семейство шрифтове: "PT Sans", sans-serif; размер на шрифта: 16px; цвят: #777777; border-bottom : 1px плътен прозрачен преход: .3s линеен; ) .menu-main .current, .menu-main a:hover ( border-radius: 3px; фон: #f3ece1; цвят: #313131; text-shadow: 0 1px 0 #fff; border-color: #c6c6c6; ) @media (max-width: 500px) ( .menu-main li (display: block;) ) 3. Адаптивно назъбено меню
    • работа
    • относно
    • Блог
    • Контакт
    @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main (списък стил: няма; подложка: 0 30px; поле: 0; размер на шрифта: 18px; подравняване на текст: център; позиция: относителна; фон: бял; ) .menu-main:after ( съдържание: ""; позиция: абсолютна; ширина: 100%; височина: 20px; ляво: 0; дъно: -20px; фон: радиален градиент (бяло 0%, бяло 70%, rgba(255,255,255,0) 70%, rgba( 255,255,255,0) 100%) 0 -10px; background-size: 20px 20px; background-repeat: repeat-x; ) .menu-main li (дисплей: inline-block;) .menu-main a ( text-decoration: няма; дисплей: inline-block; марж: 0 15px; padding: 10px 30px; font-family: "PT Sans Caption", sans-serif; цвят: #777777; преход: .3s линеен; позиция: относителна; ) .menu -main a:before, .menu-main a:after ( съдържание: ""; позиция: абсолютна; горна: calc(50% - 3px); ширина: 6px; височина: 6px; border-radius: 50%; фон: #F58262; непрозрачност: 0; преход: .5s ease-in-out; ) .menu-main a:before (вляво: 5px;) .menu-main a:after (вдясно: 5px;) .menu-main a. current:before, .menu-main a.current:after, .menu-main a:hover:before, .menu-main a:hover:after (непрозрачност: 1;) .menu-main a.current, .menu- main a:hover (color: #F58262;) @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; позиция: относителна; фон: #5A394E; box-shadow: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1), inset 150px 0 150px -150px rgba(255,255,255,.12), вмъкване -150px 0 150px -150px rgba(255,255,255,.12); ) .top-menu:before, .top-menu:after ( съдържание: ""; позиция: абсолютна ; z-индекс: 2; ляво: 0; ширина: 100%; височина: 3px; ) .top-menu:before ( отгоре: 0; border-bottom: 1px пунктирана rgba(255,255,255,.2); ) .top- menu:after ( bottom: 0; border-top: 1px пунктиран rgba(255,255,255,.2); ) .menu-main ( list-style: none; padding: 0; margin: 0; text-align: center; ) . menu-main:before, .menu-main:after ( съдържание: ""; позиция: абсолютна; ширина: 50px; височина: 0; горе: 8px; border-top: 18px solid #5A394E; border-bottom: 18px solid # 5A394E; трансформиране: завъртане (360 градуса); z-индекс: -1; ) .menu-main:before ( ляво: -30px; border-left: 12px solid rgba(255, 255, 255, 0); ) .menu- main:after (дясно: -30px; border-right: 12px solid rgba(255, 255, 255, 0); ) .menu-main li ( display: inline-block; margin-right: -4px; ) .menu-main a (text-decoration: none; display: inline-block; padding: 15px 30px; font-family: "PT Sans Caption", sans-serif; цвят: бял; преход: .3s линеен; ) .menu-main a.current, .menu-main a:hover (фон: rgba(0,0,0,.2);) @media (max-width: 680px) ( .top-menu (margin: 0;) .menu-main li ( display: block; margin-right: 0; ) .menu-main:before, .menu-main:after (съдържание: няма;) .menu-main a (дисплей: блок;) ) 5. Адаптивно меню с лого в средата
    • работа
    • относно
    • История
    • Контакт
    • Магазин
    • Галерия
    @import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu (позиция: относителна; фон: rgba(34,34,34,.2); ) .menu-main (списък стил: няма; поле: 0; подложка: 0;) .menu-main:after (съдържание: ""; дисплей: таблица; изчистване: и двете;) .left-item (float: ляво;) .right-item (float: дясно;).navbar-logo ( позиция: абсолютна; ляво: 50%; горе : 50%; трансформация: превод (-50%,-50%); ) .menu-main a ( text-decoration: none; display: block; line-height: 80px; padding: 0 20px; font-size: 18px ; разстояние между буквите: 2px; семейство шрифтове: "Arimo", sans-serif; тегло на шрифта: получер; цвят: бял; преход: .3s линеен; ) .menu-main a:hover (фон: rgba(0, 0,0,.3);) @media (max-width: 830px) ( .menu-main ( padding-top: 90px; text-align: center; ) .navbar-logo (позиция: абсолютна; ляво: 50% ; top: 10px; transform: translateX(-50%); ) .menu-main li ( float: none; display: inline-block; ) .menu-main a ( line-height: normal; padding: 20px 15px; шрифт -size: 16px; ) ) @media (max-width: 630px) ( .menu-main li (display: block;) ) 6. Адаптивно меню с лого отляво @import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( фон: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); padding: 20px; ) .top-menu:after ( съдържание: "" ; дисплей: таблица; изчистване: и двете; ) .navbar-logo (дисплей: inline-block;) .menu-main (списък стил: няма; поле: 0; подложка: 0; плаващ: надясно; ) .menu-main li (дисплей: inline-block;).menu-main a ( text-decoration: none; display: block; position: relative; line-height: 61px; padding-left: 20px; font-size: 18px; letter-spacing : 2px; семейство шрифтове: "Arimo", sans-serif; тегло на шрифта: получер; цвят: #F73E24; преход: .3s линеен; ) .menu-main a:before ( съдържание: ""; ширина: 9px; височина: 9px; фон: #F73E24; позиция: абсолютна; ляво: 50%; трансформация: rotate(45deg) translateX(6.5px); opacity: 0; преход: .3s linear; ) .menu-main a:hover:before (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:before (transform: rotate(45deg) translateX(-6px);) ) @media (max-width: 600px) ( .menu-main li (показване: блок;) )

    Доста често срещано оформление на менюто на сайта, когато контейнерът с него заема цялата налична ширина на страницата. В този случай първият елемент е в съседство с левия ръб, а последният е в съседство с десния и разстоянието между всички елементи е еднакво. Днес ще ви кажем как се прави това.

    Предлагаме ви пример за внедряване на гумено меню с помощта на CSS за вашия ресурс. В това меню елементите ще бъдат разположени на един ред. Javascript няма да се използва. Съдържанието на менюто ще бъде оградено в редовен списък. Основната характеристика на такова меню е неговата гъвкавост, която се изразява във факта, че както броят, така и дължината на елементите могат да бъдат всякакви.

    Как да приложим това?

    Всеки програмист може да предложи свой собствен начин за решаване на даден проблем. Всичко зависи от неговото въображение, ниво на професионализъм и способности. Най-често срещаното решение на този проблем е използването на таблица. Освен това мнозина биха предложили използването на javascript. Бързам да разочаровам тези, които биха предложили да използвате свойството display с таблицата със стойности или клетката на таблицата. Този метод не е достатъчно съвместим с различни браузъри.

    Нашето решение

    Нашето предложение ще бъде изградено върху солидна основа от знания за HTML5 и CSS3.

    Същността на процеса се основава на свойството за подравняване на текста със стойността за оправдаване. За тези, които са забравили, напомням ви: това свойство ориентира подравняването на текста по цялата ширина на контейнера.

    При използване на нашето решение трябва да се спазват две задължителни правила. Първият е, че ширината на контейнера на елемент от менюто трябва да бъде по-малка от текста. Тоест не в един ред. Второто важно правило е, че думите се разтягат еднакво, независимо дали принадлежат към една и съща точка или не.

    По-долу е даден код, който служи като пример за създаване на гумено меню:

    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; /* също елиминира ненужните */ курсор: по подразбиране ; /* задава първоначалната форма на курсора */ margin : 50px 100px 0 100px; фон: #eee; padding: 5px; ) li ( display: inline; /* прави елементите от менюто текст */ ) li a ( display: inline- block; /* елиминира прекъсванията на думи в менюто */ цвят: #444; ) a : задържане ( цвят: #ff0000; ) ul: след ( /* формиране на втория ред за разработване на метода */ съдържание: "1" ; поле отляво: 100 %; височина: 1px; препълване: скрито; показване: вграден блок; )

    За да работите в добрия стар Internet Explorer, трябва допълнително да добавите следния код към CSS

    ul ( z- индекс: израз(runtimeStyle. zIndex = 1, insertAdjacentHTML("beforeEnd&apos, "< li class = "last" >")); ) ul .last ( margin-left: 100%; ) * html ul ( /* трябва само ie6 */ height: 30px; )

    След като посочихме необходимите стойности на свойствата и кода, получаваме това гумено меню:

    Недостатъци на метода
  • Код на обема
  • Невъзможност за определяне на активното състояние на елемент чрез селектор на клас. Това се случва поради прекъсване на думите в абзаци (ако има такова). Решението на този проблем е да добавите друг контейнер в елементите на списъка.
  • За падащото меню трябва да персонализирате кода поради отрицателното въздействие на overflow.
    • В какви браузъри работи?
    6.0+ 6.0+ 10.5+ 5.0+ 3.6+ - -

    Продължаваме поредицата с урок за падащите менюта. Следва хоризонтално падащо меню „направи си сам“ с помощта на css.

    Ако сте попаднали тук случайно или сте търсили друга реализация на падащото меню, съветвам ви да отидете в родителския раздел.

    Този раздел ще опише хоризонтално падащо меню в CSS и HTML.

    Навигация на страницата:

    Така, нашата задача:

    направете хоризонтално меню с падащ списък css (на ul li списъци) без да използвате jQuery и Javascript, а също и без да използвате таблици

    в кода.

    Падащо хоризонтално меню html

    Преди всичко, преди да започнем да пишем код, трябва да направим html шаблонза менюто.

    Поради факта, че правим универсално меню, искам да го направя възможно най-подобно на изхода от менюто на WordPress. По мое мнение това е един от най-простите и гъвкави Html кодове на менюто. Изглежда така:

    • У дома
    • За нас
    • Нашите услуги
      • Нашата услуга №1
      • Нашата услуга №2
      • Нашата услуга №3
      • Нашата услуга №4
      • Обслужване 5
    • Новини
    • Контакти

    Както можете да видите от кода, нашето падащо меню ще бъде внедрено в списъците 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 %; височина:авто; стил на списък:няма; фон:#F3A601; ) #menu1 > ul::after( display:block; width:100%; height:0px; clear:both; content:" "; ) # 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- семейство: Arial, sans-serif; цвят: #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( фон:#EBBD5B; цвят:#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 a( display:block; text-transform:none; height:auto; padding:7px 25px; width: 100%; box-sizing:border-box; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li ul li a: курсор на мишката (фон:#FDDC96; цвят:#6572BC; )

    Това е сега. Самият механизъм за отпадане е реализиран в един ред.

    Вижте кожата с това меню:

    Ориз. 2 (хоризонтално падащо меню)

    По-долу има демонстрация на това как работи падащото меню, както и връзка за изтегляне на източниците. (Демото ще се отвори с падащо меню в горната част на тази страница, няма нужда да щраквате върху отваряне в нов прозорец 🙂 или колелцето на мишката)

    Хоризонтално падащо меню с пълна ширина

    Повечето от вас могат да ме упрекнат, че такива менюта, каквито показах по-горе, са привет от миналото и отчасти сте прави, въпреки че съм виждал скорошни оформления с такива менюта.

    Надявам се, че сте изтеглили горния пример. Нашият Html остава същият, но ще променим напълно CSS. Можете просто да вземете CSS кода от тук и да го поставите в изтегления пример или да гледате в демо режим как работи.

    #container( 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: оправдаване; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( position :relative; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; ) #menu1 ul li a( display:block; padding:9px 35px 0px 35px; 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; цвят:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; ляво :0px; дисплей: няма; ширина: авто; фон:#EBBD5B; бяло пространство:nowrap; ) #menu1 ul li:last-child ul(/*последният елемент ще бъде прикрепен към десния край*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*this ред прилага механизма за отпадане*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 35px; width:100% ; box-sizing:border-box; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li ul li a: завъртане на мишката (фон: #FDDC96; цвят:#6572BC; )

    Този пример също се различава от първия по това, че падащото меню, самото падащо меню, се разтяга в зависимост от ширината на всички елементи от менюто.

    За много дълги елементи от менюто тази опция може да не е много удобна, тъй като те ще надхвърлят ограниченията. За да деактивирате това свойство, просто намерете свойството "white-space:nowrap;" в селектора #menu1 ul li ul и го изтрийте.

    По-долу можете да гледате демонстрация или да изтеглите източниците на хоризонталното падащо меню:

    Без разделители това меню изглежда така-така. Разделителите могат да се добавят към HTML ръчно, но ако имате CMS, като WordPress, тогава ръчното им добавяне не е много удобно.

    Хоризонтално падащо меню с разделители

    Има няколко десетки опции за добавяне на лента (разделител) между елементите на менюто, използвайки чист CSS. Няма да дублирам опциите, които използват::before или::after, или много по-прости border-left, border-right.

    Има ситуации, когато оформлението е изградено толкова чудесно, че не можете без jquery.

    Нашият HTML код остава същият, ние просто включваме библиотеката jQuery и файла, който я използва в самото начало:

    Веднага след .

    Както разбирате, трябва да създадете файл скрипт-меню-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

    Тъй като говорим за многостепенни падащи менюта при задържане, вероятно си струва да ги разделим на подгрупи:

  • с vip подложка при насочване настрани
  • с изскачащо падащо меню от трето ниво

    • В моите примери ще покажа многостепенно CSS меню с 3 нива, тогава мисля, че няма да е трудно да познаете какво трябва да се направи.

    Многостепенно падащо меню със странична лента при задържане

    Първо, трябва леко да коригираме нашия HTML. Там ще бъдат добавени няколко реда за ниво 3:

    • У дома
    • За нас
    • Нашите услуги
      • Нашата услуга №1
        • Допълнение към услугата 1
        • Допълнение към услуга 2
      • Нашата услуга №2
        • Допълнение към услугата 3
        • Допълнение към услугата 4
      • Нашата услуга №3
      • Нашата услуга №4
      • Обслужване 5
    • Новини
    • Контакти
      • Пътна карта
        • Добавка за карта
        • Допълнение към карта 2
      • Форма за обратна връзка

    #container( 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: оправдаване; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( position :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; font-size:14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3 em; 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 (фон:#EBBD5B; цвят:#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;) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( background:#FDDC96; color:#6572BC; ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; background:#fddc96; ) #menu1 > ul > li:последно дете > ul ul(left:auto; right:100%;) #menu1 ul li ul li ul a(color:#F38A01;)

    Копираме файловете за jQuery както бяха от предишния пример. Реших да оставя разделителите, за да изглежда менюто поне малко по-добре. Разбира се, можете да го направите и без тях.

    Ето как се случи:
    Направих 2 скина в един, за да покажа как изглежда капката отдясно и в средата.

    По-долу можете да гледате демонстрация и да изтеглите пример:

    Многостепенно падащо меню с изскачаща подложка при задържане

    Има малко масло в заглавието, но ще работи, основното е кодът.

    Същността на този пример е да се създаде хоризонтално падащо меню с пълна ширина с падащо меню с пълна ширина + много нива.

    Няма да променям HTML кода, той може да бъде взет от предишния пример. Оставяме и разделители в jQuery.

    Само CSS ще се промени напълно:

    #container( 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: оправдаване; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( position :relative; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; ) #menu1 > ul > li(position:static;) #menu1 ul li.razd( height :28px; width:1px; background:#ffffff; margin-top:4px; ) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans- serif; цвят:#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; цвят:#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 ul li:hover > ul(display:block;)/*този ред прилага механизма за отпадане*/ #menu1 ul li ul li( display :block; width:30%; float:left; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box- sizing:border -box; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( фон: #FDDC96; цвят:#6572BC; ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; background:#fddc96; z-index:15; ) #menu1 ul li ul li ul li (display: block; float:none; width:100%;) #menu1 ul li ul li ul a( color:#F38A01; border-top:1px solid #ffffff; )

    Ето как ще изглежда менюто: Единственото нещо е, че сайтът трябва да има достатъчно място, тъй като последният елемент вдясно няма място за падащо меню. Този проблем може да бъде решен с помощта на:nth-child, но аз не си направих труда.

    Вижте демонстрация на хоризонтално многостепенно падащо меню:

    Както може би сте забелязали: долната матрица също е с пълна ширина. Така се правят капки в няколко блока.

    Това е всичко за мен, надявам се поне един от моите примери да ви подхожда. Благодаря за вниманието.

    ще е от полза и за тях, и за мен :)

    Ако сте прочели цялата публикация, но не сте намерили как да направите свое собствено хоризонтално падащо меню в css, задайте въпрос в коментарите или използвайте търсенето в сайта.

    Също така ви съветвам да посетите основната страница https://site/vypadayushhee-menu/, там са събрани всички примери и видове падащи менюта.

    Публикации по темата