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

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

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

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

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

унждаг цэстэй хэвтээ цэс хийх css жагсаалт(ul li жагсаалтууд дээр) 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; width: auto; өндөр:1.3em; font-weight:pupcase :border-box ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; ) #menu1 ul li; ul( байрлал: үнэмлэхүй; дээд: 36 пиксел; зүүн: 0 пиксел;

дэлгэц: байхгүй;

өргөн: автомат;

дэвсгэр:#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;

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

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

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

Шууд дараа нь.

Таны ойлгож байгаагаар та файл үүсгэх хэрэгтэй скрипт цэс-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; дэлгэц :block; width:30% float:left; 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( background:#FDDC96 өнгө:#6572BC; : блок; хөвөх: байхгүй; өргөн: 100%;) # цэс1 ul li ul ul a( color:#F38A01; border-top:1px solid #ffffff; )

Цэс ингэж харагдах болно: Цорын ганц зүйл бол сайт хангалттай зайтай байх ёстой, учир нь баруун талд байгаа сүүлийн зүйлд доош буулгах зай байхгүй байна. Энэ асуудлыг nth-хүүхэдээр шийдэж болно, гэхдээ би санаа зовсонгүй.

Энэ бол миний хувьд, ядаж нэг жишээ танд тохирсон байх гэж найдаж байна. Анхаарал тавьсанд баярлалаа.

Энэ нь тэдэнд ч, надад ч ашигтай байх болно :)

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

Мөн https://site/vypadayushhee-menu/ эх хуудсанд зочлохыг би танд зөвлөж байна, тэнд унждаг цэсийн бүх жишээ, төрлийг цуглуулсан болно.

Сайн байна уу, эрхэм блог уншигчид. Өнөөдөр бид цэвэр CSS3 ашиглан гоё, өнгөлөг, унждаг цэсийг хэрхэн хийхийг сурах болно. Маш том нэмэлт энэ цэсХамгийн гол нь энд ямар ч скрипт ашигладаггүй, зөвхөн CSS-г ашигладаг.

Мөн бид хэрэглэгч өөрөө сонгох боломжтой хэд хэдэн өнгөөр ​​хийх болно. Энэ нь маш сайхан, практик харагдаж байна гэдгийг би үнэнээр хэлье.

За одоо манайх болгоё.

Цэвэр CSS3 ι HTML ашигладаг вэб сайтын унадаг цэс болон өнгөт цэс

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

• Гэр
• Цэс 1
  • Дэд цэс 1
  • Дэд цэс 2
  • Дэд цэс 3
  • Дэд цэс 4
  • Дэд цэс 5
• Цэс 2
  • Дэд цэс 2-1
  • Дэд цэс 2-2
  • Дэд цэс 2-3
  • Дэд цэс 2-4
  • Дэд цэс 2-5
  • Дэд цэс 2-6
  • Дэд цэс 2-7
  • Дэд цэс 2-8
• Цэс 3
  • Дэд цэс 3-1
  • Дэд цэс 3-2
  • Дэд цэс 3-3
  • Дэд цэс 3-4
  • Дэд цэс 3-5
• Цэс 4
• Цэс 5
• Цэс 6

CSS

Одоо цэс болон өнгөний CSS загварыг шууд тохируулъя. Энд CSS код өөрөө байна:

#nav,#nav ul (жагсаалтын хэв маяг: гадна байхгүй; захын зай: 0; дэвсгэр: 0; ) #nav (арын дэвсгэр өнгө: #000000; хилийн радиус: 5px 5px 5px 5px; хайрцагны сүүдэр: 3px 3px 3px rgba(0, 0, 0, 0.5) дэлгэц: 10px байрлал: хүрээ - өргөн: 0 5px 5px rgba(0, 0, 0, 0.5); hidden: 20px 0 10px moz-transform: scaleY(0); -webkit-transform: -ms-transform-origin: 0 0; ; -webkit-transform-origin: 0 0; -transform 0.1s linear; -ms-transform: -o-transform 0.1s linear: -webkit -transform 0.1s linear ) #nav li ( float: зүүн;

Даалгавар

CSS болон HTML хэрэгслүүдийг ашиглан унждаг цэсийг үүсгэ.

Шийдэл

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

Унждаг цэс ul.menu( padding: 3px; /* padding арилгах */ margin-top: 50px; /* гоо сайхны хувьд үүнийг доош зөөх */ text-align: center; /* spask элементүүдийг голд нь зэрэгцүүлэх */ ) ul.menu > li( list-style: none; /* жагсаалтын тэмдэглэгээг арилгах */ дэлгэц: inline-block; /* жагсаалтыг хэвтээ байдлаар цэгцлэх */ background-color: #D87171; padding: 5px 15px; ) /* цэсэн дэх холбоосын хэв маяг */ ul.menu > li > a( өнгө: #FFFFFF; текст-чимэглэл: байхгүй; ) /* хулганыг зөөх үед холбоосын хэв маягийг тохируулах */ ul.menu > li > a:hover( text -чимэглэл: доогуур зураас;

• Гэр
• Харилцагчид
• Үйлчилгээ

Бид дараах жагсаалтыг гаргав.

Зураг 1. Бэлтгэл ажил.

Анхаарна уу: линк дээр хулганыг аваачихад түүний хэв маяг өөрчлөгддөг. Үүнийг :hover псевдо анги ашиглан хэрэгжүүлдэг. Энэхүү псевдо анги нь хулганы товчийг дарахгүйгээр курсорыг чиглүүлэхэд тухайн элементийн хэв маягийг тодорхойлдог. Хэрэв товчлуур дарвал энэ нь өөр нэг псевдо анги юм.

Одоо асуудлаа шийдэхээр явцгаая. "Үйлчилгээ" гэсэн зүйлийн унждаг цэсийг хийцгээе, "Худалдан авах", "Худалдах", "солилцох" гэсэн унадаг хэсгүүдийг нэмнэ үү. Эдгээр зүйлүүд нь шошгонд байрлуулсан тусдаа жагсаалт юм

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

Унждаг цэс ul.menu( padding: 3px; /* padding арилгах */ margin-top: 50px; /* гоо сайхны хувьд үүнийг доош зөөх */ text-align: center; /* spask элементүүдийг голд нь зэрэгцүүлэх */ ) ul.menu > li( list-style: none; /* жагсаалтын тэмдэглэгээг арилгах */ дэлгэц: inline-block; /* жагсаалтыг хэвтээ байдлаар цэгцлэх */ background-color: #D87171; padding: 5px 15px; ) /* цэсэн дэх холбоосын хэв маяг */ ul.menu > li > a( өнгө: #FFFFFF; текст-чимэглэл: байхгүй; ) /* хулганыг зөөх үед холбоосын хэв маягийг тохируулах */ ul.menu > li > a:hover( text -чимэглэл: доогуур зураас; ) /* дотоод цэсийн хэв маягийг тохируулах */ .menuInner( list-style: none; padding: 4px; border: 1px solid #000000; border-radius: 5px; background-color: #FFFFFF; text - тэгшлэх: зүүн )

• Гэр
• Харилцагчид
• Үйлчилгээ
  • Худалдан авах
  • Зарна
  • Солилцоо

Одоо бидэнд энэ жагсаалт байна:

Зураг 2. Бэлтгэл ажил.

Мэдээжийн хэрэг, энэ нь бидэнд хэрэгтэй зүйл биш юм. Анхдагч байдлаар, энэ жагсаалтыг нуух ёстой бөгөөд зөвхөн хулганаар дарахад л харагдах болно. Та дүрмийн дүрмийг ашиглан элементийг нууж болно (дэлгэц: none). Мөн курсорыг аваачих үед дүрмүүдийг дахин харагдуулах замаар идэвхжүүлэх хэрэгтэй (дэлгэц: inline-block).

Унждаг цэс ul.menu( padding: 3px; захын дээд: 50px; текстийг зэрэгцүүлэх: төвд; ) ul.menu > li( жагсаалтын загвар: байхгүй; дэлгэц: inline-block; дэвсгэр өнгө: #D87171; дэвсгэр: 5px 15px; ) /* цэсний холбоосын хэв маягийг тохируулна уу */ ul.menu > li > a( өнгө: #FFFFFF; text-decoration: none; ) /* хулгана дээр байрлах холбоосын хэв маягийг тохируулна уу */ ul.menu > li > a :hover( text-decoration: underline; ) /* дотоод цэсийн хэв маягийг тохируулах */ .menuInner( display: none; /* үүнийг үл үзэгдэх болгох */ list-style: none; padding: 4px; border; хүрээ : 1px solid #000000; border -radius: 5px background-color: #FFFFFF; text-align: left; : блок;

• Гэр
• Харилцагчид
• Үйлчилгээ
  • Худалдан авах
  • Зарна
  • Солилцоо

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

Элементийг бусад элементүүдийн дэлгэцэнд нөлөөлөхгүйгээр харуулахын тулд үүнийг үнэмлэхүй утгатай байрлуулах ёстой.

Унждаг цэс ul.menu( padding: 3px; захын дээд: 50px; text-align: center; ) ul.menu > li( байрлал: харьцангуй; /* байршил нэмэх */ жагсаалтын загвар: байхгүй; дэлгэц: inline-block арын дэвсгэр өнгө: #D87171; 5px 15px; /* өндөрт нэмэх */ ) /* цэсэнд холбоосын хэв маягийг тохируулах */ ul.menu > li > a( color: #FFFFFF; text-decoration: none; ; ) /* курсорыг зөөвөрлөхдөө холбоосын хэв маягийг тохируулах */ ul.menu > li > a:hover( text-decoration: underline; ) /* дотоод цэсийн загварыг тохируулах */ .menuInner( display: none; /* үл үзэгдэх болгох */ list-style: none; border: 1px solid #000000 background-color: #FFFFFF text-align: left) .menu > li:hover > .menuInner( : блок; байрлал: үнэмлэхүй; дээд: 30px;

• Гэр
• Харилцагчид
• Үйлчилгээ
  • Худалдан авах
  • Зарна
  • Солилцоо

Бид энд юу хийсэн:

байрлал тогтоох дүрэм (байрлал: харьцангуй;). Энэ нь үүрлэсэн жагсаалтын үнэмлэхүй байршлын координатын тайланг дэлгэцийн булангаас биш харин энэ блокийн зүүн дээд булангаас эхлүүлэхийн тулд хийгддэг.

Үндсэн элементэд нэмсэн

дүрэм (өндөр: 20px;). Унждаг жагсаалтыг байрлуулахад илүү тохиромжтой болгохын тулд бид түүний өндрийг тохируулсан.

Үнэмлэхүй байрлалыг (байрлал: үнэмлэхүй ;) унадаг жагсаалтад тохируулж, координатыг тохируулна уу: дээд ба зүүн .

Унждаг цэс одоо зөв ажиллаж байна.

Зураг 3. Эцсийн хувилбар.

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

Боловсролын асуудал шийдэгдсэн. Баяртай.

Хабр, сайн уу!

Codepen дээр маш их зүйл гарч ирдэг сайн шийдвэрүүдянз бүрийн мэргэжилтнүүдээс авсан бөгөөд тэдний хамгийн сайныг нэг дор цуглуулах ёстой гэдэгт би итгэдэг. Тиймээс 2 жилийн өмнөөс би компьютер дээрээ янз бүрийн сэдвээр сонирхолтой скриптүүдийг хадгалж эхэлсэн.

Би тэдгээрийг mr cloud IDE бүтээгдэхүүний бүлэгт нийтэлдэг байсан. Gefest, эдгээр нь 5-8 шийдлийн угсралт байсан. Харин одоо би өөр өөр сэдвээр (товчлуур, цэс, зөвлөмж гэх мэт) 15-30 скрипт цуглуулж эхэлсэн.

Ийм том багцыг харуулах ёстой илүүмэргэжилтнүүд. Тийм учраас би тэднийг Habr дээр нийтэлж байна. Тэд танд хэрэг болно гэж найдаж байна.

Энэ тоймд бид олон түвшний цэсийг авч үзэх болно.

Хавтгай хэвтээ навигаци

Гөлгөр харагдах дэд цэс бүхий үзэсгэлэнтэй навигацийн самбар. Код нь сайн бүтэцтэй бөгөөд js ашигладаг. Ашигласан функцуудаас харахад ie8+ дээр ажилладаг.
http://codepen.io/andytran/pen/kmAEy

Материалын цэсийн толгой хэсэг нь зэрэгцүүлсэн унждаг цэстэй

Хоёр баганатай дэд цэстэй дасан зохицох холбоосын мөр. Бүх зүйл css болон html дээр хийгддэг. ie8 дээр дэмжигдээгүй css3 сонгогчийг ашигласан.
http://codepen.io/colewaldrip/pen/KpRwgQ

Гөлгөр баян хуур унадаг цэс

Гөлгөр нээгдэх элементүүд бүхий загварлаг босоо цэс. Transition, transform js кодыг ашигладаг.
http://codepen.io/fainder/pen/AydHJ

Цэвэр CSS Dark Inline Navigation цэс

Иониконуудын дүрс бүхий бараан босоо навигацийн самбар. JavaScript ашиглаж байна. ie8-д энэ нь хөдөлгөөнт дүрсгүйгээр ажиллах магадлалтай.
http://codepen.io/3lv3n_snip3r/pen/XbddOO

Хөдөлгөөнт дүрс бүхий цэвэр CSS3 мега унждаг цэс

Хэвтээ ба босоо гэсэн хоёр гаралтын форматтай загварлаг цэс. Дүрс болон css3 хөдөлгөөнт дүрсийг ашигладаг. Энэ нь ie8 дээр үнэхээр аймшигтай харагдах болно, гэхдээ бусад хөтөч дээр бүх зүйл сайхан байна.
Босоо холбоос: http://codepen.io/rizky_k_r/full/sqcAn/
Хэвтээ холбоос: http://codepen.io/rizky_k_r/pen/xFjqs

CSS3 унадаг цэс

Том элемент бүхий хэвтээ цэс, унадаг холбоосуудын жагсаалт. js-гүй цэвэр, минималист код.
http://codepen.io/ojbravo/pen/tIacg

Энгийн цэвэр CSS унждаг цэс

Энгийн боловч загварлаг хэвтээ цэс. Font-awesome ашигладаг. Бүх зүйл css болон html дээр ажилладаг, js-гүй. Энэ нь ie8-д ажиллах болно.
http://codepen.io/Responsive/pen/raNrEW

Bootstrap 3 мега унадаг цэс

Онлайн дэлгүүрүүдэд зориулсан маш сайн шийдэл. Хэд хэдэн түвшний категори, том зургуудыг (жишээлбэл, худалдаанд гарсан бүтээгдэхүүн) харуулна. Энэ нь boostrap 3 дээр суурилдаг.
http://codepen.io/organizedchaos/full/rwlhd/

Хавтгай навигаци

Гөлгөр дэд цэс бүхий загварлаг навигацийн самбар. Хуучин хөтчүүдэд энэ нь асуудлыг харуулах болно.
http://codepen.io/andytran/pen/YPvQQN

3D үүрлэсэн навигаци

Js-гүй маш гайхалтай хөдөлгөөнт дүрс бүхий хэвтээ цэс!
http://codepen.io/devilishalchemist/pen/wBGVor

Responsive Mega цэс - Навигаци

Хэвтээ мэдрэмжтэй цэс. Сайхан харагдаж байна, гэхдээ гар утасны хувилбарЖаахан доголон байна. CSS, html, js ашигладаг.
http://codepen.io/samiralley/pen/xvFdc

Цэвэр Css3 цэс

Жинхэнэ цэс. js-гүй энгийн бөгөөд цэвэр кодтой. "Хөөх" эффект хийхэд ашиглаарай.
http://codepen.io/Sonick/pen/xJagi

Бүрэн CSS3 унадаг цэс

Нэг давхарга бүхий өнгөлөг унждаг цэс. Font-awesome, html болон css-ийн дүрсүүдийг ашигладаг.
http://codepen.io/daniesy/pen/pfxFi

Зөвхөн Css3 унадаг цэс

Гурван түвшний үүртэй нэлээд сайн хэвтээ цэс. jsгүйгээр ажилладаг.
http://codepen.io/riogrande/pen/ahBrb

Унтраах цэсүүд

Элементүүдийн жагсаалтын харагдах байдлын анхны эффект бүхий минималист цэс. Энэхүү шийдэл нь JavaScript-гүй байгаад би баяртай байна.
http://codepen.io/kkrueger/pen/qfoLa

Цэвэр CSS унадаг цэс

Анхдагч, гэхдээ үр дүнтэй шийдэл. Зөвхөн css болон html.
http://codepen.io/andornagy/pen/xhiJH

Татах цэс - Цэсийн харилцан үйлчлэлийн тухай ойлголт

Сонирхолтой цэсийн үзэл баримтлал гар утас. Би урьд өмнө хэзээ ч ийм зүйл харж байгаагүй. Html, css, javascript ашигладаг.
http://codepen.io/fbrz/pen/bNdMwZ

Энгийн унадаг цэс хийх

Цэвэр бөгөөд энгийн код, js байхгүй. Энэ нь ie8 дээр ажиллах нь гарцаагүй.
http://codepen.io/nyekrip/pen/pJoYgb

Цэвэр CSS уналт

Шийдэл нь муу биш, гэхдээ хэтэрхий олон анги ашигладаг. js байхгүй байгаад би баяртай байна.
http://codepen.io/jonathlee/pen/mJMzgR

Унждаг цэс

Хамгийн бага JavaScript код бүхий сайхан босоо цэс. JQuery ашиглагдаагүй байна!
http://codepen.io/MeredithU/pen/GAinq

CSS 3 унадаг цэс

Нэмэлт тайлбар бүхий хэвтээ цэс нь таны вэбсайтыг сайхан чимэглэх боломжтой. Код нь энгийн бөгөөд ойлгомжтой. Javascript ашиглагдаагүй байна.
http://codepen.io/ibeeback/pen/qdEZjR

Маш олон кодтой (html, css, js) сайхан шийдэл. 3 дэд цэсийн форматыг үүсгэсэн. Энэхүү шийдэл нь онлайн дэлгүүрүүдэд тохиромжтой.
http://codepen.io/martinridgway/pen/KVdKQJ

CSS3 цэсний уналт (тусгай шийдэл)!

Арван гурван (13) хөдөлгөөнт дүрс бүхий харанхуй хэвтээ цэс! Үүнийг уншихыг танд зөвлөж байна, энэ нь өдөр тутмын амьдралд хэрэг болно.
http://codepen.io/cmcg/pen/ofFiz

P.S.
23 шийдлийн цуглуулга танд таалагдсан гэж найдаж байна. Хэрэв та тэдгээрийг үргэлжлүүлэн уншихыг хүсвэл доорх судалгаанд хамрагдаарай.
Бүгдээрээ ажлаа сайхан өнгөрүүлээрэй.

Вэбсайтыг ачаалах хугацаа, ашиглахад хялбар байдал нь хамгийн чухал зүйл юм чухал талууд. Тиймээс, та сайтаа нэмэлт JavaScript болон том зургуудаар дүүргэж болохгүй. Хэрэв та үзэсгэлэнтэй CSS унадаг цэсийг хүсч байвал яах вэ? Үүнийг хийхийн тулд та өнөөдөр JavaScript ашиглах шаардлагагүй, зөвхөн CSS ашиглан унадаг цэсийг хийж болно. Энэ зааварт та CSS унадаг цэсийг хэрхэн үүсгэх талаар сурах болно.

Энэхүү гарын авлагыг эхлүүлэхийн өмнө танд дараахь зүйлс хэрэгтэй болно.

• Өөрийн хостингын хяналтын самбарт хандах

Алхам 1 - HTML файл үүсгэх

Эхлээд та хоосон HTML файл үүсгэх хэрэгтэй. Энэ зааварт бид бүтээх болно шинэ файл menu.html гэж нэрлэдэг. Үүний тулд бид ашиглах болно Файл менежер. Гэсэн хэдий ч (компьютер дээрээ menu.html файл үүсгээд хостинг дээрээ байршуулах) ашиглан ижил үр дүнд хүрч болно.

Алхам 2 - HTML цэсийн кодыг нэмэх

Манай цэс нь үндсэн цэс болон таван дэд хэсгээс бүрдэх болно. href атрибут доторх хаягийг өөрчилснөөр та дэд хэсэг бүрийг сайтынхаа өөр өөр хуудастай холбож болно. Элемент бүр өөр өөр ангитай болохыг та анзаарсан байх - dropdown , mainmenubtn болон dropdown-child . Ангиуд нь CSS дүрмийг хэрэгжүүлэх шаардлагатай.

Үндсэн цэс Дэд хэсэг 1 Дэд хэсэг 2 Дэд хэсэг 3 Дэд хэсэг 4 Дэд хэсэг 5

Ямар ч CSS дүрмийг ашиглаагүй бол дараах байдалтай байна.

Таны харж байгаагаар ердийн HTML цэс оновчтой биш бөгөөд тийм ч сайхан харагддаггүй. Гэсэн хэдий ч бид CSS дүрмийг хэрэглэж, дараагийн алхамд үүнийг өөрчлөх болно.

Алхам 3 - CSS унадаг цэсийг хэрхэн үүсгэх

Бид HTML кодоо дараах CSS дүрмийг ашиглан загварчилдаг.

Mainmenubtn ( дэвсгэр өнгө: улаан; өнгө: цагаан; хүрээ: байхгүй; курсор: заагч; дүүргэгч: 20 пиксел; захын дээд: 20 пиксел; ) .mainmenubtn: хулгана (арын дэвсгэр өнгө: улаан; ) .dropdown ( байрлал: харьцангуй; дэлгэц: inline-block; ) .dropdown-child (дэлгэц: байхгүй; дэвсгэр өнгө: хар; хамгийн бага өргөн: 200px; ) .dropdown-child a (өнгө: цагаан; дэвсгэр: 20px; текстийн чимэглэл: байхгүй; дэлгэц : блок; .dropdown:hover .dropdown-child ( дэлгэц: блок; )

Таны харж байгаагаар .dropdown-child анги нь харуулах CSS дүрэмтэй: none . Гэсэн хэдий ч, хэрэглэгч (.dropdown:hover) үндсэн элемент дээр аваачихад энэ дүрэм нь дэлгэцээ: block болгож өөрчлөх болно. Энэ нь унждаг цэсний эффектийг бий болгоно.

Манай menu.html файлын эцсийн гаралтыг доор харуулав.

.mainmenubtn (арын дэвсгэр өнгө: улаан; өнгө:цагаан ;хил: байхгүй; ;курсор: заагч; дэвсгэр: 20px ;захын дээд: өнгө:; ) .dropdown ( байрлал: харьцангуй; дэлгэц: inline-block; ) .dropdown-child ( дэлгэц: байхгүй; дэвсгэр өнгө: ;хар

; мин-өргөн: 200px

; ) .dropdown-child a ( өнгө:

; дэвсгэр:, өнгө, хэмжээг өөрчлөх. Цэсийг өөрийн хэрэгцээнд нийцүүлэн тохируулаарай.

Дүгнэлт

Энэхүү зааварчилгааг дуусгаснаар та CSS унадаг цэсийг хэрхэн үүсгэх талаар сурсан. Энэхүү гарын авлагад өгөгдсөн код нь маш энгийн бөгөөд таны сайтыг ачаалах хугацаанд нөлөөлөхгүй.

Заавар