Бүтэн хуудасны өргөн css цэс. Бүтэн өргөнтэй үзэсгэлэнтэй хэвтээ цэс. Холбоос дээр хулганыг гүйлгэхэд доогуур зураастай мэдрэмжтэй цэс

Сайн уу. Би html/css ажлын сэдвээр нийтлэл бичээгүй удаж байна. Саяхан би шинэ загвар зохион байгуулж эхэлсэн бөгөөд энэ явцад би цэсийг уян хатан болгох боломжийг олгодог нэгэн сонирхолтой заль мэхийг олж авлаа (та үүн дээр шинэ зүйл нэмж болно, хэмжээ нь нэмэгдэхгүй, гэхдээ үргэлж 100% байх болно. эцэг эхийн блок). Тиймээс өнөөдөр бид CSS ашиглан резинэн цэсийг хэрэгжүүлэх болно.

Хэрэв та нийтлэлийг уншихаас залхуурсан бол энэ видеог үзэж болно. Зохиогч бас бүх зүйлийг маш сайн тайлбарлав:

Эхний алхам бол үргэлж html тэмдэглэгээ бөгөөд үүнгүйгээр бид хаана байх байсан бэ? Гэхдээ бидний тохиолдолд бүх зүйл энгийн байх болно:

Бүх зүйл тодорхой байна, энд миний тэмдэглэгээний код байна:

• 1-р зүйл


• 2-р цэг


• 3-р цэг


• 4-р цэг


• 5-р цэг

Энэ бүхэн стандарт харагдаж байна, дараах байдлаар:

Одоо бид бүгдийг оруулах болно зөв төрөл, CSS ажиллах болно.

Дараа нь би боодлын блок дээр хэв маяг нэмэх болно. Тухайлбал, би хамгийн их өргөнийг 600 пиксел болгон тохируулах болно (зүгээр л дэлгэцийн агшинг авахад хялбар болгохын тулд цэсийг тааруулахын тулд), мөн блокыг голчлон байрлуулна.

Боох(
дэвсгэр: #fff;
хамгийн их өргөн: 600px;
захын зай: 0 автомат;
}

Одоо цэсийг өөрөө авч үзье. Би эндээс тэмдэглэгээг (ul tag) устгаж, арын шугаман градиент хийж, хамгийн чухал нь дэлгэцийн: table-row шинж чанарыг ашиглан цэсний савыг хүснэгтийн мөр шиг ажиллуулах болно. Цаашид заль мэх хийхэд үүнийг хийх нь чухал юм.

R-цэс(
дэвсгэр: шугаман-градиент(баруун тийш, #b0d4e3 0%,#88bacf 100%);
дэлгэц: хүснэгт-мөр;
жагсаалтын хэв маяг: байхгүй;
}

Таны харж байгаагаар дээрх код миний бичсэн бүх зүйлийг шийдсэн. Дашрамд хэлэхэд, Ultimate CSS Gradient генератор хэрэгслийг ашиглан градиент үүсгэх нь тохиромжтой. Хэзээ нэгэн цагт би түүний тухай дахин бичих болно.

R-цэс(
босоо зэрэгцүүлэх: доод;
дэлгэц: хүснэгт-нүд;
өргөн: автомат;
текстийг зэрэгцүүлэх: төв;
өндөр: 50px;
баруун хүрээ: 1px хатуу #222;
}

• vertical-align: bottom - энэ шинж чанар зайлшгүй шаардлагатай бөгөөд хэрэв цэсийн зүйл дэх текст 2 мөр байвал жигд харагдах болно. Бид цэсийг хийх үед та энэ өмчийг устгаж, масштабыг нэмэгдүүлэх боломжтой бөгөөд ингэснээр зүйлсийг шахаж, текстийг хоёр мөрөнд шилжүүлэхэд дэлгэцийн асуудал гарч ирнэ. Үл хөдлөх хөрөнгөө буцааж өг, тэгвэл бүх зүйл сайхан болно.
• display: table-cell - бид дэлгэцийн цэсийг өөрөө хүснэгтийн мөр болгож тохируулсан тул түүний зүйлсийг хүснэгтийн нүд болгон харуулах нь логик юм. Энэ нь зайлшгүй шаардлагатай.
• width: auto — догол мөр дэх текстийн уртаас хамааран өргөнийг автоматаар тооцоолох болно
• text-align: center - энэ нь зөвхөн доторх текстийг голлуулах явдал юм
• өндөр: 50px — өндрийг 50 пиксел болгож тохируулна уу
• за, border-right бол зүгээр л баруун талын хүрээ, эд зүйлсийг тусгаарлах хэсэг юм

Одоогоор цэс эвгүй харагдаж байна, гэхдээ зүгээр, үүнийг санах цаг болжээ.

Хамгийн сүүлд хийх зүйл бол эд зүйлсийн доторх холбоосыг загварчлах явдал юм. Энд надад энэ код байна:

R-цэс li a(
текстийн чимэглэл: байхгүй;
өргөн: 1000px;
өндөр: 50px;
босоо зэрэгцүүлэх: дунд;
дэлгэц: хүснэгт-нүд;
өнгө: #fff;
фонт: хэвийн 14px Verdana;
}

Одоо цэс иймэрхүү харагдаж байна:

Дахин хэлэхэд зарим мөрийг тайлбарлая:

• text-decoration шинж чанар нь холбоосуудын өгөгдмөл доогуур зураасыг дардаг
• өргөн: 1000px магадгүй хамгийн чухал мөр юм. Та холбоосыг ойролцоогоор энэ өргөнтэй тохируулах хэрэгтэй, магадгүй бага, гэхдээ цэсийн хамгийн өргөн сонголтоос илүү том байх ёстой. Өргөн нь автоматаар тохируулагдсан li цэсийн зүйлээр хязгаарлагдах тул холбоосууд нь 1000 пикселийн өргөнтэй биш байх болно, гэхдээ энэ нь цэсийн аль ч тооны зүйлийн хувьд үргэлж 100 байх боломжийг олгоно. өргөний хувь.
• vertical-align: middle and display: table-cell - эхнийх нь текстийг босоогоор нь төв рүү зэрэгцүүлэх ба хоёр дахь нь холбоосыг нүд хэлбэрээр харуулах болно. Энэ хоёр шинж чанар хоёулаа хэрэгтэй.
• фонт - энэ бол зүгээр л үсгийн тохиргооны багц юм. тухай уншина уу css шинж чанаруудЭнэ нийтлэл дэх фонтуудын хувьд.

Жишээ нь, цэсний зүйлийн өнгө нь хулганыг аваачихад өөрчлөгдөнө. Үүнийг hover псевдо ангиудыг ашиглан маш энгийнээр хэрэгжүүлж болно:

R-цэс li: гүйлгэх(
дэвсгэр өнгө: #6bba70;
}

Гайхалтай, цэс бэлэн байна, гэхдээ бид танд амласанчлан хамгийн чухал зүйлийг нь шалгаагүй байна. За, би цэсэнд дахиад 2 зүйл нэмнэ:

Цэс нь 600 пикселийн өргөнтэй хэвээр байна. Үлдсэн зүйлсийг 2 шинэ зүйл оруулахын тулд бага зэрэг багасгасан.

Би дахиад нэг урт зүйл нэмнэ:

Таны харж байгаагаар цэс бага зэрэг багасч, урт зүйл нэлээд хэвийн харагдаж байна. Хэрэв миний хэлсэн vertical-align: bottom шинж чанар байгаагүй бол цэс улам дордох байсан.

Би цэсийг гурван зүйл болгон багасгах болно.

Зүйл нь илүү чөлөөтэй болсон боловч цэс өөрөө өргөнөөрөө өөрчлөгдөөгүй. Тиймээс бид 100% резинэн цэс хийсэн!

Зарчмын хувьд, хэрэв та боодлын блокыг тогтмол биш харин хамгийн их өргөнийг өгвөл үүнийг тохируулах шаардлагагүй болно. Миний хувьд, би max-width шинж чанартай: 600px бөгөөд өргөн нь 600 пикселээс бага бол блок нь хэвтээ гүйлгэхгүйгээр дэлгэцтэй хамт хумигдах болно.

Хэрэв та ямар нэгэн байдлаар цэсийг өөрчлөх эсвэл засахыг хүсч байвал хөдөлгөөнт төхөөрөмжүүдэсвэл өргөн дэлгэцтэй бол медиа асуулга танд туслах болно! Вэбсайт бүтээх ажилд амжилт хүсье!

Хэвтээ цэс нь вэбсайтын хэсгүүдийн жагсаалт тул үүнийг элемент дотор байрлуулах нь илүү логик юм

, дараа нь түүний элементүүдэд CSS хэв маягийг хэрэглэнэ. Энэхүү цэсийн зохион байгуулалт нь вэб хуудсан дээрх байршлын давуу талтай тул хамгийн түгээмэл байдаг.
Хэрхэн хэвтээ цэс хийх вэ: зохион байгуулалт, дизайны жишээ HTML тэмдэглэгээ болон хэвтээ цэсний үндсэн хэв маяг

Анхдагчаар жагсаалтын бүх элементүүд нь босоо байрлалтай байх ба савны элементийн өргөнийг бүхэлд нь эзэлдэг бөгөөд энэ нь эргээд түүний савны блокийн өргөнийг бүхэлд нь эзэлдэг.

Хэвтээ навигацийн HTML тэмдэглэгээ

• Цэсийн зүйл
• Цэсийн зүйл
• Цэсийн зүйл
...

Шошго дотор байрлах хэвтээ цэсийг нэмэлтээр ... ба/эсвэл ... элемент дотор байрлуулж болно. Энэхүү html тэмдэглэгээний ачаар семантик утгыг өгч, мөн гарч ирнэ нэмэлт боломжцэсийн блокыг форматлах.

Тэдгээрийг хэвтээ байдлаар байрлуулах хэд хэдэн арга байдаг. Эхлээд та навигацийн элементүүдийн анхдагч хөтчийн хэв маягийг дахин тохируулах хэрэгтэй.

Ul (жагсаалтын хэв маяг: байхгүй; /*жагсаалтын тэмдэглэгээг арилгах*/ зах: 0; /*дээд ба доод ирмэгийг 1em-тэй тэнцүү хасах*/ padding-left: 0; /*40px-тэй тэнцүү зүүн жийргийг арилгах*/ ) a (текст чимэглэл: байхгүй; /*холбоос текстийн доогуур зураасыг арилгах*/)

Арга 1. li (дэлгэц: дотор;)

Жагсаалтын элементүүдийг жижиг үсгээр бичих. Үүний үр дүнд тэдгээрийг хэвтээ байдлаар байрлуулж, баруун талд нь 0,4 см-ийн зайг нэмсэн (фонтын хэмжээтэй харьцуулахад тооцоолсон). Үүнийг арилгахын тулд li li-д баруун талын сөрөг зай нэмнэ (баруун захын зай: -4px;) . Дараа нь бид холбоосыг хүссэнээрээ загварчлана.

Арга 2. li (хөвөгч: зүүн;)

Жагсаалтын элементүүдийг хөвөгч болгож байна. Үүний үр дүнд тэдгээрийг хэвтээ байдлаар байрлуулна. Савны блок ul өндөр нь тэг болно. Энэ асуудлыг шийдэхийн тулд бид ul-д (халих: нуугдмал;) нэмж, үүнийг сунгаж, улмаар хөвөгч элементүүдийг агуулж болно. Холбоосуудын хувьд (дэлгэц: блок;) нэмээд хүссэнээрээ загварчилна уу.

Арга 3. li (дэлгэц: inline-block;)

Жагсаалтын элементүүдийг inline-block болгох. Тэдгээр нь хэвтээ байрлалтай, эхний тохиолдол шиг баруун талд цоорхой үүсдэг. Холбоосуудын хувьд (дэлгэц: блок;) нэмээд хүссэнээрээ загварчлаарай.

Арга 4. ul (дэлгэц: flex;)

ul list-ийг ашиглан уян хатан сав болгох нь . Үүний үр дүнд жагсаалтын элементүүдийг хэвтээ байдлаар байрлуулна. Бид холбоосыг (дэлгэц: блок;) нэмж, хүссэнээр нь загварчилна.

1. Холбоос дээр гүйлгэх үед доогуур зураастай дасан зохицох цэс
• Ажил
• тухай
• Блог
• Холбоо барих
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main (жагсаалтын хэв маяг: байхгүй; захын зай: 40px 0 5px; дэвсгэр: 25px 0 5px; текстийг зэрэгцүүлэх: төвд; арын дэвсгэр: цагаан; ) .menu-main li (дэлгэц: inline-block;). цэс- үндсэн li: дараа ( агуулга: "|"; өнгө: #606060; дэлгэц: inline-block; vertical-align: top; ) .menu-main li: last-child: after (агуулга: байхгүй;) .menu-main a (текст-чимэглэл: байхгүй; фонт-бүлэг: "Ubuntu Condensed", sans-serif; үсэг хоорондын зай: 2px; байрлал: харьцангуй; дэвсгэр-доод: 20px; захын зай: 0 34px 0 30px; үсгийн хэмжээ: 17px; text-transform: том үсгээр харуулах: inline-block; color .2s; ) .цэс-main a:өмнө, .menu-main a:дараа ( агуулга: ""; байрлал: үнэмлэхүй; өндөр: 4px; дээд: автомат; баруун: 50%; доод: -5px; зүүн: 50%; дэвсгэр : #feb386; шилжилт: .8s; ) .menu-main a:hover:fore, .menu-main .current:fort (зүүн: 0; дараа, .menu-main .current: дараа). 0;) @media (хамгийн их өргөн: 550px) ( .menu-main (padding-top: 0;).menu-main li (дэлгэц: блок; ) .menu-main li:after (агуулга: байхгүй;) . цэс-үндсэн a ( дүүргэх: 25px 0 20px; захын зай: 0 30px; ) ) 2. Хуримын вэб сайтад дасан зохицох цэс
• Ажил
• тухай
• Блог
• Холбоо барих
@import url("https://fonts.googleapis.com/css?family=PT+Sans"); .дээд цэс (байрлал: харьцангуй; дэвсгэр: #fff; хайрцаг-сүүдэр: оруулах 0 0 10px #ccc; ) .дээд цэс: өмнө, .дээд цэс: дараа ( контент: ""; дэлгэц: блок; өндөр : 1px хүрээний дээд: 3px хатуу #575350 хилийн-доод: 2px .top-menu: дараа нь (хүргийн-дээд: 3px хатуу; 575350; box-shadow: 0 2px 7px #ccc; байрлал: харьцангуй; ) .menu-main:өмнө, .menu-main:дараа ( агуулга: "\25C8"; мөрийн өндөр: 1; байрлал: үнэмлэхүй; дээд: 50%; transform: translateY(-50% ); (текст чимэглэл: байхгүй; дэлгэц: шугаман блок; захын зай: 2px 5px; дэвсгэр: 6px 15px; үсгийн гэр бүл: "PT Sans", sans-serif; үсгийн хэмжээ: 16px; өнгө: #777777; хилийн доод хэсэг : 1px хатуу тунгалаг шилжилт: .3s шугаман; ) .menu-main .current, .menu-main a:hover ( хүрээ-радиус: 3px; дэвсгэр: #f3ece1; өнгө: #313131; текст-сүүдэр: 0 1px 0 #fff; хүрээ-өнгө: #c6c6c6; ) @media (хамгийн их өргөн: 500px) ( .menu-main li (дэлгэц: блок;) ) 3. Хариуцлагатай scalloped цэс
• Ажил
• тухай
• Блог
• Холбоо барих
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main ( жагсаалтын хэв маяг: байхгүй; дэвсгэр: 0 30px; захын зай: 0; үсгийн хэмжээ: 18px; текстийг зэрэгцүүлэх: төвд; байрлал: харьцангуй; дэвсгэр: цагаан; ) .menu-main: дараа ( агуулга: "" байрлал: өндөр: 20px; фон: цагаан 0%, 255,255,255,0) 0 -10px; background-repeat: repeat-x; ) .menu-main li (дэлгэц: inline-block;) .menu-main a ( text-decoration: none; display: inline-block; padding: 10px 30px; font-family: " PT Sans Caption", sans-serif; шилжилт: .3s шугаман; -main a:өмнө, .menu-main a:дараа ( агуулга: ""; байрлал: үнэмлэхүй; дээд: calc(50% - 3px); өргөн: 6px өндөр: радиус: 50%; шилжилт: .5s ease-in-out (зүүн: 5px;) .menu-main a; :дараа (баруун: 5px;) .цэс-main a одоогийн:өмнө, .цэс-main a.гүйдэл:дараа, .цэс-main a:хулганаа:өмнө, .menu-main a:hover:дараа (тунгалаг байдал: 1;) .цэс-main a.current, .menu-main a:hover (өнгө: #F58262;) @media(max-width:680px) ( .menu-main li (дэлгэц: блок;) ) 4. Дасан зохицох туузан дээрх цэс
• Ажил
• тухай
• Блог
• Холбоо барих
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .дээд цэс (хаваас: 0 60px; байрлал: харьцангуй; дэвсгэр: #5A394E; хайрцаг-сүүдэр: оруулах 1px 0 0 rgba(255,255,255,.1), оруулга -1px 0 0 rgba(255,255,255,.1), оруулга 150 0 150px -150px rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255,255,255,.12) .top-цэс:өмнө, .дээд цэс:дараа: байрлал: үнэмлэхүй ;z -индекс: 2; өргөн: 100% өндөр: 3px; none; padding: 0; 8px; border-top: 18px solid #5A394E; transform: rotate(360deg) .menu-main:force ( зүүн: -30px; : 12px solid rgba(255, 255, 255, 0 ) .menu- main:after (баруун: -30px; хүрээ-баруун: 12px хатуу rgba(255, 255, 255, 0); ) .menu-main li (дэлгэц: inline-block; margin-right: -4px; ) .menu-main a (текст чимэглэл: байхгүй; дэлгэц: inline-block; padding: 15px 30px; font-family: "PT Sans Caption", sans-serif; өнгө: цагаан; шилжилт: .3s шугаман; ) .цэс-main a.current, .цэс-main a:hover (арын дэвсгэр: rgba(0,0,0,.2);) @media (хамгийн их өргөн: 680px) ( .дээд цэс (маржин: 0;) .цэс-main li (дэлгэц: блок; баруун захын: 0; ) .цэс-үндсэн:өмнө, .цэс-main:дараа (агуулга: байхгүй;) .цэс-main a (дэлгэц: блок;) ) 5. Дунд хэсэгт лого бүхий хариу үйлдэл үзүүлэх цэс
• Ажил
• тухай
• Өгүүллэг
• Холбоо барих
• Дэлгүүр
• Галерей
@import url("https://fonts.googleapis.com/css?family=Arimo"); .дээд цэс (байрлал: харьцангуй; дэвсгэр: rgba(34,34,34,.2); ) .цэсийн үндсэн (жагсаалтын хэв маяг: байхгүй; захын зай: 0; дүүргэх: 0; ) . цэс-үндсэн: дараа ( агуулга: ""; дэлгэц: хүснэгт; тодорхой: хоёулаа; ) .зүүн-зүйл (хөвөгч: зүүн;) .баруун-зүйл (хөвөгч: баруун;).navbar-лого ( байрлал: үнэмлэхүй; зүүн: 50%; дээд : 50%; transform: translate(-50%,-50%) .menu-main a ( text-decoration: none; display: block; line-height: 80px; padding: 0 20px; font-size: 18px ; letter-spacing: 2px font-family: "Arimo", sans-serif өнгө: .3s linear (max-width: 830px) ( .menu-; үндсэн ( padding-top: 90px; text-align: center; ) .navbar-logo (байрлал: үнэмлэхүй; зүүн: 50% ; дээд: 10px; хувиргах: translateX(-50%) ) .menu-main li ( хөвөх: none; display: inline-block ) .menu-main a ( мөрийн өндөр: хэвийн; дэвсгэр: 20px 15px; үсгийн хэмжээ: 16px; ) ) @media (хамгийн их өргөн: 630px) ( .menu-main li ( дэлгэц: блок;) ) 6. Зүүн талд байгаа лого бүхий мэдрэмжтэй цэс
• Ажил
• тухай
• Өгүүллэг
• Дэлгүүр
• Галерей
• Холбоо барих
@import url("https://fonts.googleapis.com/css?family=Arimo"); .дээд цэс (арын дэвсгэр: rgba(255,255,255,.5); хайрцаг-сүүдэр: 3px 0 7px rgba(0,0,0,.3); дэвсгэр: 20px; ) .top-цэс: дараа ( контент: "" ; дэлгэц: хүснэгт; тодорхой: хоёулаа ) .navbar-лого (дэлгэц: inline-block;) .menu-main ( list-style: none; margin: 0; padding: 0; float: right; ) .menu-main; li (дэлгэц: inline-block;). цэс-main a ( текст-чимэглэл: байхгүй; дэлгэц: блок; байрлал: харьцангуй; мөрийн өндөр: 61 пиксел; дэвсгэр зүүн: 20 пиксел; үсгийн хэмжээ: 18 пиксел; үсэг хоорондын зай : 2px; font-family: "Arimo", sans-serif; өнгө: #F73E24; зүүн: 50% transform(45deg) translateX(6.5px); 20px; ) .top-menu ( text-align: center; padding: 20px 0 0 0; ) .menu-main a (padding: 0 10px;) .menu-main a:for (хувиргах: rotate(45deg) translateX( -6px);) ) @media (хамгийн их өргөн: 600px) ( .цэс-үндсэн li (дэлгэц: блок;) )

Бид унадаг цэсний хичээлээр цувралаа үргэлжлүүлнэ. Дараагийнх нь css ашиглан өөрөө хийх хэвтээ унждаг цэс юм.

Хэрэв та энд санамсаргүй байдлаар ирсэн эсвэл унждаг цэсний өөр хувилбарыг хайж байгаа бол эцэг эхийн хэсэг рүү очихыг зөвлөж байна.

Энэ хэсэгт CSS болон HTML дээр хэвтээ унждаг цэсийг тайлбарлах болно.

Хуудасны навигаци:

Тэгэхээр, бидний даалгавар:

css (on ul li lists) унадаг жагсаалт бүхий хэвтээ цэс хийх jQuery ашигланболон Javascript, мөн хүснэгт ашиглахгүйгээр

кодонд.
Унждаг хэвтээ цэс html

Юуны өмнө бид код бичиж эхлэхээсээ өмнө хийх хэрэгтэй html загварцэсийн хувьд.

Бид бүх нийтийн цэс хийж байгаа тул би үүнийг WordPress цэсийн гаралттай аль болох адилхан болгохыг хүсч байна. Миний бодлоор энэ бол хамгийн энгийн бөгөөд уян хатан Html цэсийн кодуудын нэг юм. Энэ нь дараах байдалтай харагдаж байна.

• гэр
• Бидний тухай
• Бидний үйлчилгээ
  • Манай үйлчилгээ №1
  • Манай үйлчилгээ №2
  • Манай үйлчилгээ №3
  • Манай үйлчилгээ №4
  • Үйлчилгээ 5
• Мэдээ
• Харилцагчид

Кодоос харахад бидний унадаг цэс ul болон li жагсаалтад хэрэгжих болно. CSS загваргүйгээр цэс иймэрхүү харагдаж байна:

Энгийн жагсаалт шиг муухай харагдаж байгааг хүлээн зөвшөөрье. Дараа нь бид CSS хэв маягийг ашиглан энэ цэсийг засах хэрэгтэй.

CSS дээр хэвтээ унждаг цэс

Унждаг цэс болон бусад зүйлсийн CSS загварууд нь агаар мэт шаардлагатай. Эцсийн эцэст, унадаг таб нь псевдо ангиллын үндсэн дээр хийгдсэн: hover.

Хэвтээ унждаг цэсний хувьд бидэнд дараах загварууд хэрэгтэй.

#цэс1(байрлал:харьцангуй; дэлгэц:блок; өргөн:100%; өндөр:авто; z-индекс:10; ) #цэс1 ul(байрлал:харьцангуй; дэлгэц:блок; зах:0px; дүүргэлт:0px; өргөн:100 %; өндөр: автомат; list-style: none; menu1 ul li( байрлал:харьцангуй; дэлгэц:блок; хөвөх:зүүн; өргөн:автомат; өндөр:авто; ) #цэс1 ul li a(дэлгэц:блок; padding:9px 25px 0px 25px; үсгийн хэмжээ:14px; фонт- family:Arial, sans-serif; line-height:1.3em; font-weight:uppercase ) #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;)/*энэ мөрийг хэрэгжүүлнэ. орхих механизм*/ # цэс1 ул ли ул li( хөвөх: байхгүй; өргөн: 100%; ) # цэс1 ul li ул li a( дэлгэц: блок; текст хувиргах: байхгүй; өндөр: автомат; дүүргэх: 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 li:hover (арын дэвсгэр:#FDDC96;өнгө:#6572BC)

Одоо л болоо. Сургуулиа орхих механизм нь өөрөө нэг мөрөнд хэрэгждэг.

Энэ цэсээр арьсыг харна уу:

Цагаан будаа. 2 (хэвтээ унждаг цэс)

Унждаг цэс хэрхэн ажилладаг тухай демо, мөн эх сурвалжийг татаж авах холбоосыг доор харуулав. (Демо нь энэ хуудасны дээд талд унадаг цэсээр нээгдэх бөгөөд шинэ цонхонд нээх 🙂 эсвэл хулганы дугуй дээр дарах шаардлагагүй)

Бүрэн өргөн хэвтээ унждаг цэс

Та нарын ихэнх нь миний дээр үзүүлсэн цэсүүд нь өнгөрсөн үеийн сайн уу, зарим талаараа таны зөв гэж хэлж, намайг зэмлэж болно, гэхдээ би саяхан ийм цэстэй зохион байгуулалтыг харсан.

Та дээрх жишээг татаж авсан гэж найдаж байна. Манай Html хэвээр байгаа ч бид CSS-г бүрэн өөрчлөх болно. Та зүгээр л эндээс CSS кодыг аваад татаж авсан жишээн дээр буулгах эсвэл хэрхэн ажилладагийг демо горимоор үзэх боломжтой.

#container( өргөн:1000px; өндөр:авто; зах:0px авто; padding-top:10px; ) #цэс1(байрлал:харьцангуй; дэлгэц:блок; өргөн:100%; өндөр:авто; z-индекс:10; ) # цэс1 ul( байрлал:харьцангуй; дэлгэц: блок; зах: 0px; дүүргэлт: 0px; өргөн: 100%; өндөр: автомат; жагсаалтын загвар: байхгүй; дэвсгэр: #F3A601; ) # цэс1 > ul( текстийг зэрэгцүүлэх: justify; font-size:1px; line-height:1px; :inline-block; vertical-align:left; menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( байрлал:абсолют; дээд:36px; зүүн :0px; дэлгэц: байхгүй; өргөн: автомат; дэвсгэр:#EBBD5B; хоосон зай: одоо ороолт; ) #menu1 ul li: last-child ul(/*сүүлийн зүйлийг баруун захад хавсаргана*/ зүүн:авто; баруун:0px; ) #menu1 ul li:hover ul(дэлгэц:блок;)/*энэ шугам нь механизмыг хэрэгжүүлдэг уналтууд*/ #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 li:hover (арын дэвсгэр: #FDDC96;өнгө:#6572BC)

Энэ жишээ нь эхнийхээс ялгаатай бөгөөд унждаг цэс нь бүх цэсийн өргөнөөс хамаарч сунадаг.

Маш урт цэсийн зүйлсийн хувьд энэ сонголт нь тийм ч тохиромжтой биш байж магадгүй, учир нь тэдгээр нь хязгаарыг давах болно. Энэ өмчийг идэвхгүй болгохын тулд "white-space:nowrap;" өмчийг олоход л хангалттай. Сонгогч дээр # цэс1 ul li ul, устгана уу.

Доор та демо үзэх эсвэл хэвтээ унждаг цэсийн эх сурвалжийг татаж авах боломжтой.

Тусгаарлагч байхгүй бол энэ цэс үнэхээр тийм харагдаж байна. Тусгаарлагчийг HTML-д гараар нэмж болно, гэхдээ хэрэв танд WordPress гэх мэт CMS байгаа бол тэдгээрийг гараар нэмэх нь тийм ч тохиромжтой биш юм.

Хуваагчтай хэвтээ унждаг цэс

гэх мэт хэдэн арван сонголт байдаг цэвэр CSSцэсийн зүйлсийн хооронд зурвас (тусгаарлагч) нэмнэ. Би ::өмнө эсвэл::дараа, эсвэл илүү энгийн хүрээ-зүүн, хил-баруун гэсэн сонголтуудыг давхардуулахгүй.

Байрлал нь маш гайхалтай хийгдсэн тул jqueryгүйгээр хийх боломжгүй нөхцөл байдал байдаг.

Бидний HTML код хэвээрээ, бид зөвхөн jQuery номын сан болон түүнийг ашигладаг файлыг хамгийн эхэнд оруулсан болно:

Баруун хойш .

Таны ойлгож байгаагаар та файл үүсгэх хэрэгтэй script-menu-3.jsмөн энэ жижиг кодыг энд оруулаарай:

$(баримт бичиг).бэлэн(функц())( $("#цэс1 > ul > li:not(:сүүлийн хүүхэд)").дараа(""); ));

Ийм цэсний CSS хэв маягийг байгаагаар нь үлдээх хэрэгтэй + энэ хэсгийг төгсгөлд нь нэмнэ үү:

#menu1 ul li.razd( өндөр:28px; өргөн:1px; дэвсгэр:#ffffff; margin-top:4px; )

jQuery-д зааглагч бүхий хэвтээ унждаг цэс дараах байдалтай харагдана.


Та демо горимоор үзэх эсвэл доорх хэвтээ цэсийн загварыг татаж авах боломжтой.

Энэхүү шийдлийн давуу талууд нь:

• цэсийг динамикаар зурах болно;
• тусгаарлагчаас догол мөр хүртэлх догол мөр хаа сайгүй ижил байна;
• илүү үзэсгэлэнтэй, уян хатан загвар.
Хэвтээ олон түвшний унадаг цэс CSS+HTML

Бид хулгана дээр байрлах олон түвшний унждаг цэсүүдийн тухай ярьж байгаа тул тэдгээрийг дэд бүлгүүдэд хуваах нь зүйтэй болов уу.

• тал руу нь заах үед vip pad-тай
• Гурав дахь түвшний унадаг цэстэй

Миний жишээн дээр би 3 түвшний олон түвшний CSS цэсийг харуулах болно, дараа нь юу хийх хэрэгтэйг таахад хэцүү биш байх болно гэж бодож байна.

Хулганы хажуугийн самбар бүхий олон түвшний унадаг цэс

Эхлээд бид HTML-ээ бага зэрэг засах хэрэгтэй. Тэнд 3-р түвшний хувьд хэд хэдэн мөр нэмэгдэх болно:

• гэр
• Бидний тухай
• Бидний үйлчилгээ
  • Манай үйлчилгээ №1
    • Үйлчилгээний нэмэлт 1
    • Үйлчилгээний нэмэлт 2
  • Манай үйлчилгээ №2
    • Үйлчилгээний нэмэлт 3
    • Үйлчилгээний нэмэлт 4
  • Манай үйлчилгээ №3
  • Манай үйлчилгээ №4
  • Үйлчилгээ 5
• Мэдээ
• Харилцагчид
  • Замын зураг
    • Газрын зургийн нэмэлт
    • Газрын зургийн нэмэлт 2
  • Санал хүсэлтийн маягт

#container( өргөн:1000px; өндөр:авто; зах:0px авто; padding-top:10px; ) #цэс1(байрлал:харьцангуй; дэлгэц:блок; өргөн:100%; өндөр:авто; z-индекс:10; ) # цэс1 ul( байрлал:харьцангуй; дэлгэц: блок; зах: 0px; дүүргэлт: 0px; өргөн: 100%; өндөр: автомат; жагсаалтын загвар: байхгүй; дэвсгэр: #F3A601; ) # цэс1 > ul( текстийг зэрэгцүүлэх: justify; font-size:1px; line-height:1px; :харьцангуй дэлгэц: inline-block; text-align:left margin-top: 4px; -family:Arial, sans-serif color:#ffffef; text-decoration:none; box-sizing:border-box; (арын дэвсгэр:#EBBD5B; өнгө:#2B45E0; ) # цэс1 ул ли ул( байрлал: үнэмлэхүй; дээд: 36 пиксел; зүүн: 0 пиксел; дэлгэц: байхгүй; өргөн: автомат; дэвсгэр: # EBBD5B; цагаан зай: одоо ороолт; ) # цэс1 > ул > li: сүүлчийн хүүхэд > ul(/*сүүлийн зүйл баруун захад бэхлэгдэх болно*/ зүүн:авто; баруун:0px; ) #цэс1 ul li:hover > ul(дэлгэц:блок;)/*энэ мөр нь орхих механизмыг хэрэгжүүлдэг* / # цэс1 ул ли ул li( дэлгэц: блок; өргөн: автомат; ) # цэс1 ул ли ул ли а( дэлгэц: блок; текст хувиргах: байхгүй; өндөр: автомат; дэвсгэр: 7px 45 пиксел; өргөн: 100%; хайрцаг -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( дээд:0px; зүүн:100%; дэлгэц: байхгүй; дэвсгэр:#fddc96; ) #menu1 > ul > li:сүүлчийн хүүхэд > ул ул(зүүн:авто; баруун:100%;) #меню1 ул ли ул ли ул а(өнгө:#F38A01;)

Бид өмнөх жишээн дээрх файлуудыг jQuery-д хуулж авдаг. Цэсийг ядаж бага зэрэг сайхан харагдуулахын тулд би хуваагчийг орхихоор шийдсэн. Мэдээжийн хэрэг та тэдэнгүйгээр үүнийг хийж чадна.

Ийм зүйл тохиолдсон:
Дусал баруун болон дунд хэсэгт хэрхэн харагдахыг харуулахын тулд би нэг дор 2 арьс хийсэн.

Доор та демо үзэж, жишээ татаж авах боломжтой.

Хулганы дээр гарч ирэх самбар бүхий олон түвшний унждаг цэс

Гарчиг дээр бага зэрэг тос байгаа ч энэ нь ажиллах болно, гол зүйл бол код юм.

Энэ жишээний мөн чанар нь бүрэн өргөнтэй хэвтээ унждаг цэсийг бүрэн өргөнтэй доош буулгах + олон түвшний цэс үүсгэх явдал юм.

Би HTML кодыг өөрчлөхгүй, үүнийг өмнөх жишээнээс авч болно. Бид мөн jQuery дээр тусгаарлагчийг үлдээдэг.

Зөвхөн CSS бүрэн өөрчлөгдөх болно:

#container( өргөн:1000px; өндөр:авто; зах:0px авто; padding-top:10px; ) #цэс1(байрлал:харьцангуй; дэлгэц:блок; өргөн:100%; өндөр:авто; z-индекс:10; ) # цэс1 ul( байрлал:харьцангуй; дэлгэц: блок; зах: 0px; дүүргэлт: 0px; өргөн: 100%; өндөр: автомат; жагсаалтын загвар: байхгүй; дэвсгэр: #F3A601; ) # цэс1 > ul( текстийг зэрэгцүүлэх: justify; font-size:1px; line-height:1px; :харьцангуй: inline-block; vertical-align:left); -top:4px; ) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; font-family:Arial, sans-serif; line-height:1.3em; font-weight:bold; height:36px; a:hover, #menu1 ul li:hover > a( background:#EBBD5B; өнгө:#2B45E0; ) #menu1 ul li ul( байрлал: абсолют; дээд: 36 пиксел; зүүн: 0 пиксел; дэлгэц: байхгүй; өргөн: 100%; дэвсгэр: # EBBD5B; ) # цэс1 > ul > li > ul:: дараа( clear:both; float:none; өргөн:100% өндөр:0px; блок; width:30%, float:left; 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( background:#FDDC96; color :#6572BC; ) #menu1 ul li ul li ul( дээд: 0px; зүүн: 100%; дэлгэц: байхгүй; дэвсгэр: # fddc96; z-индекс: 15; ) # цэс1 ул ли ул ли ул li(дэлгэц: блок ; 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/ эх хуудсанд зочлохыг би танд зөвлөж байна, тэнд унждаг цэсийн бүх жишээ, төрлийг цуглуулсан болно.

Сайтын цэсний нэлээн нийтлэг зохион байгуулалт, түүнтэй сав нь хуудсан дээр байгаа бүхэл бүтэн өргөнийг эзэлдэг. Энэ тохиолдолд эхний зүйл нь зүүн ирмэгтэй, сүүлчийнх нь баруун талд зэргэлдээх бөгөөд бүх элементүүдийн хоорондох зай тэнцүү байна. Өнөөдөр бид үүнийг хэрхэн яаж хийхийг танд хэлэх болно.

Хэзээ резинэн цэсийг хэрэгжүүлэх жишээг бид танд санал болгож байна CSS тусламжтаны нөөцийн төлөө. Энэ цэсэнд зүйлүүд нэг мөрөнд байрлана. Javascript ашиглахгүй. Цэсийн агуулгыг ердийн жагсаалтад хавсаргана. Ийм цэсний гол онцлог нь түүний олон талт байдал бөгөөд энэ нь зүйлийн тоо, урт нь ямар ч байж болно гэдгийг илэрхийлдэг.

Үүнийг хэрхэн хэрэгжүүлэх вэ?

Програмист бүр тухайн асуудлыг шийдэх өөр аргыг санал болгож чадна. Энэ бүхэн түүний төсөөлөл, мэргэжлийн түвшин, чадвараас хамаарна. Энэ асуудлыг шийдэх хамгийн түгээмэл шийдэл бол хүснэгт ашиглах явдал юм. Мөн олон хүн javascript ашиглахыг санал болгож байна. Дэлгэцийн шинж чанарыг утгын хүснэгт эсвэл хүснэгтийн нүдээр ашиглахыг санал болгож буй хүмүүсийн урмыг хугалахаар би яарав. Энэ арга нь хөтөч хоорондын нийцтэй биш юм.

Бидний шийдэл

Бидний санал болгож буй саналууд нь 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; /* аргын гаж нөлөөг арилгана */ өндөр: 20px; /* шаардлагагүй зүйлийг арилгана */ курсор: default ; /* курсорын анхны хэлбэрийг тохируулна */ захын зай : 50px 100px 0 100px дэвсгэр: #eee; padding: 5px; color: #444; ) a : hover ( color: #ff0000; ) ul: after ( /* хоёр дахь мөрийг үүсгэх аргыг боловсруулах */ агуулга: "1" ; захын зүүн: 100 %; өндөр: 1px; халих: далд дэлгэц: inline- блок )

Хуучин сайн Internet Explorer дээр ажиллахын тулд та дараах кодыг CSS-д нэмж оруулах ёстой

ul ( z- индекс: илэрхийлэл(ажлын цагийн хэв маяг. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" >")); ) ul .сүүлийн (зүүн талын захаас: 100%; ) * html ul ( /* зөвхөн ie6 хэрэгтэй */ өндөр: 30px; )

Шаардлагатай өмчийн үнэ цэнэ, кодыг зааж өгсний дараа бид энэхүү резинэн цэсийг авна.



Аргын сул тал
• Эзлэхүүний код
• Анги сонгогчоор дамжуулан элементийн идэвхтэй төлөвийг тодорхойлох боломжгүй. Энэ нь догол мөр дэх үгсийн завсарлагааны улмаас үүсдэг (хэрэв байгаа бол). Энэ асуудлын шийдэл нь жагсаалтын элементүүдийн дотор өөр контейнер нэмэх явдал юм.
• Унждаг цэсний хувьд халих сөрөг нөлөөллийн улмаас та кодыг өөрчлөх хэрэгтэй.
Энэ нь ямар хөтөч дээр ажилладаг вэ?

6.0+	6.0+	10.5+	5.0+	3.6+	-	-