sushiandbox.ru Компьютер эзэмших - Интернет. Skype. Олон нийтийн сүлжээ. Windows дээрх хичээлүүд.
Өдрийн мэнд, эрхэм уншигчид!
Тэд хэрхэн нөлөөлдөг талхны үйрмэгхайлтын системийн оновчлолын талаар, тэдгээрийг WordPress ашиглан сайт дээр хэрхэн хийх талаар. Энэ бол өнөөдрийн өгүүллээр хэлэлцэх болно. Цаашид талхны үйрмэгүүд нь таны хэрэглэгчид таны сайтыг удирдахад тусалдаг. Тэд бас SEO дээр эерэг нөлөө үзүүлдэг.
Талхны үйрмэг нь хэрэглэгчийг хаана байгааг харуулсан сайт дээрх зөвлөмжүүд юм. Навигацид зориулж бүтээсэн нэг төрлийн гинж.
Тэдгээр нь товших боломжтой бөгөөд энэ нь зочин хүссэн үедээ дээрх "түвшин" - дэд хэсэг эсвэл хэсэг рүү очиж болно гэсэн үг юм. Дүрмээр бол талхны үйрмэгүүд иймэрхүү харагдаж байна: үндсэн - гарчиг - дэд гарчиг - нийтлэл. Сүүлчийн элементийг ихэвчлэн хасдаг бөгөөд энэ нь шаардлагагүй давхардал үүсгэдэг гэж үздэг.
Энэ нэр нь хүүхдүүд ой руу явахдаа навигац хийхээр талхны үйрмэгтэй замыг үлдээдэг үлгэрийн тухай өгүүлдэг гэж үздэг. Тэд энэ замаар буцаж явах ёстой байсан. Холболтын гинж нь бас зам бөгөөд сайт руу холдох тусам илүү олон элемент байдаг. Үнэн хэрэгтээ энэ гинжин хэлхээний дагуу та үндсэн хуудас руу буцаж очиж болно. Яг л үлгэрт гардаг шиг.
SEO хэрхэн нөлөөлдөг
Навигацийн хангамжийг ашиглах нь дэлхий дээрх сайн зан үйл гэж тооцогддог хайлтын системийн оновчлол.
Нэгдүгээрт, энэ нь сайжирдаг зан үйлийн хүчин зүйлүүд. Энэ нь та бүхний мэдэж байгаагаар сайтын чанарын бараг хамгийн чухал үзүүлэлт юм. Хэрэв ашиглах боломжтой бол сайн түвшин, ашиглалт, навигаци нь ойлгомжтой, тохиромжтой байх болно, тэгвэл зочдод талархаж, нөөц дээр удаан үлдэх болно. Үүнээс гадна, зан үйлийн хүчин зүйлүүд илүү сайн байх тусам таны нөөц хайлтын үр дүнд өндөр байх болно.
Хоёрдугаарт, талхны үйрмэг байгаа нь хайлтын системд аль хэдийн сайн хүчин зүйл гэж тооцогддог. Төсөл нь навигацийн систем, бүтэцтэй бөгөөд энэ нь зэрэглэл тогтооход сайнаар нөлөөлж байгааг роботууд харж байна.
Мэдээжийн хэрэг, навигацийн талбар нь таны нөөцийг дээд цэгт хүргэхгүй. Энэ нь сайн SEO-ийн бусад талуудтай хамт ажилладаг.
Дүгнэж хэлэхэд талхны үйрмэг нь дараахь зүйлд тусална.
- зан үйлийн хүчин зүйлс, ашиглах чадварыг сайжруулах,
- сайтын бүтцийг ойлгомжтой, хүртээмжтэй болгох,
- хуудсуудаар шилжихэд хялбар,
- SEO-ийг техникийн хувьд сайжруулах,
- дахин холбоос хийх.
Өөрөөр хэлбэл, төсөл нь тохиромжтой, практик, зочлохыг хүсч буй хүмүүст навигацийн тэжээлийг ашиглах нь заавал байх ёстой.
Талхны үйрмэгийн төрлүүд
Тийм ээ, тэдэнд сорт байдаг. Тэдгээр нь тийм ч олон биш боловч энэ мөчийг анхаарч үзэх нь зүйтэй юм.
Шугаман
Үндсэн хуудаснаас нийтлэл хүртэлх замыг харуулсан ердийн зурвас. Хамгийн түгээмэл талхны үйрмэг.. Бидэнд зүгээр л шугаман төрлийн навигацийн самбар бий.
Буцах товчлуур
Онлайн дэлгүүрүүдэд маш түгээмэл байдаг маш тохиромжгүй навигацийн төрөл. Дүрмээр бол хэрэглэгчид үүнд тийм ч таатай байдаггүй бөгөөд хөтөч дээрээ ижил төстэй товчлуурыг ашигладаг. Мэдээллийн сайтын хувьд энэ сонголт бараг ашиггүй юм.
Гибрид
Энэ сонголт нь өмнөх хоёрыг хослуулсан. Өөрөөр хэлбэл, нөөц нь шугаман навигаци болон "Буцах" товчлууртай. Энэ бол хүн бүрт таалагдахад тусалдаг буулт гэж бид хэлж чадна. Гэхдээ дээр дурдсанчлан хүмүүс "Буцах" товчлуурыг ховор ашигладаг бөгөөд хөтөч дээрх товчлуурыг илүүд үздэг - аз болоход орчин үеийн бүх програмуудад ийм зүйл байдаг.
Ихэвчлэн навигацийн талбар нь үндсэн хуудаснаас бусад бүх хуудсанд байрладаг. WordPress дээр эдгээр нь категори, шошго, нийтлэл болон бусад ангилал зүй юм.
WordPress дээр Breadcrumbs хэрхэн үүсгэх вэ
WordPress болон бусад сайтууд дээр навигацийн тэжээл үүсгэх хамгийн хялбар арга бол html юм. Үүний оронд энэ нь html болон php-ийн эрлийз байх болно - эс тэгвээс та навигацийн хэлхээ бүрийг гараар бичих хэрэгтэй бөгөөд энэ нь тийм ч таатай ажил биш юм.
Загвар ашиглах
Талхны үйрмэгтэй загварыг нэн даруй сонгох нь ухаалаг хэрэг болно. Хэрэв та зүгээр л өөр сайтын талаар бодож байгаа бөгөөд үүнийг үүсгэж эхлээгүй байгаа бол дэлгүүрт хандах хэрэгтэй WordPress загваруудМөн энэ функцтэй сэдвийг хайж олоорой (Би Root гэж зөвлөж байна).
Энэ нь хамгийн практик сонголт байх болно, учир нь та нэмэлт залгаасуудыг суулгах шаардлагагүй болно. Энэ тохиолдолд та гараар ямар нэг зүйл нэмэх, засах шаардлагагүй, бүх зүйл хайрцагнаас гарч (суулгасны дараа шууд) ажиллах болно.
Plugins
Та залгаасын хамт navbar суулгаж болно. Гэхдээ залгаас бүр нь таны CMS-ийг илүү ачаалах боломжтой гэдгийг санаарай. Хэрэв ийм олон залгаас байгаа бол өөр нэг шинэ нь сайтыг удаашруулж бүх зүйлийг сүйтгэж чадна.
Yoast SEO - үйрмэгийг тохируулах дэлгэрэнгүй заавар
Хэрэв та үүнийг SEO залгаас болгон ашигладаг бол би танд маш сайн мэдээ байна. Талхны үйрмэг нь функциональд байдаг тул та тэдгээрийг тохируулах хэрэгтэй.
Энэ ерөнхий зааварЭнэ нь ихэнх хэрэглэгчдэд тохирсон байх ёстой. Энэ нь залгаасын зохиогчдын өөрсдийнх нь өгсөн мэдээлэлд үндэслэсэн болно.
Тиймээс, Yoast SEO дээрх навигацийн хангамжийг ажиллуулахын тулд бид дараах PHP кодыг загвар файлдаа байрлуулах ёстой.
Ихэнхдээ энэ кодыг нийтлэг хуудасны загварт оруулдаг - single.php эсвэл page.php. Мөн зарим хэрэглэгчид энэ кодыг header.php - хамгийн төгсгөлд нь буулгадаг. Энэ нь таны тодорхой тохиолдолд ажиллах уу, үгүй юу, би мэдэхгүй, гэхдээ та оролдож болно.
Хуудасны ерөнхий загваруудыг суулгасан WordPress хэрэгслүүдээр дамжуулан засаж болно. Руу явж байна " Гадаад төрх" - "Редактор" гэж бид олдог хүссэн файлжагсаалтад.
Энд PHP код болон HTML тэмдэглэгээ байна. Бэлтгэлгүй хэрэглэгч төөрөлдөж магадгүй, гэхдээ та хамтдаа цугларч, хаана, юуг ойлгохыг хичээх хэрэгтэй.
Тодруулбал, миний сэдэвт талхны үйрмэгийг аль хэдийн өгсөн байгаа бөгөөд толгойн дараа шууд навигацийн гинжийг дууддаг функц байдаг. Таны код өөр байх боловч ерөнхий утга нь ижил хэвээр байна.
Get_header() функцээр талхны үйрмэгийг толгойн доор байрлуулах нь дээр. - зүгээр л түүнийг дуудах үйлчилдэг. Тиймээс Yoast SEO-ийн кодыг яг доор нь байрлуулах нь зөв байх болно.
Гэхдээ navbar-г өөрчлөхөд зарим CSS загвар шаардагдана гэдгийг санаарай. Тэдгээрийг залгаас өөрөө өгдөг боловч тохиромжгүй байж магадгүй юм.
Та өгүүлэлд талхны үйрмэг ашиглаж болно. Та дараах богино кодыг зөв газарт нь үлдээхэд л хангалттай: .
Гэхдээ залгаас дотор Breadcrumb функцийг идэвхгүй болгосон тохиолдолд код ч, богино код ч ажиллахгүй. Үүнийг идэвхжүүлэхийн тулд та залгаасын тохиргоо руу очих ёстой ("SEO" таб) - дотор харуулах Хайлтын үр дүн- талхны үйрмэг.
Гулсагчийг "Идэвхжүүлсэн" болгож сольж, хуудсыг доош гүйлгээд "Өөрчлөлтийг хадгалах" дээр дарна уу. Үүнээс хойш талхны үйрмэгүүд ажиллаж эхэлнэ.
Хэрэв та хүсвэл тэдгээрийг тохируулж болно. Жишээлбэл, элементүүдийн хооронд тусгаарлагч тавих, үндсэн хуудасны холбоосын текстийг бичих, ангиллын угтвар гэх мэт.
Та бас сонгож болно сүүлийн хуудас(эсвэл материалын нэр) тодоор бичнэ. Үүнийг хийхийн тулд тохирох гулсагчийг асаана уу.
Хэрэв Yoast SEO танд үнэхээр тохирохгүй бол та өөрийн сайт дээр талхны үйрмэг үүсгэх боломжийг олгодог бусад залгаасуудыг үзэж болно. Үнэгүй каталогид маш олон зүйл байдаг, гэхдээ би хамгийн алдартай сонголтуудыг онцлон тэмдэглэх болно.
Breadcrumb NavXT
Таны төсөлд зориулж талхны үйрмэг үүсгэж болох энгийн залгаас. Асаалттай Энэ мөч 800 мянга гаруй идэвхтэй хэрэглэгчтэй. Энэхүү залгаас нь өөрийн хяналтын самбартай бөгөөд ихэнх WordPress сайтуудад тохиромжтой.
Breadcrumb NavXT дээр бараг бүх зүйлийг өөрчлөх боломжтой. Гадаад төрх, харагдах элементүүд ба тэдгээрийн дараалал. Энд ижил Yoast SEO-ээс илүү олон сонголтууд байдаг (жишээлбэл, навигацийн сүлжээг тохируулахтай холбоотой).
Энэ өргөтгөлийг WordPress лавлахаас үнэ төлбөргүй суулгаж болно. Та үүнийг түлхүүр үгээр олох боломжтой.
Талхны үйрмэг
Лавлахаас шууд суулгаж болох өөр нэг өргөтгөл. Өмнөхөөс ялгаатай нь энэ залгаас нь тийм ч том үзэгчтэй байдаггүй. Зөвхөн 10,000 идэвхтэй хэрэглэгчид. Гэхдээ хэрэв та олон хүмүүс навигацийн сүлжээг бий болгох бусад сонголтыг илүүд үздэг гэж үзвэл энэ нь маш сайн үр дүн юм.
Plugin нь энгийн бөгөөд хөнгөн жинтэй. Энэ нь үзэсгэлэнтэй дизайнтай (дэлгэцийн агшинг үзнэ үү), та өнгийг өөрчлөх боломжтой. Жижиг төслүүдэд ашиглахын тулд энэ нь хангалттай юм.
Бусад залгаасууд бас байдаг. Тэдгээр нь бага алдартай ч та тэдгээрийг туршиж үзэж болно. Зүгээр л залгаасуудын лавлах руу очоод бичнэ үү түлхүүр үгталхны үйрмэг. WordPress танд нэн даруй хэдэн арван тохиромжтой сонголтыг өгөх болно.
Дүгнэлт
Breadcrumbs нь таны сайтыг удирдах гайхалтай арга юм. Эдгээр нь SEO-ийг сайжруулж, зан үйлийн хүчин зүйлсийг нэмэгдүүлж, хэрэглэгчдэд сайтын хуудсуудыг удирдах боломжийг олгодог.
Бараг бүх орчин үеийн сайтууд үүнд анхаарлаа хандуулахыг хичээдэг. Вэб дизайнерууд хоцрохгүй байгаа тул одоо загварт талхны үйрмэг байхгүй байгаа нь маш чухал сул тал гэж тооцогддог. Энэ өчүүхэн жижиг зүйлээс болж хэн нэгэн ийм загвар худалдаж авахаас татгалзах болно. Энэ баримтыг анхаарч үзээд сайтаа хэрэглэгчдэд ээлтэй болгохыг хичээгээрэй.
Хэрэв та бүтээх талаар илүү ихийг мэдэхийг хүсвэл мэдээллийн төслүүдорлогын хувьд, дараа нь би харахыг зөвлөж байна. Зохиогч нь WordPress дээр сайт үүсгэх, чадварлаг техникийн болон хайлтын системийг оновчтой болгох, хамгийн чухал нь мөнгө олох одоогийн аргуудын талаар ярьдаг.
Сүүлийн жилүүдэд CSS болон CSS3-ийн хөгжүүлэлтийн ачаар бид хуучин олон хувилбарт хүрч чадсан програм хангамжийн шийдлүүдарын дэвсгэр зураг агуулсан , одоо бүрэн CSS дээр үүсгэх боломжтой. Энэ зааварт бид "гулгадаг хаалга" гэж нэрлэгддэг дэвсгэр зургийн техникийг ашиглахгүйгээр хавтгай хэв маягаар "breadcrumb" нэртэй навигацийн холбоосуудын дарааллыг бий болгохыг авч үзэх болно.
Бидний бүтээх талхны үйрмэгийг бүтэцтэй агуулгын санааг дүрслэн харуулахын тулд шеврон хэлбэрээр загварчилсан болно. Өмнө нь бид ашигладаг байсан Арын зурагВ PNG форматЭнэхүү chevron дүрсийг бүтээхийн тулд, одоо ухаалаг хилийн техникээр та зөвхөн CSS ашиглан ижил эффект үүсгэж болно.
Бид Breadcrumb навигацийн холбоосыг эрэмбэлэгдээгүй жагсаалт хэлбэрээр үүсгэж эхэлнэ. Талхны үйрмэг бүр элемент байх болно
#crumbs ul li a (дэлгэц : блок ; хөвөх : зүүн ; өндөр : 50px ; дэвсгэр : #3498db ; текстийг зэрэгцүүлэх : төв ; дүүргэх : 30px 40px 0 40px ; байрлал : харьцангуй ; зах : 0 10px 0-хэмжээ ; : 20px; текст чимэглэл: байхгүй; өнгө: #fff;)
Анхны CSS код нь жагсаалтын зүйл бүрийн зангууг цэвэр цэнхэр тэгш өнцөгт хэлбэрээр тохируулдаг. Текстийг голд нь байрлуулж, бүх талаас нь тэгш дүүргэсэн байна. Туйлын дараагийн элементүүдийг байрлуулахын тулд эдгээр элементүүдэд байрлал: харьцангуй; шинж чанарыг нэмсэн бөгөөд ингэснээр тэдгээр үнэмлэхүй байрлалтай элементүүд нь тухайн эх элементтэй харьцуулахад харагдана.
#crumbs ul li a:after ( агуулга : "" ; хүрээ-дээд : 40px цул улаан ; хүрээ-доод : 40px цул улаан ; хүрээ-зүүн : 40px цул хөх ; байрлал : үнэмлэхүй ; баруун : -40px ; дээд : 0 ; )
Одоо бид CSS дээр өмнө нь зөвхөн дэвсгэр зургийг ашиглан л хийж болох chevron эффектийг үүсгэх болно. Үүсгэхийн тулд :after сонгогчийг ашиглана уу нэмэлт элемент, тус тусад нь загварчлах боломжтой. Гурвалжин хэлбэр нь өөр өөр CSS хүрээ ашиглан бүтээгдсэн тул өмнөх зурган дээрээс харж байгаачлан цэнхэр гурвалжинг бүрхсэн хэсгийг огтлолцохын тулд дээд ба доод хүрээг ашиглан үүсгэж болно. Эдгээр хил хязгаарыг тод болгохын тулд улаан өнгөтэй, харин ил тод байвал цэнхэр гурвалжин үүснэ. Энэ хилийн эффектийг үнэмлэхүй байрлалыг ашиглан байранд нь шилжүүлнэ.
Дээд талын хүрээ: 40px хатуу тунгалаг; хилийн доод : 40px хатуу тунгалаг; хилийн зүүн: 40px хатуу #3498db;
Өнгөний зөв утгууд бүхий хилийн эффект нь хүссэн гурвалжинг үүсгэх бөгөөд энэ нь талхны үйрмэгийг алдартай шеврон хэлбэртэй болгоно.
#crumbs ul li a:before (агуулга : "" ; хүрээ-дээд : 40px хатуу тунгалаг ; хүрээ-доод : 40px хатуу тунгалаг ; хүрээ-зүүн : 40px хатуу #d4f2ff ; байрлал : үнэмлэхүй ; зүүн : 0 ; дээд : 0 ; )
Үүнтэй ижил зарчмуудыг ашиглан талхны үйрмэгийн зүүн талд өөр гурвалжин хэлбэрийг хэрэглэж болно. Энэ удаад холбоосын цэнхэр дэвсгэр өнгөний хэсгийг нуухын тулд хүрээний өнгийг дэвсгэр өнгөтэй ижил өнгөтэй болгож тохируулсан.
Дүүргэгч: 30px 40px 0 80px;
HTML-д холбоосууд нэмэгдэхийн хэрээр гурвалжин CSS хүрээний эффект болон баруун талын бага зэрэг ирмэгийн ачаар сонирхолтой хэлбэрийн шевронуудаар тусгаарлагдсан талхны үйрмэгийн дараалал нэмэгддэг.
#crumbs ul li:first-child a ( хүрээ-дээд-зүүн-радиус: 10px ; хилийн-доод-зүүн-радиус: 10px ; ) #crumbs ул ли:анхны хүүхэд a:өмнө ( дэлгэц : байхгүй ; ) #crumbs ul li: last-child a ( padding-right : 80px ; border-дээд-баруун-радиус: 10px ; хүрээ-доод-баруун-радиус: 10px ; ) #crumbs ul li: last-child a:after ( дэлгэц : байхгүй ;)
Бүрэн талхны хайрцгийг эхний болон сүүлчийн элементүүдээс гурвалжингийн эффектийг :first-child ба : last-child сонгогчоор арилгаж, дараа нь хүрээ-радиус шинж чанараар булангуудыг бага зэрэг дугуйруулж болно.
#crumbs ul li a:hover ( дэвсгэр : #fa5ba5 ; ) #crumbs ul li a:hover :after (зүүн хүрээний өнгө: #fa5ba5 ; )
Үлдсэн зүйл бол холбоосууд дээр хулганын эффектийг ашиглах явдал юм. Зүүсэн төлөвт гурвалжингийн нөлөө үзүүлэх хилийн зүүн өнгөний шинж чанарын утгыг өөрчлөхөө бүү мартаарай, ингэснээр талхны үйрмэг бүхэлдээ өнгө өөрчлөгдөнө.
Орчуулга - Ширээ
Хавтгай загвараар CSS3 ашиглан өөр өөр өнгийн палитраар хийсэн талхны үйрмэгийн үзэсгэлэнтэй, анхны сонголт. Мэдээжийн хэрэг, товчлуур хэлбэрээр навигацийн харагдах байдал нь сайтын хэрэглэгч болон зочдод хоёуланд нь төгс тусалдаг бөгөөд энэ нь интернетийн эх сурвалжийг чиглүүлэх бөгөөд эндээс та бидэнд харуулах түлхүүр үг хэллэгээр удирдаж болно. Гэхдээ энэ нь хэв маягт маш сайн тохирч байгаа тул зарим хүмүүс үүнийг форумын модуль дээр суулгах нь бүү хэл, илүү их харагддаг. орчин үеийн дизайн.Хэрэв танд маш их материал байгаа бол энэ функцийг энд идэвхжүүлэхийг зөвлөж байна. Жагсаалтын загвар нь жагсаалтын хар цэг эсвэл анхдагч загвар болох бусад загвараас зайлсхийхгүй. Энэ нь ангиллаар ангилж, ямар ч болзолгүйгээр модулиудаас эхлээд нүүр хуудасмөн энэ бүгдийг хэв маягаар харуулсан. Энэ материалд та ижил хэв маягаар хийгдсэн сонголтыг ажиглаж байна, энэ нь хавтгай хэв маяг юм.
Энд хэлбэр нь огт өөр бөгөөд хэн нэгэн нь дизайндаа бүрэн нийцэх тул засварлах шаардлагагүй болно. Бид одоо css кодыг ашиглан эхний жагсаалтын зангууг хийж, хамгийн сүүлийн хүүхдийн зангууг анхдагч болгож тохируулах бөгөөд ингэснээр гурвалжин зүүн болон сүүлчийн зангууны эхний хүүхдийн зангуунд харагдахгүй болно. баруун талд зориулсан хүүхэд.
Талхны үйрмэг хийх
1. Цайвар шар өнгийн сүүдэрт:
2. Ногоон өнгөтэй цайвар палитр:
3. Бөөрөлзгөнө өнгөтэй
4. Цэнхэр палитраар хийсэн:
Энэ нь дэвсгэр, дэвсгэр болон бусад загварлаг энгийн шулуун жагсаалт байх болно. Үүний дараа би CSS ашиглан жагсаалтын зангуу бүрийн баруун талд гурвалжин бүтэц үүсгэж, broder шинж чанаруудтай тоглох болно.
Демо дээр харж байгаагаар бид ямар ч жагсаалтын зангууг талхны цээжин дээр аваачихад энэ нь зочилсон эсвэл энэ хэсэгт байгаа гэсэн утгатай эффект өгдөг.
Эсвэл бид үүнийг идэвхтэй талхны үйрмэг болгон идэвхтэй болгохын тулд түүний үр нөлөөг төсөөлж болно. Та эдгээр css талхны үйрмэгийг зүгээр л талхны үйрмэг гэж хэлж болно, учир нь би эдгээр талхны үйрмэгийг хийхэд зөвхөн css болон css3 ашиглах болно.
Суулгацыг эхлүүлье:
css
Жагсаалтын загвар нь жагсаалтын хар цэг эсвэл анхдагч загвар болох бусад загвараас зайлсхийхгүй. Inline div жагсаалт бүр нь css display: list-inline ашиглан хэвтээ жагсаалт болгохын тулд жагсаалт доторлогоотой байх болно.
#талхны үйрмэг-исанчогивс1 (
текстийг зэрэгцүүлэх: төв;
захын дээд: 30px;
}
#талхны үйрмэг-исанчогивс1 ul (
жагсаалтын хэв маяг: байхгүй;
дэлгэц: шугаман хүснэгт;
}
#талхны үйрмэг-исанчогивс1 ул ли (
дэлгэц: шугаман;
}
#талхын үйрмэг-исанчогивс1 ул ли а (
дэлгэц:блок;
хөвөх: зүүн;
өндөр: 50px;
дэвсгэр: #ffd928;
текстийг зэрэгцүүлэх: төв;
дүүргэх: 30px 40px 0 80px;
албан тушаал: харьцангуй;
захын зай: 0 10px 0 0;
үсгийн хэмжээ: 20px
текстийн чимэглэл: байхгүй;
өнгө: #fff;
}
#breadcrumb-isanchogives1 ул ли а:дараа (
агуулга: "";
хилийн зүүн: 40px хатуу #ffd928;
z индекс: 1;
#талхны үйрмэг-исанчогивс1 ул ли а:өмнө (
агуулга: "";
хилийн дээд: 40px хатуу тунгалаг;
хилийн доод: 40px хатуу тунгалаг;
}
#талхны үйрмэг-исанчогивс1 ул ли:анхны хүүхэд а (
}
#breadcrumb-isanchogives1 ул ли:анхны хүүхэд а:өмнө (
дэлгэц: байхгүй;
}
#талхны үйрмэг-исанчогивс1 ул ли:сүүлчийн хүүхэд а (
баруун талын дэвсгэр: 80px;
}
#breadcrumb-isanchogives1 ул ли:сүүлчийн хүүхэд а:дараа (
дэлгэц: байхгүй;
}
#breadcrumb-isanchogives1 ул ли а:ховер (
дэвсгэр: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum(
дэвсгэр: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a:hover:after (
хилийн зүүн өнгө: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum:дараа (
хилийн зүүн өнгө: #ff9a2d;
}
#талхны үйрмэг-исанчогивс2 (
текстийг зэрэгцүүлэх: төв;
захын дээд: 30px;
}
#талхны үйрмэг-исанчогивс2 ul (
жагсаалтын хэв маяг: байхгүй;
дэлгэц: шугаман хүснэгт;
}
#талхны үйрмэг-исанчогивс2 ул ли (
дэлгэц: шугаман;
}
#талхны үйрмэг-исанчогивс2 ул ли а (
дэлгэц:блок;
хөвөх: зүүн;
өндөр: 50px;
дэвсгэр: #56e9ae;
текстийг зэрэгцүүлэх: төв;
дүүргэх: 30px 40px 0 80px;
албан тушаал: харьцангуй;
захын зай: 0 10px 0 0;
үсгийн хэмжээ: 20px
текстийн чимэглэл: байхгүй;
өнгө: #fff;
}
#талхны үйрмэг-исанчогивс2 ул ли а:дараа (
агуулга: "";
хилийн дээд: 40px хатуу тунгалаг;
хилийн доод: 40px хатуу тунгалаг;
зүүн талын хүрээ: 40px хатуу #56e9ae;
байрлал: үнэмлэхүй; баруун: -40px; дээд: 0;
z индекс: 1;
#breadcrumb-isanchogives2 ул ли а:өмнө (
агуулга: "";
хилийн дээд: 40px хатуу тунгалаг;
хилийн доод: 40px хатуу тунгалаг;
зүүн талын хүрээ: 40px хатуу #f2f2f2;
байрлал: үнэмлэхүй; зүүн: 0; дээд: 0;
}
#талхны үйрмэг-исанчогивс2 ул ли:анхны хүүхэд a (
}
#талхны үйрмэг-исанчогивс2 ул ли:сүүлчийн хүүхэд а (
баруун талын дэвсгэр: 80px;
}
#breadcrumb-isanchogives2 ул ли а:ховер (
дэвсгэр: #49c593;
}
#breadcrumb-isanchogives2 ul li a.wesove-readcrum (
дэвсгэр: #49c593;
}
#breadcrumb-isanchogives2 ul li a:hover:after (
хилийн зүүн өнгө: #49c593;
}
#breadcrumb-isanchogives2 ul li a.wesove-readcrum:дараа (
хилийн зүүн өнгө: #49c593;
}
#талхны үйрмэг-исанчогивс3 (
текстийг зэрэгцүүлэх: төв;
захын дээд: 30px;
}
#талхны үйрмэг-исанчогивс3 ul (
жагсаалтын хэв маяг: байхгүй;
дэлгэц: шугаман хүснэгт;
}
#талхны үйрмэг-исанчогивс3 ул ли (
дэлгэц: шугаман;
}
#талхны үйрмэг-исанчогивс3 ул ли а (
дэлгэц:блок;
хөвөх: зүүн;
өндөр: 50px;
дэвсгэр: #ff818b;
текстийг зэрэгцүүлэх: төв;
дүүргэх: 30px 40px 0 80px;
албан тушаал: харьцангуй;
захын зай: 0 10px 0 0;
үсгийн хэмжээ: 20px
текстийн чимэглэл: байхгүй;
өнгө: #fff;
}
#талхны үйрмэг-исанчогивс3 ул ли а:дараа (
агуулга: "";
өндөр: 80px;
өргөн: 40px;
дэвсгэр: #ff818b;
байрлал: үнэмлэхүй; баруун: -40px; дээд: 0;
z индекс: 1;
#breadcrumb-isanchogives3 ул ли а:өмнө (
агуулга: "";
өндөр: 80px;
өргөн: 40px;
хилийн радиус: 0px 40px 40px 0px;
дэвсгэр:#f2f2f2;
байрлал: үнэмлэхүй; зүүн: 0; дээд: 0;
}
#талхны үйрмэг-исанчогивс3 ул ли:анхны хүүхэд а (
хилийн-дээд-зүүн-радиус: 10px; хилийн-доод-зүүн-радиус: 10px;
}
#breadcrumb-isanchogives3 ул ли:анхны хүүхэд а:өмнө (
дэлгэц: байхгүй;
}
#талхны үйрмэг-исанчогивс3 ул ли:сүүлчийн хүүхэд а (
баруун талын дэвсгэр: 80px;
хүрээ-дээд-баруун-радиус: 10px; хүрээ-доод-баруун-радиус: 10px;
}
#breadcrumb-isanchogives3 ул ли:сүүлчийн хүүхэд а:дараа (
дэлгэц: байхгүй;
}
#breadcrumb-isanchogives3 ul li a:hover (
дэвсгэр: #ea606b;
}
#breadcrumb-isanchogives3 ul li a.wesove-readcrum (
дэвсгэр: #ea606b;
}
#breadcrumb-isanchogives3 ul li a:hover:after (
дэвсгэр: #ea606b;
}
#breadcrumb-isanchogives3 ul li a.wesove-readcrum:дараа (
дэвсгэр: #ea606b;
}
#талхны үйрмэг-исанчогивс4 (
текстийг зэрэгцүүлэх: төв;
захын дээд: 30px;
}
#талхны үйрмэг-исанчогивс4 ul (
жагсаалтын хэв маяг: байхгүй;
дэлгэц: шугаман хүснэгт;
}
#талхны үйрмэг-исанчогивс4 ул ли (
дэлгэц: шугаман;
}
#талхны үйрмэг-исанчогивс4 ул ли а (
дэлгэц:блок;
хөвөх: зүүн;
өндөр: 50px;
дэвсгэр: #2b97cc;
текстийг зэрэгцүүлэх: төв;
дүүргэх: 30px 40px 0 80px;
албан тушаал: харьцангуй;
захын зай: 0 10px 0 0;
үсгийн хэмжээ: 20px
текстийн чимэглэл: байхгүй;
өнгө: #fff;
}
#талхны үйрмэг-исанчогивс4 ул ли а:дараа (
агуулга: "";
өндөр: 80px;
өргөн: 40px;
хилийн радиус: 0px 40px 40px 0px;
дэвсгэр:#2b97cc;
байрлал: үнэмлэхүй; баруун: -40px; дээд: 0;
z индекс: 1;
#breadcrumb-isanchogives4 ул ли а:өмнө (
агуулга: "";
өндөр: 80px;
өргөн: 40px;
дэвсгэр:#f2f2f2;
хилийн радиус: 0px 40px 40px 0px;
байрлал: үнэмлэхүй; зүүн: 0; дээд: 0;
}
#талхны үйрмэг-исанчогивс4 ул ли:анхны хүүхэд а (
хилийн-дээд-зүүн-радиус: 0px; хилийн-доод-зүүн-радиус: 0px;
}
#талхны үйрмэг-исанчогивс4 ул ли:сүүлчийн хүүхэд а (
баруун талын дэвсгэр: 80px;
хүрээ-дээд-баруун-радиус: 0px; хүрээ-доод-баруун-радиус: 0px;
}
#breadcrumb-isanchogives4 ul li a:hover (
дэвсгэр: #207ca8;
}
#breadcrumb-isanchogives4 ul li a.wesove-readcrum (
дэвсгэр: #207ca8;
}
#breadcrumb-isanchogives4 ul li a:hover:after (
дэвсгэр: #207ca8;
}
#breadcrumb-isanchogives4 ul li a.wesove-readcrum:дараа (
дэвсгэр: #207ca8;
}
Юуны өмнө бий болгох html бүтэц div болон ul li таг дээр үндэслэсэн. Div нь id-г агуулдаг бөгөөд id тус бүр нь тусдаа дизайныг илэрхийлэх загварын хүснэгтэд өөр өөр хэв маягийг агуулна. Бид нэг, хоёр, гурав, дөрөв гэх мэт дугаарлалт ашигладаг.
Эдгээр танигч нь ижил дотоод бүтэцтэй бөгөөд тэдгээрийг танигчийн дагуу өөр өөр хэв маягаар тусгаарладаг.
Өмнөх нийтлэлд "CSS дээр гурвалжинтай талхны үйрмэгүүдийг удирдах нь" цэсийг хэрхэн ашиглах талаар тайлбарласан болно цэвэр CSSграфик ашиглахгүйгээр.
Энэ арга нь хүн бүрт сайн байдаг, нэг зүйлээс бусад нь - хуучин хөтчүүдэд ийм цэсийг дэмжих нь эргэлзээтэй юм. Гэхдээ энэ өгүүллийг орчуулахдаа график ашиглан навигац үүсгэх арга замын холбоосыг дурьдсан.
Нийтлэлийг удаан хугацааны өмнө бичсэн боловч арга нь үнэхээр үр дүнтэй байдаг. Өгүүллийн зохиогч нь Веерле Питерс бөгөөд уг нийтлэлийг "Энгийн өргөтгөх боломжтой CSS-д суурилсан талхны үйрмэг" гэж нэрлэдэг. Доор би түүний үнэгүй орчуулгыг ч биш, харин үнэ төлбөргүй дахин өгүүлэх болно.
Хэдхэн хоногийн өмнө би өөрийн ажиллаж байсан сайтад зориулж Breadcrumbs маягийн навигацийн цэс үүсгэх даалгавартай байсан. Сайт бүрт ийм цэс зайлшгүй байх албагүй гэж би боддог ч зарим тохиолдолд энэ нь маш хэрэгтэй, практик байдаг.
Гэсэн хэдий ч энэ жишээ нь практикт өргөжүүлж, хэрэгжүүлэх боломжтой үндэс суурь юм. Цэсийг ердийн тэмдэглэгдсэн жагсаалтыг ашиглан үүсгэнэ
| 1 | ul |
Гэхдээ эхлээд бидний хамтран ажиллах жишээг харцгаая:
Цэс нь маш энгийн бөгөөд бидний үүсгэх кодтой адил юм.
HTML код - тэмдэглэгдсэн жагсаалт ul
- Гэр
- Үндсэн хэсэг
- дэд хэсэг
- Дэд дэд хэсэг
- Таны яг одоо байгаа хуудас
Цэсийн бүх зүйлд сүүлчийнхээс бусад холбоосууд байдаг - "Таны яг одоо байгаа хуудас" (Таны яг одоо байгаа хуудас). Цэс дээр ажиллаж байхдаа би гайхаж байсан - жагсаалт нь цэс үүсгэхэд хамгийн тохиромжтой бүтэц мөн үү? Энэ тохиолдолд жагсаалтыг ашиглах нь хатуу дүрэм биш гэдэгт би итгэдэг, гэхдээ энэ нь хамгийн утга учиртай бөгөөд зөв сонголт юм шиг санагдаж байна.
CSS код - цэсийн хэв маягийг бий болгох
Бид цэсний ерөнхий хэв маягийг тохируулсан - тэмдэглэгээг арилгаж, догол мөрийг дахин тохируулна уу Firefox хөтчүүд.IE:
бүх цэсийн өндөртэй тэнцүү өмч дамжуулан хөвөгч болгох - . Мөн текстийн өнгийг тохируулна уу. Дараа нь бид холбоосын зохион байгуулалтаас хайчилж авсан дэвсгэр зургийг байрлуулна. Үүнийг хийхийн тулд та зөвхөн "сум"-ыг өөрөө хайчлах хэрэгтэй.... үүнийг бид баруун тийш (100%) "түлхэж", яг босоо байдлаар (50%) байрлуулна. Бид мөн баруун талд байгаа холбоосыг дотогшоо оруулдаг
| 1 | дэвсгэр-зүүн: 15px |
Бараг бүх зүйл аль хэдийн хийгдсэн. Энэ нь холбоосын текстийн хэв маягийг тохируулах хэвээр байна. Стандарт доогуур зураасыг арилгаж, өнгийг нь өөрчил:
.crumbs li a :link , .crumbs li a :visited ( бичвэр чимэглэл : байхгүй ; өнгө : #777 ; )| 1 | : гүйлгэх |
| 1 | : анхаарлаа төвлөрүүл |
Бидний ажлын үр дүнг энд харуулав.
Орчуулагчийн тэмдэглэл:
Өгүүллийн зохиогч миний ойлгож байгаагаар жишээг аль болох хялбарчилж, кодыг тус тусад нь хялбарчилсан. Баримт нь цэсийн зүйл бүрийн шугаман хэвтээ градиент нь жишээн дээр тодорхой харагдаж байна. Гэсэн хэдий ч кодонд үүнийг харуулаагүй болно. За, энэ нь хамаагүй - CSS3 дээр шугаман градиент үүсгэх нь үнэхээр асуудал мөн үү? Даалгавар өөрөө хийгдсэн!
Мэндчилгээ. Breadcrumbs нь ямар ч вэб сайтад хэрэгтэй блок юм, учир нь энэ нь танд одоо байгаа хуудас руугаа бүрэн замыг харах боломжийг олгодог. Өнөөдөр би танд CSS дээр талхны үйрмэгийг хэрхэн загварчлахыг хэлэх болно. Бүтээх биш, тухайлбал зохицуулах. Ерөнхийдөө олон сонголт байгаа, би хоёрыг хөндөх болно.
Энгийн дизайны сонголт - зураггүй
HTML код нь талхны үйрмэгийг дуурайдаг. Энэ нь иймэрхүү байх болтугай:
Зарчмын хувьд та зүгээр л өнцгийн хаалт тавьж болно, гэхдээ дараа нь шугамын зузааныг хянах ямар ч арга байхгүй. Би үүнийг өөрчлөлтийн тусламжтайгаар өөрөөр хийхийг санал болгож байна. Үүнийг хийх код энд байна:
Cumbs1 a:not(:сүүлчийн хүүхэд):дараа(
агуулга: "";
дэлгэц: inline-block
өргөн: 5px
өндөр: 5px;
дээд хүрээ: 2px хатуу хар;
баруун хүрээ: 2px хатуу хар;
хувиргах: эргүүлэх (45 градус);
зүүн талын зах: 5px
}
.cumbs1 a:hover(
өнгө: улбар шар;
}
Магадгүй таны хувьд энэ нь нарийн төвөгтэй сонгогчид байх болно, дараа нь энэ нийтлэлийг үзээрэй. Хамгийн гол нь: псевдо элементийг ашиглан (энэ нь юу болох, хэрхэн ашиглах талаар - ) холбоос бүрийн төгсгөлд манай тусгаарлагчийг нэмсэн. Энэ нь хоёр хүрээ ашиглан үүссэн бөгөөд 45 градус эргүүлнэ. Бид мөн хулганы холбоосууд дээр улбар шар өнгийг нэмдэг. Энд зарчмын хувьд, бүх дизайн.
Өөр нэг дизайны сонголт - зурагтай
Энэ тохиолдолд талхны үйрмэг илүү сонирхолтой харагдах болно, жишээ нь:
Үүнийг хийхийн тулд бидэнд зураг болон зарим CSS загвар хэрэгтэй:
Cumbs2(
дэвсгэр: улбар шар;
хамгийн их өргөн: 250px
}
.cumbs2 a(
дэлгэц: inline-block
дүүргэх: 7px 0
өнгө: #000;
}
.cumbs2 a:not(:сүүлчийн хүүхэд)(
дэвсгэр: url(arrow.png) давтагдахгүй 100% 50%;
баруун талын дэвсгэр: 33px;
}
html кодБи иш татдаггүй, учир нь энэ нь эхний тохиолдолтой адил юм. Эндээс хаанаас эхлэх вэ? Эхлээд бид бүхэл бүтэн блокны дэвсгэр өнгө, хэмжээг талхны үйрмэгээр тодорхойлно. Дараа нь бид холбоосын ерөнхий хэв маягийг тохируулна - блок доторх төрөл, дээд ба доод хэсэгт догол мөр, өнгө.
Дараагийн алхам бол хамгийн сонирхолтой нь - псевдо анги биш блок ашиглан сүүлчийнхээс бусад бүх холбоосыг сонгоод, тэдгээрийн арын дэвсгэр зургийг arrow.png, давталтгүйгээр, арын дэвсгэрийг дунд хэсэгт байрлуулна уу. өндөр ба хамгийн төгсгөлд нэг холбоосын өргөнд. Эхний хоёр холбоос дээр зургийг байрлуулахын тулд баруун талд байгаа догол мөр хэрэгтэй. Хэрэв байхгүй байсан бол зураг нь текст рүү орох байсан.
Хуурамч бус анги хэрхэн ажилладаг талаар та аль хэдийн таамагласан гэж бодож байна - энэ нь хаалтанд зааснаас бусад бүх элементүүдийг сонгодог. Хэрэв ямар нэг зүйл бол ирээдүйд би псевдо ангитай ажиллах талаар өөр нэг богино тэмдэглэл бичих болно: үгүй , бүх зүйл илүү тодорхой болно. За ингээд та өөрөө хийж болох энгийн 2 ширхэг талхны загварыг энд оруулав.
