Хамгийн энгийн зүйлийг ашиглан санаагаа хэрэгжүүлцгээе CSS. Дараагийн өгүүлэлд, хэрэв би санаж байгаа бол ашиглахтай ижил үр нөлөөг тайлбарлах болно jQuery. Гэхдээ одоохондоо энэ аргыг шинжилж эхэлцгээе. Гэхдээ эхлээд би эцэст нь юу болохыг харахыг санал болгож байна:
Юуны өмнө бичье HTMLМанай цэсийн код. Цэс нь энгийн байх болно. Жишээлбэл, энэ нь 2 зүйлтэй байх бөгөөд тус бүр нь дэд зүйл бүхий унадаг жагсаалттай байх болно.
Энд бүх зүйл ойлгомжтой, хамгийн энгийн 2 түвшний цэс гэж би бодож байна. Миний хэлснээр цэс нь хоёр үндсэн зүйлтэй бөгөөд шаардлагатай бол хүссэн хэмжээгээрээ нэмж болно. Дараа нь та бүх ид шидийг бүтээх хэв маягийг нэмэх хэрэгтэй :)
#slow_nav > ul( өргөн: 500px; зах: 25px auto 0; ) #slow_nav > ul > li( жагсаалтын загвар: байхгүй; дэлгэц: inline-block; байрлал:харьцангуй; дүүргэлт:0; ) #slow_nav a(текст- чимэглэл:none;) #slow_nav > ul > li > a( font-size:18px; padding:5px; background-color:#333; color:#fff; ) #slow_nav li ul( position:absolute; list-style: none; text-align: center: font-size: 0; ; -moz-transition:max-height 0.4s linear; /* end */ ) #slow_nav li:hover ul( max-height:300px; ) #slow_nav li ul li( background-color:#333; border-bottom: 1px хатуу #888; ) #slow_nav li ul li:slow_nav li ul li: last-child( border-bottom:none; ) #slow_nav li ul li a ( padding:5px 12px; color:#fff; display:block; ) #slow_nav li ul li :hover( background-color:#444; ) #slow_nav li ul li:first-child( margin-top:25px; байрлал: харьцангуй; ) #slow_nav li ul li:first-child:before( контент:""; байрлал: үнэмлэхүй; өргөн:1px; өндөр:1px; хүрээ:5px хатуу тунгалаг; хүрээ-доод-өнгө:#333; зүүн:10px; дээд :-10px)
CSS код нь жижиг биш боловч угаасаа нарийн төвөгтэй биш юм. Хэрэв та зохион байгуулалтын ур чадвартай бол юу, яаж гэдгийг хялбархан олж мэдэх боломжтой. Би зөвхөн зарим чухал зүйлийг онцолж хэлье.
Хамгийн эхний зүйл бол хөдөлгөөнт дүрс өөрөө юм. Шаардлагатай кодыг кодын тайлбар дээр тодруулсан болно - /* Эдгээр мөрүүд нь хөдөлгөөнт дүрсийг зөв ажиллуулахад шаардлагатай */. Та устгах боломжгүй, эс тэгвээс хөдөлгөөнт дүрс ажиллахаа болино. Энэ кодын хэсэгт бид эхлээд өндрийг тэг пиксел болгон тохируулсан -
хамгийн их өндөр: 0px;мөн өмчийг тохируулна уу халих:далд;манай хүүхдийн цэсийг, өөрөөр хэлбэл унждаг цэсийг нуух. Дараа нь бид хөтчүүд хоорондын өмчийг тохируулсан шилжилт, энэ нь хөдөлгөөнт дүрсийг гүйцэтгэх болно.
Webkit-шилжилт: хамгийн их-өндөр 0.4с шугаман; -moz-шилжилт: хамгийн их-өндөр 0.4с шугаман; шилжилт: хамгийн их-өндөр 0.4с шугаман;
Энд та зөвхөн хөдөлгөөнт дүрсний цагийг өөрчлөх боломжтой. Цагийг одоогоор 0.4 секунд гэж тохируулсан байна. Хөдөлгөөнт дүрсийг тохируулсны дараа үндсэн цэсэн дээр гүйлгэх үед шинэ өндрийг тохируулах шинж чанарыг нэмсэн.
#slow_nav li:hover ul( max-height:300px; )
Энд зураг байна. Өндөр нь тогтмол дээд хэмжээнд тохируулагдсан, хэрэв таны унждаг цэсний өндөр нь том бол утгыг том болгож өөрчил. Үгүй бол таны цэс 300 пиксел хүртэл таслагдах болно.
Энэ аргыг зөвхөн өөрөө бичсэн цэсэнд төдийгүй агуулгын удирдлагын системээр үүсгэсэн динамик цэсэнд хэрэглэж болно. WordPress. Үүнийг хийхийн тулд та хэв маягийг бага зэрэг өөрчлөх хэрэгтэй, тэгээд л болоо. Өөрөөр хэлбэл, та эхний HTML кодыг ашиглах шаардлагагүй, зөвхөн хэв маягийг ашиглах хэрэгтэй. Загварын хувьд та #slow_nav ID нэрийг өөрт байгаа зүйлээр солих хэрэгтэй бөгөөд магадгүй өөр жижиг зүйлийг засах хэрэгтэй. Би дэлгэрэнгүй ярихгүй. Тохиолдол бүр хувь хүний хандлагыг шаарддаг тул намайг уучлаарай :) Би нэг санаа, аргачлал өгсөн бөгөөд үүнийг ашиглах эсэхээ та өөрөө шийднэ.
Ингээд л болоо, анхаарал тавьсанд баярлалаа. 🙂
Мэндчилгээ! Хэрэв та анхлан зохион бүтээгч бол эрт орой хэзээ нэгэн цагт хуудсаа ямар нэгэн байдлаар идэвхжүүлж, бага зэрэг интерактив болгохыг хүсч байгаатай тулгарах болно. CSS анимацууд нь танд хамгийн сайн аргаар туслах болно. Гэхдээ та тэдгээрийг хаана, хэрхэн ашиглахаа мэдэх хэрэгтэй.
Өнөөдөр би танд хэлэх болно хоосон дээр унадаг цэсийг хэрхэн хийх вэCSSТэгээд түүнд хэрхэн гөлгөр байдлыг нэмэх вэ CSS хөдөлгөөнт дүрс ашиглан. Хэрэв та мэдэхгүй бол үндсэн зүйлтэй танилцах цаг болжээ.
Layout цэс HTML + CSS
Эхлээд бид ажиллах зүйлтэй болохын тулд энгийн нэг түвшний цэс үүсгэцгээе. Тодорхой болгохын тулд дизайнд хэт их санаа зовох хэрэггүй, энэ нь хангалттай байх болно;
Бидэнд юу байгаа вэ? "top_menu" танигчтай, энэ жагсаалтын элементүүдэд ороосон холбоос бүхий хамгийн энгийн дугааргүй жагсаалт. Бүх зүйл энгийн бөгөөд энгийн байдаг. Цэсний зүйл дээр хулганыг аваачихад өнгө өөрчлөгддөг... та бүгд үүнийг аль хэдийн мэдэж байгаа бөгөөд үүнийг хэрхэн хийхийг ойлгосон (би найдаж байна).
Хоёрдахь түвшний цэс нэмж байна
Олон түвшний цэс хийхийн тулд эхнийх нь дотор дугааргүй хоёр дахь жагсаалтыг нэмэх хэрэгтэй. Та эхний хичээл дээр хаа нэгтээ үүнийг даван туулсан гэж бодож байна. Мөн үүнийг зөвхөн манай жагсаалтын дотор биш, харин жагсаалтын элемент, өөрөөр хэлбэл шошгон дотор оруулах шаардлагатай байдаг. ли", "a" хаалтын шошгоны дараа шууд.
Бид үүрлэсэн жагсаалтыг "-тэй харьцангуйгаар байрлуулдаг. ли”, тэдгээр нь суулгагдсан байдаг. Тэгээд бүгд " ли» дээд түвшин нь ( хамаатан садан). Унждаг цэсийг манай дээд түвшний цэсний дараа ШУУД байрлуулахын тулд энэ нь (унадаг цэс - " дотоод цэс"гэж зааж өгөх ёстой
Албан тушаал: үнэмлэхүй; дээд: 100%;
Өөрөөр хэлбэл, эцэг эхийн дээд хилээс гарсан зөрүү нь эцэг эхийн өндөртэй тэнцүү байх болно. Маш логик, миний бодлоор.
Байршлаас гадна унждаг цэсийг дээд түвшний цэс шиг загварчлах хэрэгтэй. Тэдний хэлснээр алимны модны алим ...
Таны харж байгаагаар манай унждаг цэс хараахан унжрахгүй байгаа боловч уналтанд орж, унжсан байна. Гэхдээ зүгээр, бид үүнийг удахгүй засах болно.
Хэрхэн унждаг цэсийг үнэхээр унадаг болгох вэ
Юу ч илүү хялбар байж чадахгүй! Манай үүрлэсэн жагсаалтыг унждаг цэс болгохын тулд та зүгээр л нуух хэрэгтэй! Дараа нь унадаг цэсийг агуулсан дээд түвшний цэсийн зүйл дээр хулганы курсор шилжих үед л нээнэ. Энэ нь жаахан төвөгтэй сонсогдож магадгүй ч үнэндээ үүнийг хэдхэн мөр кодоор шийдэж болно.
Унждаг цэсэнд нэмнэ үү:
Дэлгэц: байхгүй;
Үүнийг харуулахын тулд та бичих хэрэгтэй:
# дээд_цэс > li: хулганаар дарах > ul (дэлгэц: блок; )
Энэ олон сонгогчид бидэнд юу хэлэх вэ? Бид эцсээс нь уншсан. Бид нэгдүгээр түвшний жагсаалтын элементийн дотор байрлах хоёрдугаар түвшний жагсаалтад хэв маягийг (харагдах байдал) тохируулсан боловч эдгээр загварууд нь зөвхөн "" элемент дээр хулганаа аваачвал л ажиллах болно.li" нь бидний хоёр дахь түвшний жагсаалтыг агуулдаг.
Би өөрийгөө тодорхой болгосон гэж найдаж байна. Үгүй бол хэд хэдэн удаа уншиж үзээрэй. Илүү сайн, кодыг хараад л ойлгоорой. Бид юу авснаа харцгаая:
Тийм ээ, бид хүссэн зүйлдээ хүрсэн бололтой - унждаг цэс, жинхэнэ унждаг цэс хийсэн, новш минь! Гэхдээ түүнд ямар нэг зүйл дутагдаж байна. Та юу мэдэх вэ? Гөлгөр байдал! Эцсийн эцэст бүх зүйл цэс тасрахгүй, зүгээр л гарч ирдэг мэт харагдаж байна. Би маш огцом, тэр даруйд нь хэлэх болно.
За, түүн дээр дахиад ид шид үзүүлцгээе.
Гөлгөр унадаг цэсийг хялбар болгосон
Тиймээс цэвэр CSS ашиглан гөлгөр унждаг цэсийг хийцгээе. Яагаад үүнийг хийх вэ? Яагаад гэвэл бүх зүйл гөлгөр, зөөлөн байхад хүмүүс дуртай байдаг ... бас үзэсгэлэнтэй харагдаж байна. Энэ нь таны сайтыг ашиглахад таатай байх болно. Явцгаая!
Та зөвхөн 50px ба 300px, 0 ба 100%, 0.5 ба 1.0 гэх мэт математикийн нарийн утгуудыг амилуулах боломжтой гэдгийг санаарай. Манай тохиолдолд бид унадаг цэсийнхээ хоёр төлөвийг хөдөлгөөнд оруулах боломжгүй болно ( дэлгэц: байхгүй;Тэгээд дэлгэц:блок;).
Гэхдээ бид тэдгээрийг ил тод байдлаар сольж болно - тунгалаг байдал: 0, тунгалаг байдал: 1. Мөн бидний цэс ил тод төлөвөөс гарч ирэх цагийг тохируулна уу. Тийм ээ, энэ нь үнэхээр ажиллах болно, гэхдээ энэ нь таны хүлээж байсан нөлөө биш юм. Тиймээс үүнийг арай илүү төвөгтэй болгоё. Гэхдээ энэ нь үнэ цэнэтэй, надад итгээрэй.
Хөдөлгөөнт дүрсийг илүү жигд, урьдчилан таамаглах боломжтой болгохын тулд унадаг цэсийн зүйлүүдэд тогтмол өндрийг тохируулах шаардлагатай байсан ч үүнгүйгээр хийх боломжтой байсан. Маш олон арга байдаг, зүгээр л хослолуудыг гаргаж ирээд асуудлыг шийддэг.
Кодоос харж байгаагаар бид унадаг жагсаалтын элементүүдийн өндөр, тэдгээрийн ил тод байдлыг хөдөлгөөнт байдлаар дүрсэлсэн. Энэ нь унждаг цэсний үзэсгэлэнтэй, жигд хөдөлгөөнт дүрсийг бүтээхэд хангалттай байсан.
Анимэйшн хийхэд бидэнд юу хэрэгтэй байсан бэ? Манай цэсийн хоёр төлөв, мөн эдгээр төлөвүүдийг интерполяцласан шилжилтийн шинж чанар, өөрөөр хэлбэл хуваарилагдсан хугацаанд завсрын бүх утгыг дүүргэсэн. Тэгээд л болоо!
Үүнийг jQuery ашиглан хийх нь бүр ч хялбар байж болох ч бид эхлээд өнөөдөр цэвэр CSS-тэй ажиллах болно гэдгээ мэдэгдсэн. Та анимэйшн дээр Bezier муруйг нэмснээр үүнийг илүү үзэсгэлэнтэй болгож болох боловч энэ сэдэв өнөөдрийн хүрээнээс арай хэтэрсэн байна. Гэхдээ бид дараа нь үүн рүү буцах нь гарцаагүй.
Дүгнэлт:
Одоо та цэвэр CSS дээр унадаг цэсийг хэрхэн хийхийг мэддэг гэдгээ найз нөхөд, гэр бүлийнхэндээ харуулах боломжтой. Энэ бол нэгээс олон удаа хэрэг болох үнэхээр хэрэгтэй ур чадвар юм. За та өөрөө дүгнээд үзээрэй, статик цэстэй хэдэн сайт үзсэн бэ? Үгүй ээ, ихэнх сайтууд унждаг цэстэй байдаг.
Дашрамд хэлэхэд энэ бол миний анхны CSS хичээл байсан. Энэ нь танд хэр таалагдаж байгааг тайлбарлана уу? Та бүх зүйлийг тодорхой тайлбарласан уу, эсвэл илүү дэлгэрэнгүй тайлбарлах шаардлагатай байна уу? CSS дээр lifehack-ийн сэдвээр үргэлжлүүлэн нийтлэл бичих нь зүйтэй болов уу?
Анхаарал тавьсанд баярлалаа, удахгүй уулзъя!
Та дуустал нь уншсан уу?
Энэ нийтлэл хэрэг болсон уу?
Үнэхээр биш
Чамд яг юу нь таалагдаагүй вэ? Нийтлэл бүрэн бус эсвэл худал байсан уу?
Сэтгэгдэл дээр бичээрэй, бид сайжруулахаа амлаж байна!
Хэрхэн хийх талаар нийтлэл бичихийг удаан хүсч байсан CSS дээрх дэд цэс. Олон хүмүүс үүнийг хийдэг JQueryбөгөөд энэ нь нэлээн сайн гарч байна, Гэсэн хэдий ч, бүхэл бүтэн үндсэн зарчим бий болгох CSS дээрх дэд цэсБи энд хэлье. Дараа нь энэ баазаас эхлэн та дэд цэсийг илүү сайжруулж болно.
Би шууд авчирна CSS код:
* html uli (
хөвөх: зүүн;
}
* html uli a (
өндөр: 1%;
}
ул (
хилийн доод: 1px хатуу #000;
жагсаалтын хэв маяг: байхгүй;
захын зай: 0;
дэвсгэр: 0;
өргөн: 100px;
}
улли (
албан тушаал: харьцангуй;
}
uli a (
дэлгэц: блок;
хүрээ: 1px хатуу #000;
хилийн доод хэсэг: 1px;
дүүргэх: 5px;
текстийн чимэглэл: байхгүй;
}
ли ул (
дэлгэц: байхгүй;
зүүн: 99px;
байрлал: үнэмлэхүй;
дээд: 0;
}
li:hover ul (
дэлгэц: блок;
}
Энд хамгийн чухал зүйл бол сонгогч " ли:ховер ул". Үнэн хэрэгтээ энэ нь цэсийн агуулгыг харуулдаг. Анхдагч байдлаар, энэ нь " дэлгэц: байхгүй", мөн та цэсийн зүйл дээр гүйлгэх үед дэд цэс нь: " дэлгэц: блок", өөрөөр хэлбэл, харагдахуйц. Энэ бол хамгийн чухал зүйл юм. Мөн эхний хоёр сонгогчид (аль нь * ) ирж байна CSS хакердсанУчир нь I.E., эс бөгөөс үүнгүйгээр энэ хөтөч дээр юу ч ажиллахгүй. Бусад бүх зүйл бол гадаад төрх бөгөөд үүнийг мэдээж өөрчилж болно.
Би авчрах ба HTML код:
гэр
Цэс 1
Дэд цэс 1
Дэд цэс 2
Дэд цэс 3
Цэс 2
Дэд цэс 4
Дэд цэс 5
Дэд цэс 6
Дэд цэс 7
Дэд цэс 8
Хэрэв та энэ бүтцийг сайтар бодож үзвэл бүх зүйл маш тодорхой болно. Tag ul- цэс үүсгэдэг. Хэрэв ulөөр дотор байдаг ul, тэгвэл энэ нь аль хэдийн дэд цэс юм. Шошго литодорхой цэсийн зүйлийг хариуцдаг.
Мэдээжийн хэрэг, цэс нь логик, бүтцийн хувьд ч, дизайны хувьд ч хамгийн энгийн байдаг. Мэдээжийн хэрэг та ашиглаж болно JQueryгөлгөр нээлхийг хийх. Та мөн дизайныг өөрчилж болно, гэхдээ бүх зарчим нь үүнтэй ижил хэвээр байх болно CSS болон HTML дээр бичигдсэн дэд цэс.
Сайн уу. Өнөөдөр бид унадаг цэсний тухай сэдвээ үргэлжлүүлж, үүнийг хэрхэн хийх талаар ярилцах болно. Ердийнх шиг, жишээ тус бүрт демо үзэх горим, мөн татаж авах файлууд байх болно.
Хэрэв та энэ сайтад санамсаргүй байдлаар орж ирсэн эсвэл өөр сайт хайж байсан бол холбоосыг дагахыг зөвлөж байна, тэнд цуглуулсан сайтын олон янзын цэсүүд байдаг.
Вэбсайтуудад зориулсан маш олон босоо цэсүүд байдаг бөгөөд энэ зааварт би CSS дээр зөвхөн баруун болон зүүн тийш унждаг босоо цэсийг, мөн олон түвшний унждаг цэсийг харуулах болно. . Сайтын босоо цэсний бусад сонголтуудыг дараах хичээлүүдэд тайлбарлах болно. Тиймээс бид зөрчих болно.
Хуудасны навигаци:
Танилцуулга болгон сургууль завсардагчид CSS дээр хэрхэн ажилладагийг хэлэх нь зүйтэй болов уу.
Компьютер эсвэл зөөврийн компьютер дээр ажилладаг бүх хөтчүүд CSS шинж чанартай байдаг : гүйлгэх(Би энд жаахан буруу байна, энэ бол псевдо анги юм :) үүн дээр үндэслэн та бараг бүх босоо унждаг цэсийг үүсгэж болно.
Гэхдээ гар утасны хөтөч дээр юу хийх вэ? - эсвэл таны асуусан таблетууд дээр.
Аз болоход, гар утасны хөтөч хөгжүүлэгчид (харамсалтай нь хаа сайгүй) псевдо ангиллыг өдөөх боломжийг олгосон: CSS-д тайлбарласан бол холбоос дээр эхний товшилт дээр хулганаа ав. Эдгээр хүчин чармайлтын ачаар ихэнх хэрэглэгчид таны CSS босоо унадаг цэсийг харах боломжтой болно.
Унждаг цэсний ашиг тусын талаар хэдэн үг:
- та хязгаарлагдмал орон зайд маш урт цэсийг багтаах боломжтой;
- загвар нь илүү гоёмсог болдог;
- зан үйлийн хүчин зүйлүүд хэсэгчлэн сайжирдаг.
Баруун талд байрлах босоо унждаг цэс
Би та бүхэнд эхний жишээг толилуулж байна: хулганы баруун талд байрлах энгийн босоо унждаг цэс.
Бид цэсийг html кодоор бичиж эхлэх бөгөөд үүнийг бүх нийтийн жагсаалтад оруулах болно, хариултын сонголт нь wordpress-ийн буцаадаг зүйлтэй ижил байна.
Босоо цэсэнд зориулсан HTML
Html-ийг ойлгоход танд ul болон li шошготой ердийн жагсаалтууд ямар ч бэрхшээл гарахгүй гэж би бодож байна. Кодыг харцгаая:
Жагсаалтад үндэслэсэн сайтын цэс: зарим зүйл унадаг блоктой, зарим нь байхгүй. Бүх зүйл маш энгийн, би ямар ч тайлбар хэрэггүй гэж бодож байна.
CSS босоо унадаг цэс
CSS загварын хувьд асуудал арай илүү төвөгтэй байдаг. Би танд зөвхөн цэсийн кодыг харуулах бөгөөд та жишээг татаж авахдаа бусад хэв маягийг харах боломжтой.
#menuVertical(өргөн:100%;өндөр:авто;) #цэсБосоо ul(дэлгэц:блок; өргөн:100%; өндөр:авто; зах:0px; дэвсгэр:0px; жагсаалтын хэв маяг:байхгүй; байрлал:харьцангуй; ) # menuVertical ul li(дэлгэц:блок; өргөн:100%; өндөр:авто; байрлал:харьцангуй;) #цэсБосоо ул li a(байрлал:харьцангуй; дэлгэц:блок; өргөн:100%; өндөр:авто; хайрцагны хэмжээ: хүрээ -box; font-weight:bold; line-height:10px 15px; text-decoration:none; ;) #menuVertical ul li a:hover, #menuVertical ul li:hover a( background:#0A3CC1; ) #menuVertical ul li ul( position:absolute; top:0px; left:100%; display:none; width:auto ; ) /********* hover дээр унадаг цэсийг харуулах********/ #menuVertical ul li: hover ul(дэлгэц:block;) #menuVertical ul li ul li a( white-space:nowrap; text-transform:none; padding:5px 20px ) #menuVertical ul li ul li a:hover( background:#75C1D4; өнгө:#0A3CC1; )
Энэ бол CSS-ийн мөр юм
#цэсБосоо ул li:hover ul(дэлгэц:блок;)
Уналтад хариуцлага хүлээдэг. Энэ нь хулганаар унасан блокийг харуулж байна. Үлдсэн загварууд нь цэсийг өөрөө загварчлах, мөн жагсаалт/цэсний зүйлсийг зөв байрлуулахад шаардлагатай.
Арьс дээрх жишээн дээр бид юу олж авсныг харж болно.
Та босоо css унждаг цэс нь демо горимд хэрхэн ажилладагийг доороос эсвэл жишээ татаж авах замаар харж болно.
Миний бодож олсон унадаг цэсний энгийн жишээ энд байна.
Та зүүн унадаг цэсийг хулганаар унасан цэс хийх хэрэгтэй гэж бодъё. Баруун тийш унах жишээн дээр үндэслэн бид одоо үүнийг хэрэгжүүлэх болно.
CSS дээрх зүүн босоо унадаг цэс
Бид HTML кодыг хэвээр үлдээдэг тул үүнийг өөрчлөх нь утгагүй юм. Жишээ нь өөрөө биш бол би жишээг тодорхой болгохын тулд зүүн ба баруун блокуудыг солих шаардлагатай болно. (Төгсгөлд нь жишээ татаж аваад харах болно)
CSS-ийн хэв маяг нь эрс ялгаатай биш ч гэсэн арай өөр байх болно. Миний энгийн жишээнд нэг утгыг засахад хангалттай. Би үүнийг сэтгэгдэл дээр тэмдэглэнэ.
Илүү төвөгтэй цэсүүдийн хувьд та хэд хэдэн засвар хийх шаардлагатай болно. Загваруудыг харцгаая:
#menuVertical(өргөн:100%;өндөр:авто;) #цэсБосоо ul(дэлгэц:блок; өргөн:100%; өндөр:авто; зах:0px; дэвсгэр:0px; жагсаалтын хэв маяг:байхгүй; байрлал:харьцангуй; ) # menuVertical ul li(дэлгэц:блок; өргөн:100%; өндөр:авто; байрлал:харьцангуй;) #цэсБосоо ул li a(байрлал:харьцангуй; дэлгэц:блок; өргөн:100%; өндөр:авто; хайрцагны хэмжээ: хүрээ -box; font-weight:bold; line-height:10px 15px; text-decoration:none; ;) #menuVertical ul li a:hover, #menuVertical ul li:hover a( background:#0A3CC1; ) #menuVertical ul li ul( position:absolute; top:0px; баруун:100%;/*энд өөрчилсөн*/ дэлгэц :none; өргөн:авто; ( white-space:nowrap; text-transform:none; padding:5px 20px; ) #menuVertical ul li ul li a:hover( background:#75C1D4; өнгө:#0A3CC1; )
Тэгээд л болоо. Бид энэ цэсийг дуусгасан. Зүүн талд товших боломжтой арьс, баруун талд нь демо болон жишээ татаж авах холбоос байна:
Босоо олон түвшний цэс
Бодит амьдрал дээр хулганаар унасан босоо олон түвшний цэсүүд маш ховор байдаг. Би хадгалсан сангаасаа хэд хэдэн жишээ үзүүлэхийг хүссэн боловч харамсалтай нь олж чадсангүй. Би үүнийг хийх хэрэгтэй болно :) Сайтын эдгээр цэсэнд төвөгтэй зүйл байхгүй, унадаг цэсэнд зориулсан ердийн CSS.
Эхэлцгээе. HTML кодоос эхэлцгээе. Бид сайтын дараагийн түвшний хэд хэдэн ul li жагсаалтыг нэмэх болно. Миний жишээ 3 унждаг дэд цэстэй байх тул html код нь дараах байдалтай байна.
Болгоомжтой байгаарай, зөвхөн гуравдахь цэсийн зүйл нь олон түвшний уналттай, би HTML-г үймүүлэхгүйн тулд бусдыг нь хийгээгүй бөгөөд маш олон зүйл бий.
#menuVertical(өргөн:100%;өндөр:авто;) #цэсБосоо ul(дэлгэц:блок; өргөн:100%; өндөр:авто; зах:0px; дэвсгэр:0px; жагсаалтын хэв маяг:байхгүй; байрлал:харьцангуй; ) # menuVertical ul li(дэлгэц:блок; өргөн:100%; өндөр:авто; байрлал:харьцангуй;) #цэсБосоо ул li a(байрлал:харьцангуй; дэлгэц:блок; өргөн:100%; өндөр:авто; хайрцагны хэмжээ: хүрээ -box; font-weight:bold; line-height:10px 15px; text-decoration:none; :0px;) #menuVertical ul li a:hover, #menuVertical ul li:hover a( background:#0A3CC1; ) #menuVertical ul li ul( position:absolute; top:0px; left:100%; display:none; width :150px; ) /********* hover дээр унадаг цэсийг харуулах********/ #цэсБосоо ул li:hover > ul(дэлгэц:блок;) #menuVertical ul li ul li a( text-transform :none; padding:5px 20px; өнгө:#0A3CC1; )
Эдгээр нь хулганы баруун талд байрлах босоо олон түвшний унадаг цэс үүсгэх загварууд юм. Зүүн талд дусал бүхий сонголт нь арай илүү байх болно. Зураг дээр юу байгааг доороос харцгаая (товших боломжтой арьс).
JavaScript ба/эсвэл jQuery-гүйгээр үүсгэж болно. Үүнийг үүсгэхийн тулд CSS шинж чанаруудын дэлгэц, padding, псевдо-class:hover ашиглана уу. Ажлын цэс боломжтой (Хэрэв та HTML цэсийг өөрийнхөөрөө зохион бүтээхийг хүсвэл "Сэрээ" дээр дарна уу). Видеоны урт ~12 мин. Энэхүү тэмдэглэл нь HTML болон CSS-ийн үндсийг сурах анхны алхмуудыг хийж буй анхан шатны загвар зохион бүтээгчид болон вэб хөгжүүлэгчдэд зориулагдсан болно; "HTML5 ба CSS3-ийн үндэс" хичээлийг судалсан хүмүүст зориулав.
Энгийн унадаг цэс үүсгэх
Цэс үүсгэхийн тулдсайт нь ихэвчлэн блок бүтцийг ашигладаг HTML навигацийн элементТэгээд дугааргүй жагсаалт. Жагсаалтын аль нэгэнд өөр нэг жагсаалтыг оруулснаар гипер холбоост оруулахгүй. a дотор ul-г байрлуулж болох байсан ч миний бодлоор энэ нь тийм ч сайн санаа биш, учир нь псевдо-class:hover нь li элементүүдтэй бас ажилладаг!
Манай тохиолдолд хэзээ сонголтыг авч үзэхгүй доош унах жагсаалтМөн үүрлэсэн жагсаалтууд байдаг - энэ даалгавар нь өөрөө хэцүү биш боловч шинэхэн зохион бүтээгчид хүндрэл учруулах болно. Тохирох JavaScript-г олох эсвэл бичих замаар цэсийг бүтээх боломжтой гэдгийг анхаарна уу.
Тэмдэглэгээтэй ажиллахад хялбар болгохын тулд (гэнэт бид өөр nav-тай тулгарах болно) бид бүтцийн навигацийн элементдээ CSS анги нэмэх болно; Бид hyperlinks stub хийх болно, гэхдээ та # оронд http://site гэж бичиж болно :)
Унждаг дэд цэстэй цэсийн HTML тэмдэглэгээ
CSS-ийн гол зүйл: цэсэнд орсон HTML элементүүдийн анхдагч утгуудыг арилгах; ирээдүйн унадаг дэд жагсаалтыг нууж байна ( дэд цэс) болон түүний үндсэн HTML элемент дээр гүйлгэх үед харуулах - псевдо анги ашиглан: hover
Унждаг цэсний CSS дүрмүүд.menu ul li( padding: 10px; ) .menu ul > li:hover( background-color: #f96; ) .menu ul ul > li:hover( background-color: #69e; ) . menu ul li, .menu ul( дэлгэц: inline-block; ) .menu ul( байрлал: харьцангуй; зах: 0; дэвсгэр: 0; дэвсгэр өнгө: #f63; ) .menu ul ul( дэлгэц: байхгүй; байрлал: absolyut; background-color: #369; -чимэглэл: none;
Үүсгэсэн цэс нь төгс биш бөгөөд сайжруулж болно (хэрхэн талаар бодож үзээрэй). Таны хөгжилд амжилт хүсье, ийм цэсийг бүтээхэд хэзээ ч хэцүү байх болтугай!
Ачааж байна...