Хоризонтално менює списък с подразделения за сайта, по-логично е да го поставите в средата на елемента
- , и след това zasosuvat CSS-стиловете към його елементи. Такова разширение на менюто е най-разширено чрез очевиден напредък в позицията му в уеб сайта.
- Елемент от менюто
- Елемент от менюто
- Елемент от менюто ...
- подрязване на блокове за меню
- самото меню, преглеждано чрез списък за маркиране (ul таг)
- Е, елементите от менюто са в средата и в тях, очевидно, вече има съобщение
- vertical-align: bottom - тази мощност е необходима, за да се открои, така че текстът на елемента от менюто да заема 2 реда и да се показва равномерно. Ако разширим менюто, можете да видите мощността, да увеличите мащаба, така че точките да се притиснат и текстът да се прехвърли на два реда и да решите проблема с показването. Включете обратно захранването и всичко ще бъде наред.
- display: table-cell – задали сме самото меню да се показва като ред на таблица, би било логично да зададем един от елементите да се показва като ред на таблица. Це обовъязково.
- ширина: auto - ширината се изчислява автоматично, в зависимост от дължината на текста в абзаца
- text-align: center е само за центриране на текста в средата
- височина: 50 пиксела - задайте височината на 50 пиксела
- добре, границата вдясно е просто дясна граница, такъв разделител за точки
- мощност текст-декорация skasovuє podkrelennya posilan, yak, поставен отзад umovchannyam
- ширина: 1000px - може би най-важният ред. Необходимо е да зададете приблизително еднаква ширина, може би по-малка, но и повече от максимално широк елемент от менюто. Ако не искате да ставате широки от 1000 пиксела, задайте ширината на елемента от менюто li, за който ширината е зададена на автоматична, след което го оставете да работи така, че за произволен брой елементи в менюто, трябва да бъде зададена до 100 пиксела ширина.
- vertical-align: middle и display: table-cell - първо изобразете текста вертикално в центъра, а в другия също опитайте да покажете текста в средата. Необходими са престъпления срещу властта.
- шрифт - това е просто набор от настройки за шрифта. Прочетете за силата на css за шрифтове в тази статия.
- менюто се разтяга динамично;
- излезте от търговеца на дребно до точката на разлика;
- по-красиво е украсено това малко зайче.
- с vipadashkoy при прицелване на убийство
- със снаждане вападка от третия равен
- Код на тома
- Невъзможността за присвояване на активното състояние на елемента чрез селектора на клас. Tse vіdbuvaєtsya чрез rozryv sіv в параграфи (yakscho това е един). Решението на проблема би било добавянето на още един контейнер към елементите на списъка.
- За менюто, което виждате, трябва да прокарате кода през отрицателното препълване на входящия поток.
Как да създадете хоризонтално меню: оформление и дизайн
HTML оформление и основни стилове за хоризонталното меню
За заключване се поставят всички елементи от списъка вертикално, обхващащ цялата ширина на контейнерния елемент, който обхваща цялата ширина на контейнерния блок.
HTML маркиране за хоризонтална навигация
В средата на елемента може допълнително да се постави хоризонтално меню, което се появява в средата на тага или
Іsnuє kіlka начини за разпространение на їх хоризонтално. За кочана е необходимо да махнете стиловете на браузъра за промоции за елементи за навигация:
Ul ( list-style: none; /*премахване на маркерите на списъка*/ поле: 0; /*премахване на горното и долното поле, равно на 1em*/ padding-left: 0; /*премахване на лявото поле, равно на 40px*/ ) a ( текстова декорация: няма; /*премахване на текстова декорация */)
Метод 1. li (дисплей: вграден;)
Робимо елементи списък с малки. В резултат на това вонята се разпространява хоризонтално, правилната странамежду тях се добавя допълнително пространство, което е 0.4em (изчислява се според размера на шрифта). За да използвате йога, добавете за li отрицателното дясно поле li (margin-right: -4px;) . Дадохме стилистична заявка за vlasnym кули.
Метод 2. li (float: вляво;)
Списъкът с елементи на Robimo е плаващ. В резултат на това вонята се разпространява хоризонтално. Височината на блок-контейнер ul е настроена на нула. За да разрешите този проблем, добавете за ul (overflow: hidden;) , като го разширите и му позволите да приема плаващи елементи. За съобщението добавете (display: block;) и го оформете за вашия bajan.
Опция 3. li (дисплей: inline-block;)
Robimo елементи изброяват ред-блок. Вонята броди хоризонтално, от дясната страна има пролука, като първата капка. За съобщението добавете (display: block;) и го оформете за вашия bajan.
Метод 4. ul (дисплей: flex;)
Robimo list ul с гъвкав контейнер за допълнителен модел. В резултат на това елементите от списъка са подредени хоризонтално. Додаем да изпратите (дисплей: блок;) и да го стилизирате за вашия bajan.
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 (съдържание: "|"; цвят: #606060; дисплей: inline-block; vertical-align:top; ) .menu-main li:last-child:after (съдържание: няма;) .menu-main a (текст-декорация: няма; семейство шрифтове: "Ubuntu Condensed", sans-serif; разстояние между буквите: 2px; позиция: относителна; padding-bottom: 20px; поле: 0 34px 0 30px; размер на шрифта: 17px; text-transform: главни букви; дисплей: inline-block; преход: цвят .2s; ) .menu-main a, .menu-main a:посетен (цвят: #9d999d;) main a:hover(color: #feb386;) .menu-main a:before, .menu-main a:after ( съдържание: ""; позиция: абсолютна; височина: 4px; отгоре: автоматично; : -5px; вляво: 50%; фон: #feb386; преход: . 8s; ) .menu-main a:hover:before; 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; margin: 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; ) #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 плътно прозрачен; n: .3s линейно; ) .menu-main .current, .menu-main a:hover ( border-radius: 3px; background: #f3ece1; color: #313131; text-shadow: 0 1px 0 #fff;@media (макс. ширина: 500 пиксела) ( .menu-main li (дисплей: блок;) )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: ""; позиция: абсолютна; ширина: 100%; височина: 20px; вляво: 0; отдолу: -20px; 255,255,255,0) 100%) 0 -10px; размер на фона: 20px 20px; фоново повторение: повторение-x; ) . нито един; дисплей: вграден блок поле: 0 15px; допълване: 10px 30px; семейство шрифтове: "PT Sans Caption", sans-serif; -main a:before, .menu-main a:after ( съдържание: ""; позиция: абсолютна; отгоре: calc(50% - 3px); ширина: 6px; височина: 6px; #F58262; непрозрачност: 0; преход: .5s лекота на влизане; ). текущ:преди, .menu-main a.current: след, . ) @media(max-width:680px) ( .menu-main li (дисплей: блок;) )4. Отзивчиво меню на страницата
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu ( поле: 0 60px; позиция: относителна; фон: #5A394E; box-shadow: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,2) 0 150px -15 rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255,255,255,.12); .top-menu:before, .e z-index: 2; вляво: 0; ширина: 100% височина: 3px; ) .top-menu:before (отгоре: 0; menu:after (отдолу: 0; border-top: 1px пунктирана rgba(255,255,255,.2); ) .menu-main (list-style: няма; padding: 0; поле: 0; text-align: center; ) .menu-main:before, .menu-main:after ( съдържание: ""; позиция: абсолютна; ширина: 50px; височина: 0; отгоре: 8px; 5A394E; трансформиране: rotate(360deg); z-index: -1; ) .menu-main:before (ляво: -30px; основно:след (вдясно: -30px; граница вдясно: 12px плътен 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; цвят : бяло; преход: .3s линеен; ) .menu-main a.current, .menu-main a:hover @media (max-width: 680px) ( .top-menu (margin: 0;) .menu-main li ( дисплей: блок; поле вдясно: 0; ) .menu-main:преди, .menu-main:след (съдържание: няма;) .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: след ( съдържание: ""; дисплей: таблица; изчисти: и двете; ) .left-item (float: left;) .right-item (float: надясно;) .navbar-лого ( позиция: абсолютна; вляво: 50%; отгоре : 50%; transform: translate(-50%,-50%); ) .menu-main a ( text-decoration: none; displayj: block; ; разстояние между буквите: 2px; font-family: "Arimo", sans -serif; font-weight: бял; 0,0,.3);) @media (max-width: 830px) (.menu-main (padding-top: 90px; text-align: center;)). ; отгоре: 10px; transform: translateX(-50%); ) .menu-main li (float: няма; дисплей: inline-block; ) -size: 16px; ) ) @media (макс. ширина: 630 пиксела) ( .menu-main li (дисплей: блок;)) )6. Отзивчиво меню с лого на Zliva
@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-лого (дисплей: inline-block;) . li (display: inline-block;) .menu-main a ( text-decoration: none; display: block; : 2px; font-family: "Arimo", sans-serif; font-weight: bold; цвят: #F73E24 ;преход:.3линеен; ) . височина: 9px;фон:#F73E24;позиция: абсолютна;ляво:50%;трансформиране: завъртане(45 градуса) translateX(6.5px);непрозрачност:0;преход:.3s линеен; (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 (дисплей: блок;) )Витания. Отдавна не съм писал публикация за html/css. След като наскоро започна да създава ново оформление и в процеса на използване cicavia priyom, което ви позволява да разширите менюто на gumovim (преди новото, можете да добавяте нови елементи и разширението няма да се увеличава, но ще бъдете 100% от блока Batkiv). Също така внедрен днес в менюто на css gum.
Който се интересува да прочете статията, може да се чудите на видеото. Авторът също обяснява всичко много хубаво:
Меню с дъвки на CSS - krok 1
Първи крокодил - Це Завжди html оформлениекъде без нея. Але, в нашата випадка всичко ще бъде просто:
Всичко беше ясно, оста е следния код за мен:
Виждайки, че всичко е стандартно, оста е така:
Сега привеждаме всичко в необходимия изглед, CSS се приема за робота.
Krok 2 - основни стилове
След това ще добавя стилове към блока obgortsa. А за себе си ще задам максималната ширина на 600 пиксела (само за ръчно вземане на екранна снимка, така че менюто да пасне), а също така ще центрирам блока.
обвивам (
фон: #fff;
максимална ширина: 600px
марж: 0 автоматично;
}
Крок 3 - реалистичен хуманизъм
Сега към самото меню. От новия (от тага ul) ще премахна маркерите, ще увелича линейния градиент на фона и най-важното ще настроя дисплея: захранване на таблицата на ред на контейнера, за да се държи менюто като ред на таблица . Важно е да рейзвате за далечни манипулации.
R-меню (
фон: линеен градиент (вдясно, #b0d4e3 0%, #88bacf 100%);
дисплей:таблица-ред;
списък-стил: няма;
}
Як бачите, кода за насочване е кръстосан с мустаци, за което писах. Говорейки за това, ръчно генерирайте градиентите с помощта на инструмента Ultimate CSS Gradient Generator. Ще пиша повече за новия.
R-меню li(
вертикално подравняване: отдолу;
display:table-cell;
ширина: автоматично;
подравняване на текста: център;
височина: 50px;
border-right: 1px плътно #222;
}
Докато менюто изглежда незабележимо, но нищо, настъпи часът да приведем Його в шпакловка. 
Останете това, което е необходимо за вас, - задайте стиловете за средните абзаци. Тук имам този код:
R-меню li a (
текст-украса: няма;
ширина: 1000px
височина: 50px;
вертикално подравняване: средно;
display:table-cell;
цвят: #fff;
шрифт: нормален 14px Verdana;
}
I ос сега менюто изглежда така:
Е, ще ви кажа, ще обясня редовете:
Крок 4 (зад кулите) може да се добави интерактивност
Например, за да промените цвета на елемент от менюто при задържане на курсора. Realizuêtsya tse по-просто, за помощта на псевдо-класа.
R-меню li: задръжте курсора на мишката (
цвят на фона: #6bba70;
}
Тестване на менюто за гъстота
Всъщност менюто е готово, но не прекалихме с най-глупавото нещо - ще си тананикаме, както ви казах. Е, ще добавя още 2 елемента към менюто:
Менюто е загубило границата си от 600 пиксела. Останалите точки просто се стиснаха заедно, така че бяха поставени 2 нови.
Ще добавя още 1 точка:
Просто така, менюто се е променило малко и другият елемент изглежда е напълно нормален. И якбито нямаше силата на вертикално подравняване: отдолу, относно яка, казах ви, менюто ще изглежда по-добре.
Ще променя менюто на три точки.
Елементите станаха по-богати, но самото меню не се промени по ширина. Axis mi и zrobili 100% дъвка меню!
Как да адаптираме йога?
По принцип, тъй като сте настроили блока на обвивката не на фиксирана, а на максимална ширина, тогава не е необходимо да го адаптирате. Моето предпочитание е да задам мощността на max-width: 600px и ако ширината е по-малка от 600 пиксела, блокът просто ще преоразмерява, за да следва екрана, предотвратявайки хоризонталното превъртане.
Е, ако искате да промените нещо или да промените менюто на мобилни стопански постройкино на широки екрани, тогава медиите ще ви помогнат! Успех със сайта!
Продължаваме поредицата с урок за задаване на менюта към това, което виждате. В хоризонталното меню, това, което виждате, на css със собствените си ръце.
Якшчо пихте тук във випадково или се пошегувахте за изпълнението на менюто, каквото виждате, раджа отидете в клона на Баткивски.
Всеки раздел ще има описание на хоризонталното меню, което се появява в CSS и HTML.
Странична навигация:
аз така Нашата задача:
robiti хоризонтално меню css списък (в ul li списъци) без jQuery уикиче Javascript, както и без zastosuvannya таблица
при кода.
Хоризонтално меню, което виждате
Ние сме отпред, преди да започнем да пишем код, трябва да работим html шаблонза менюто.
Във връзка с това искаме да създадем универсално меню, искам да го направя възможно най-подобно на външния вид на менюто на WordPress. Според мен това е един от най-простите и универсални кодове на Html менюта. Изглежда така:
Както можете да видите от кода, нашето меню, което можете да видите, ще бъде внедрено в списъците ul и li. Axis изглежда като това меню без CSS стилове:
Нека просто да кажем, гледайки право напред, като страхотен списък. Те ни дадоха необходимостта да украсим менюто с допълнителни CSS стилове.
Хоризонтално меню, което попада на CSS
CSS стилове за менюто, това, което се вижда, и не само - всъщност е необходимо повече. Разделът Age, който виждате, се борете на базата на псевдокласа: 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( дисплей: блок; 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 плътно #ffffff; ) #menu1 фон:#FDDC96; цвят:#6572BC;
Оста сега е u. Самият механизъм на упадъка на реализациите е в един ред.
Вижте кожата от менюто:
Ориз. 2 (хоризонтално меню, това, което виждате)
По-долу е демонстрационен преглед на падащото меню с роботи, както и заявка за ваканционен наем. (Демото ще се играе отгоре на средната страна, не е нужно да натискате отваряне в новия прозорец 🙂 или има много мечки)
Хоризонтално меню, което пада на цялата ширина
Повечето от вас могат да ми кажат по-малко, след като са казали такива менюта, сякаш съм показал повече, ще се присадя от миналото и ще участвам в дажбата ви, ако искам да напиша свежи оформления с такива менюта.
Предполагам, че сте се възползвали от дупето. Html остава непроменен и отново помним оста CSS. Можете просто да вземете CSS кода от тук и да го поставите в задника или можете да го видите в демонстрационния режим, докато работи.
#conteiner( ширина:1000px; височина:авто; margin:0px auto; padding-top:10px; ) #menu1( позиция:относителна; дисплей:блок; ширина:100%; височина:автоматично; z-индекс:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; височина: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%; височина: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; дисплей: няма; ширина:автоматично; фон:#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 плътно #ffffff;) #menu1 #FDDC96; цвят:#6572BC;
Също така, това дупе изглежда като първия път, че менюто, което падате, самата капка, се простира в угара, от ширината на всички елементи от менюто.
За други елементи от менюто тази опция може да не е по-удобна, защото вонята ще бъде извън границите. За да извадите захранването, достатъчно е да знаете мощността "white-space:nowrap;" селекторът #menu1 ul li ul i има йога.
По-долу можете да разгледате демонстрацията или да видите изгледите на хоризонталното меню:
Без търговци на дребно менюто изглежда така. Можете да добавяте разширения в html на ръка, но ако имате CMS, например WordPress, тогава не можете да добавяте ръчно там.
Хоризонтално меню с търговци на дребно
Има десетки опции, като на чист CSSдобавете съпруг (rozdіlyuvach) между елементите от менюто. Опции, като усукване::преди или::след, в противен случай няма да дублирам граница-ляво, граница-дясна.
Има ситуации, ако оформлението е толкова прекрасно, че не можете без jquery.
Имаме много html код, просто го свързваме със самата библиотека jQuery на кочана, този файл, който е победоносен:
Имало едно време.
Както разбирате, е необходимо да създадете файл script-menu-3.jsи поставете този малък код:
$(document).ready(function()( $("#menu1 > ul > li:not(:last-child)").after(" "); ));
CSS стиловете за такова меню трябва да бъдат изключени, какво е, + хвърлете оста на това парче до края:
#menu1 ul li.razd( височина:28px; ширина:1px; фон:#ffffff; margin-top:4px; )
За да разгледате такова хоризонтално меню с опции на jQuery, оста ще бъде така:
Можете да разгледате демонстрацията или да вземете шаблона за хоризонтално меню по-долу:
Предимствата на такова решение са:
Хоризонтално Baghatorivneve CSS+HTML Menu
Тъй като ставаше дума за bugatorivne, менюто изчезва при задържане на курсора, поотделно варто ги разделя на подгрупи:
В задниците си показвам богато меню CSS за 3 равни, мисля, че няма да е трудно да разбера какво трябва да се направи.
Bagatorivneve меню с пряк път в книгата, когато задържите курсора на мишката
За кочана ни трябва малко да настроим нашия html. Там ще получите няколко реда за 3-ти ред:
#conteiner( ширина:1000px; височина:авто; margin:0px auto; padding-top:10px; ) #menu1( позиция:относителна; дисплей:блок; ширина:100%; височина:автоматично; z-индекс:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; височина: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%; височина: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 ( фон: #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(/*последният елемент ще бъде прикачени файлове в десния край*/ вляво:auto; вдясно:0px; ) #menu1 ul li:hover > ul(display:block;)/*този ред реализира механизма на задържане на курсора*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( дисплей : block; text-transform:none; височина:auto; padding:7px 45px; width:100%; box-sizing:border-box Border-top: 1px плътен #ffffff; ) a( background:#FDDC96; цвят:# 6572BC ; ) #menu1 ul li ul li ul( top:0px; > ul ul(left:auto; right:100%;) #menu1
Файловете за jQuery се копират все едно са от предната част. Vyrishiv пропуснете търговците на дребно, така че менюто изглеждаше малко по-добре. Можете, разбира се, и без тях.
Оста изглеждаше така:
Създадох 2 скина в един, за да покажа как изглеждам с дясна ръка и в средата.
По-долу можете да видите демонстрацията и да изтеглите акциите:
Богато меню, което се показва с падащо меню за сливане, когато задържите курсора на мишката върху
Троховото масло не беше включено в заглавието, но смути кода на смута.
Същността на това дупе е създаването на хоризонтално меню, което пада на цялата ширина и пада на цялата ширина + богатство.
Няма да променям html кода, можете да го вземете от предното дупе. Razdіlyuvachi на jQuery също е претоварен.
Променяйте само CSS отново и отново:
#conteiner( ширина:1000px; височина:авто; margin:0px auto; padding-top:10px; ) #menu1( позиция:относителна; дисплей:блок; ширина:100%; височина:автоматично; z-индекс:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; височина: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%; височина: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%; фон:#EBBD5B; ) #menu1 > ul > li > ul::after( clear:both; float: n един; ширина:100%; височина:0px; съдържание:" "; ) #menu1 :block; ширина:30%; float:ляво; ) #menu1 ul li ul li a( display:block; -box ; color:#6572BC; ; block;float:none;width:100%;) #menu1
Оста на менюто ще изглежда така: Единственият момент - сайтът може да има достатъчно място, така че няма място за крайната точка вдясно. Този проблем може да се реши чрез: nth-child, но няма да ограждам града.
Вижте демонстрацията на хоризонталната лента с менюта:
Както можете да запомните: долната плоча също е с цялата ширина. Оста е толкова срамежлива да падне при цаца от блокове.
Аз съм изцяло за това, сигурен съм, искам едно от задниците си за теб. Благодаря за уважението.
Це донесе меланхолия и Їм, и мен 🙂.Ако сте прочели поста внимателно, но ако не знаете как да създадете хоризонтално меню, какво можете да видите в css, задайте храната в коментарите или бързо потърсете в сайта.
И така, раджата вижда страната на бащата https://website/vypadayushhee-menu/, там са избрани всички приложени и различни менюта.
За да разширите схемата за оформление на менюто за сайта, ако контейнерът от него заема цялата ширина, той е наличен отстрани. При това първата точка лежи до левия ръб, а останалата - отдясно и стои между елементите на ръба. Днес ще ви кажем как да се биете.
Ние ви предлагаме основата за изпълнение меню за дъвкив Помощ за CSSза вашия ресурс. За това меню елементите са поставени в един ред. Javascript не е наличен. В менюто ще има стаи за страхотен списък. Главната фигура на такова меню е гъвкавост, тъй като се проявява във факта, че е число, така че дори пробиване на дожина може да бъде.
Как да приложим?
Програмистът на кожата може да предложи свой собствен начин за изпълнение на поставената задача. Да поставите всичко в светлината на вашето въображение, равно на професионализъм и zdibnosti. Най-широката версия на проблема е таблицата с варианти. Също така е богато за някой, който настоява да ускори JavaScript. Тих, който призова да ускори захранването за показване на стойностите масаили клетка на таблицата- Ще побързам да се срамувам. Този метод не може да бъде достатъчно съвместим с различни браузъри.
Нашето решение
Нашето предложение ще се основава на задълбочено познаване на HTML5 и CSS3.
Същността на процеса е силата на подравняването на текста, за да оправдае стойностите. За тези, които забравят, предполагам: органът насочва текста към цялата ширина на контейнера.
С избора на нашето решение можем да добавим две obov'yazykovyh правила. Първото нещо е, че ширината на контейнера за елемента от менюто може да бъде по-малък, по-нисък текст. Тобто не в един ред. Друго важно правило е, че думите се изтеглят еднакво, независимо една от друга, до една точка на смрад, за да лъжат.
По-долу е представеното кодово представяне, което е основата на създаването на менюто "hum":
HTML
< ul> < li>< a href= "#" >Головна < li>< a href= "#" >Блог < li>< a href= "#" >Новини < li>< a href= "#" >по популярен < li>< a href= "#" >Нов
ul (подравняване на текста: обосноваване; препълване: скрит; /* задаване на страничната инжекция към метода */височина: 20px; /* tezh usuvaê zayve */курсор: по подразбиране; /* задайте формата на кочана на курсора */поле: 50px 100px 0 100px; фон: #eee; допълване: 5px ) li (дисплей: вграден; /* ограби елементите от менюто с текст */) li a (дисплей: 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 */ височина: 30px; )
След като регистрирахме необходимите стойности на властите и кода, поемаме оста на такова меню:
Недостатъци на метода
Кои браузъри работят?
Таблетки
6.0+ 6.0+ 10.5+ 5.0+ 3.6+ - -
