Энэ нийтлэлд нэмэлт jQuery-д зориулсан энгийн цэс бий. Демо файлыг үзэхийн тулд хэсэг хугацаа зарцуулаарай. Таныг jQuery болон CSS-ийн үндсийг бага зэрэг мэддэг гэж бид таамаглаж байна. Энэ цэсийг үүсгэх гол талууд нь дараах CSS параметрүүд юм: байрлал, дээд, зүүн, z-индекс.
Эдгээр параметрүүдийг ашиглан курсорыг зөөвөрлөхөд бидний цэс яг хүссэнээр гарч ирэх ба бусад бүх элементүүдийг зөв сонгох боломжтой. Мөн курсорыг зөөвөрлөхөд цэс гарч ирэх ба курсорыг холдуулах үед мэдэгдэхээр тохируулж болно. Эдгээр санааг хэрэгжүүлэхийн тулд бид jQuery функцуудыг ашиглана: mouseenter болон mouseleave. Энэ бол цэсийг бий болгоход хэрэгтэй зүйл юм!
Эцсийн үр дүнгийн Демо файлыг татаж авахаар илгээсэн
HTML код
Цэсийн HTML кодтой танилцана уу:
Таны харж байгаагаар энд цэсийн зүйлүүдийг хэрэгжүүлэх зарим эрэмблэгдээгүй жагсаалтууд байна. Унж буй цэс нь унждаг цэсийн ангиллыг өгдөг бөгөөд унждаг цэсийг өөрөө дэд слайд гэж ангилдаг. Ангийн нэрийг jQuery өөрчилснөөр аль цэсийг харуулахыг зааж өгнө.
CSS код
CSS кодыг шалгана уу:
/* Унтраах цэс эхлэхэд зориулсан CSS */
ul
{
жагсаалтын хэв маяг: байхгүй;
дүүргэх: 0px;
захын зай: 0px
}
улли
{
дэлгэц: шугаман;
хөвөх:зүүн;
}
улли а
{
өнгө: #ffffff;
дэвсгэр:#990E00;
баруун захын зай: 5px;
үсгийн жин: тод;
үсгийн хэмжээ: 12px;
font-family:verdana;
текстийн чимэглэл: байхгүй;
дэлгэц:блок;
өргөн: 100px;
өндөр: 25px;
шугамын өндөр: 25px;
текстийг зэрэгцүүлэх:төв;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
хил: 1px хатуу #560E00;
}
ul li a:hover
{
өнгө: #cccccc;
дэвсгэр:#560E00;
үсгийн жин: тод;
текстийн чимэглэл: байхгүй;
дэлгэц:блок;
өргөн: 100px;
текстийг зэрэгцүүлэх:төв;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
хүрээ: 1px хатуу #000000;
}
ul li. дэд холбоосууд a
{
өнгө:#000000;
дэвсгэр:#f6f6f6;
хилийн доод: 1px хатуу #cccccc;
үсгийн жин:хэвийн;
текстийн чимэглэл: байхгүй;
дэлгэц:блок;
өргөн: 100px;
текстийг зэрэгцүүлэх:төв;
захын дээд: 2px;
}
ul li.sublinks a:hover
{
өнгө:#000000;
дэвсгэр:#FFEFC6;
үсгийн жин:хэвийн;
текстийн чимэглэл: байхгүй;
дэлгэц:блок;
өргөн: 100px;
текстийг зэрэгцүүлэх:төв;
}
ul li.дэд холбоосууд
{
дэлгэц: байхгүй;
}
/* Dropdown цэсний төгсгөлд зориулсан CSS */
Ихэнх CSS кодын цэсийг форматлахад зориулж засварласан байдаг (та нэмж болно гадаад төрххамгийн сайн дүгнэлт хийх цэс), гэхдээ бас зарим чухал зүйлүүд байдаг:
1 - Тусламжийн жагсаалтын хэв маягийн табуудын жагсаалтыг харна уу: байхгүй;
2 – Жагсаалт нь блок элементүүд бөгөөд үргэлж босоо дарааллаар харагдана гэдгийг бид мэднэ. Тэдгээрийг хэвтээ байдлаар үүсгэхийн тулд бид жижиг элементүүдийн параметрийг тохируулж, дараах кодыг ашиглан зүүн талд нь зэрэгцүүлнэ.
Дэлгэц: дотор;
хөвөх:зүүн;
3 – Төгсгөлийн ажил нь жижиг элементүүдээр хийгдсэн. Бид тэдгээрийг нэмэлт дэлгэц: блок ашиглан блокийн элементүүд болгон дахин боловсруулдаг (энэ аргын тусламжтайгаар бид одоо тэдгээрийн өргөний утгыг тохируулах боломжтой).
4 – Hovaєmo тусламжийн бүх цэс:
Ul li.дэд холбоосууд
{
дэлгэц: байхгүй;
}
jQuery
Унждаг цэсийг бүдүүлэг хүчээр хэрэгжүүлсэн бол нэмэлт цагийг илрүүлэх javascript кодҮүнээс өмнө тэнд маш олон шаардлагагүй код байсан. Өнөөдөр бидэнд jQuery л хэрэгтэй байна:
$(функц())(
Submenu.css((
байрлал: "үнэмлэхүй",
zИндекс: 1000
});
Submenu.stop().slideDown(300);
$(энэ).slideUp(300);
});
});
});
Энэ бол ийм энгийн зүйл. Энэ хэрхэн ажилладагийг тайлбарлая. Юуны өмнө jQuery хянагч дээрх кодыг харцгаая.
$(функц())(
...
});
Хулганы курсор цэсийн анги хуваарилагдсан элемент дээр ($(".dropdown") шилжих үед (хулганы оруулах функц) манай код идэвхждэг. Манай випадка цэсэнд дараах зүйлс бий.
$(функц())(
$(".dropdown"). mouseenter(функц())(
........
});
});
Илгээх цэг дээр хулганы курсор үсрэхээс өмнө эхний нээлттэй цэсэнд нуусан зүйлээ (нуух()) авч үзье.
$(". sublinks").stop(худал, үнэн).нуух();
Бид товчлуурын функцэд анхаарлаа хандуулдаг бөгөөд энэ нь зөвхөн нэг цэсийг харуулах боломжийг олгодог бөгөөд хулганы курсор цэсийн янз бүрийн зүйлээр шилжих үед гарч ирдэг. Энэ функцээр бид хурдасгаагүй тул цэснээс хулганы курсорыг буцаах хүртэл доош унадаг арьсны цэс нээгдэхгүй. Хэрэв та хэд хэдэн доторлогоо хийвэл энэ нь өвөрмөц байх болно. Дараа нь цэсийг илүү дэлгэрэнгүй нээцгээе, юу унах, өөрчлөгдөх вэ:
Var дэд цэс = $(энэ).эцэг ().Дараагийн();
HTML кодонд юу тохиолдох вэ:
Хэрэв хулганы курсорыг унадаг анги бүхий мессеж дээр аваачвал бид parent()-ын тусламж руу буцаж очоод "li" руу шилжиж, дараагийн()-ын тусламжтайгаар шаардлагатай цэс рүү шилжинэ. "li" нь аль хэдийн дэд байрлалын ангилалд (дэд холбоосууд) байх болно. Тиймээс jQuery нь курсор дуун дээр очвол доош унах цэсийг олоход хялбар болгодог.
Submenu.css((
байрлал: "үнэмлэхүй",
дээд: $(энэ).офсет().дээд + $(энэ).өндөр() + "px",
зүүн: $(энэ).offset().зүүн + "px",
zИндекс: 1000
});
Код нь маш чухал, учир нь энэ нь доош унах цэс нь зааврын дагуу гарч ирэхийг баталгаажуулдаг. Хэрэв байрлалыг үнэмлэхүй гэж тохируулсан бол бид хуудасныхаа аль ч хэсэгт элементийг байрлуулж болно. Дараа нь бид курсорыг $(this).offset().top (курсорыг зөөвөрлөх одоогийн цэсийн зүйл рүү очдог) ашиглан бичлэгийн дээд байрлалыг тохируулж, шинэ өндрийн утгыг нэмснээр цэс яг доор харагдаж байна, би чадах бүхнээ хийх болно. Энэ нь зүүн талын параметртэй адил ажилладаг. Дараа нь бид z-индексийг ашиглан манай цэсийг бусад элементүүдийн дээр харуулах болно.
Submenu.stop().slideDown(300);
Мэдээжийн хэрэг, та fadeIn, эрчим хүчний хэв маягийг ашиглан хөдөлгөөнт дүрс хийх гэх мэт бусад хөдөлгөөнт дүрсийг ашиглаж болно.
Одоо та доош унах цэсийг харуулах үзэл баримтлалд тайвширч, үүнийг олж мэдэх хэрэгтэй. Бидэнд дараах кодын хэсэг хэрэгтэй болно:
Submenu.mouseleave(функц())(
$(энэ).slideUp(300);
});
Доош унах цэсийг авахын тулд бид slideDown-ийн эсрэг утгатай slideUp-г ашигладаг. Дэд цэс нь бид тодорхой цэсний зорилгоор үүсгэсэн тул өөрчлөлт гэдгийг анхаарна уу.
Тиймээс бид jQuery дээр тохирох нэг түвшний цэсийг нэмж оруулав.
Өнөө үед jQuery-ийн навигацийн цэсүүд томорч, дээр нь үг бичсэн блокууд л байна. JQuery болон CSS3-ийн тусламжтайгаар та бүр гайхалтай харагдах навигацийн цэс үүсгэж болохыг олж мэдсэн.
JQuery-ийн чадавхийг ашиглан бид динамик цэсэн дэх навигацийн цэсийг дахин төлөвлөх боломжтой. Хэрэв та CSS3 ашиглахгүйгээр динамик навигац үүсгэхийг хүсвэл JQuery цэсийг илүү ажиллагаатай болгоно.
Динамик функцээс гадна дизайн нь чухал үүрэг гүйцэтгэдэг. Танай сайтад зочлоход биднийг хамгийн түрүүнд урамшуулдаг хүмүүсийг хармаар байна.
Хэрэв цэс нь харагдахгүй байвал энэ нь хөлсний цэргүүдэд харилцан харилцаа тогтоох боломжийг олгоно. Garny загварЦэс нь таны сайтын өнгө үзэмжийг нэмэгдүүлж, хувь нэмэр оруулагчдын хоорондын харилцааны хамгийн сайн нотолгоог өгөх болно.
Өнөөдөр би та бүхэнд 30 мангасыг танилцуулж байна jQuery програмууднавигацийн цэс.
1.ТүлхэхPushy нь дасан зохицох чадвартай, навигацийн цэсийн зурагтай холбоогүй, харин оронд нь CSS шилжилтийн шинэчилсэн загвартай. Ийм л гайхамшигт үйлчилдэг хөдөлгөөнт төхөөрөмжүүд. Үзэсгэлэнг үзэхэд хялбар бөгөөд уянгалаг дуу танд таалагдах болно.
Демо | уруу татах
2. ЗовсонЭнд гүйлгэх сайхан навигацийн жагсаалт үүсгэх өөр jQuery админ цэс байна. Його агшаасан будааГаралтын файлуудын хамгийн бага хэмжээ байдаг.
Демо | уруу татах
3. jQuery Pop цэсЭнэ бол олон ашигтай функц бүхий энгийн дасан зохицох цэс юм. Цэсийн дүрс дээр дарахад цэсийн цонх нь тухайн зүйлийн дүрстэй нийлдэг. Демо үзэх.
Демо | уруу татах
4. SlidebarsSlidebars нь зурагтай холбоогүйгээр програмын хэв маягийг хурдан бөгөөд хялбар хэрэгжүүлэхэд зориулагдсан jQuery хүрээ юм. Slidebar нь чиг баримжааны өөрчлөлт, хэмжээсийн өөрчлөлтийг мөн хүлээн зөвшөөрдөг.
Демо | уруу татах
5. jQuery квадрат цэсJQuery цэс, JQuery болон CSS3 ашиглан сайт дээр дөрвөлжин хөдөлгөөнт цэсийг хэрхэн харуулах. Үүнийг шалгаад үзүүлбэрийг нь гайхшруулаарай.
Демо | уруу татах
6. Хэтийн төлөвийн хуудас харах навигациЭнэхүү jQuery навигацийн цэс нь хуудсыг 3D цэс болгон хувиргадаг. Гол санаа нь загвар гаргах явдал юм гар утасны нэмэлт, та цэсийн дүрс дээр дарахад хажуугийн самбарын оронд цэс товшиж, цэсийг урд талд нь авчирна.
Демо | уруу татах
7. SlickNavОлон түвшин, сонголт бүхий мэдрэмжтэй гар утасны jQuery цэс үүсгэх, эсвэл зүгээр л өөрчлөхөд зориулсан залгаас. Сумисный өөр өөр хөтөч, Та нэмэлт гар ашиглан жолоодож болно.
Демо | уруу татах
8. ЦэсДэд зүйл бүхий зотон зурагтай болон холболтгүй програмуудад зориулсан jQuery цэс. Маш олон сонголтууд, нэмэлтүүд, өргөтгөлүүд байдаг бөгөөд та цэсээ өөрчлөх боломжтой.
Демо | уруу татах
9. СидрТусгай цэсэнд зориулсан jQuery залгаас ба дасан зохицох функцуудыг хялбархан нэмж оруулав. Sidr-ийн тусламжтайгаар та сайтынхаа янз бүрийн элементүүдийг үүсгэхээс гадна дасан зохицох цэсийг бий болгож чадна.
Демо | уруу татах
10. нимгэн цэсslimMenu нь танд мэдрэмжтэй, баялаг навигацийн цэсийг боловсруулахад туслах жижиг jQuery залгаас юм. Үүний гайхалтай зүйл бол та олон янзын цэстэй байх боломжтой бөгөөд тэдгээр нь бүгд дасан зохицох чадвартай байх болно.
Демо | уруу татах
11. HorizontalNavjQuery навигацийн цэс бөгөөд энэ нь савны бүхэл бүтэн хэсэгт хэвтээ цэсийг суулгах боломжийг олгодог. Энэ залгаасаас тусламж авахад үнэхээр амархан. Үүнээс гадна IE7-ийн дэмжлэгийг хэрэгжүүлж болно.
Демо | уруу татах
12. FlexNavЭнэ нь дараах медиа асуулга болон дэмжлэгтэйгээр админ контентын цэс үүсгэх JavaScript-н гар утасны анхны програм юм мэдрэгчтэй дэлгэцүүд, нэмэлт гарны эффект болон навигацыг идэвхжүүлнэ.
Демо | уруу татах
13. jQuery Menu-AimjQuery цэс бөгөөд хулганы курсор цэсийн зүйл дээр очсон үед хадмал орчуулгыг эхлүүлдэг. Амазон дээрх шиг харагдах дасан зохицох цэсийг бий болгоход тохиромжтой.
Демо | уруу татах
14. SmartMenusЦэсийг харуулах энгийн бөгөөд ойлгомжтой арга замыг өгдөг jQuery цэсийн залгаас. Дасан зохицох цэсийн жагсаалтыг бий болгох. Бүх төхөөрөмж дээр ажилладаг!
Демо | уруу татах
15. ШилжүүлэгчShifter бол шилжилт товчийг дарахад баруун талд гарч ирэх слайд цэсийг үүсгэх энгийн гар утасны анхны jQuery залгаас юм. Тохируулгын хувьд зөвхөн нэг maxWidth сонголт байна. Энэ нь танд хөдөлгөөнт төхөөрөмжүүдийн хувьд тусдаа барилга/чиглэлийг тохируулах боломжийг олгодог.
Демо | уруу татах
16. ГамбургерГамбургер бол слайд цэс үүсгэх jQuery залгаас юм Android загваруудДэлгэцийн баруун талд эвхэгддэг цэстэй програм. Цэсийг бүрэн хэмжээгээр нээхэд үйлдлийн талбар биш харин агуулгын талбартай давхцдаг.
Демо | уруу татах
17. Анхаарал төвлөрүүлFocucss - jQuery-ийн навигацийн цэс, түүний тусламжтайгаар та хажуугийн самбар дээрх цэсийн зурагтай холбоогүй цэс үүсгэх боломжтой бөгөөд үүний тусламжтайгаар та сайтын үндсэн хэсгүүдэд оролцогчдын хүндэтгэлийг нэмэгдүүлж, орлого олох боломжтой. бага мэдэгдэл дараа нь хүрэн мод хуваагдсан.
Демо | уруу татах
18. ШүүгээDrawer нь дэлгэцийн хажуу талаас дарахад хөдөлдөг мэдрэмжтэй, хөдөлгөөнт цэс үүсгэх jQuery залгаас юм. Үүнтэй төстэй функцуудыг Android нэмэлтүүдээс олж болно.
Демо | уруу татах
19. Дутман рууDatmenu - төрөл бүрийн CSS3 хөдөлгөөнт функц бүхий дээд зэргийн jQuery мэдрэмжтэй цэс. Энэ залгаасын хамгийн сайн зүйл бол түүний чадвар юм төгс байдалнэмэлт js сонголтуудын хувьд.
Демо | уруу татах
20. jPanelMenujPanelMenu нь CSS3 хөдөлгөөнт шилжилтийн функц бүхий самбарын навигацийн цэсийг үүсгэх боломжийг олгодог үзэсгэлэнтэй, орчин үеийн jQuery цэс юм. jPanelMenu загвар нь гар утсыг таамаглаж байна Facebook хувилбаруудби Google. Энэ залгаасыг гар утасны төрөл бүрийн програмуудад ашиглаж болно.
Демо | уруу татах
21. Fly Side цэсFly Side Menu нь CSS3-ийг ашиглан 3 хэмжээст шилжилтийг өөрчилсөн хажуугийн цэсийг үүсгэх гайхалтай навигацийн цэсийн залгаас юм.
Демо | уруу татах
22. PageScroll jQuery цэсний залгаасPageScroll нь jQuery гар утасны цэс бөгөөд үүнийг өөрчилдөг бөгөөд ямар ч вэбсайт болон бусад хуудсан дээр ашиглахыг зөвлөж байна.
Демо | уруу татах
23.DD дүрсний цэсDD Icon цэс нь jQuery залгаас бөгөөд үүсгэх боломжийг олгодог босоо цэсДэлгэцийн ирмэг дээр байрлах цэсний дэд зүйл бүхий дүрсүүд дээр хулганыг аваачихад гэрэлтдэг.
Демо | уруу татах
24. JQuery Mobile Date NavigationСонгосон мужид (өдөр, сар, жил) огноогоор шилжих боломжийг олгодог jQuery цэс. AJAX дуудлагаар мэдээлэл хүсэхэд тохиромжтой.
Демо | уруу татах
25. NavobilejQuery навигацийн цэсний залгаас нь гар утасны цэсийг хялбархан үүсгэх боломжийг олгодог. Мобайл төхөөрөмж дээрх цэсийн байрлалыг тохируулах Vikoryst CSS шилжилтүүд.
Тиймээс хэнд хамаатай вэ, та дэвшилтэт аргыг гайхшруулж чадна Би танд CSS-д туслах болно, статистикт дурдсанчлан -
Одоо ажилдаа орцгооё. Сүүлийн нийтлэлийн нэгэн адил эхлээд цэсийнхээ HTML кодыг бичье. Код нь энэ нийтлэлд байгаатай адил бөгөөд ингэснээр төөрөгдөл байхгүй бөгөөд энэ нь илүү үндэслэлтэй юм. Хоёр зүйл, дэд цэстэй цэс.
- догол мөр 1
- Амьдрах боломжтой цэг 1
- Випадный цэг 2
- Хөгжилтэй цэг 3
- цэг 2
- Амьдрах боломжтой цэг 1
- Випадный цэг 2
- Хөгжилтэй цэг 3
Хэрэв та өмнө нь номын санд холбогдсон ийм мөр эсвэл ижил төстэй мөр үүсгэвэл дахин ажиллах боломжгүй болно.
jQuery(document).ready(function($)( $("#slow_nav ul li")). ) ( $("ul", this).stop().slideUp(400); ));
Скриптийн өөр мөрөнд манай цэсийн ID-г зааж өгсөн болно. Та яаж зогсонги байдалд ордог вэ? Данийн аргаалбан ёсны цэсийн өмнө, дараа нь мэдээжийн хэрэг өөрийн нэрийг өөрчлөх. U tsyomu vipadku tse - #slow_nav.
Та мөн хөдөлгөөнт дүрсний цагийг тохируулах боломжтой. Энэ скрипт нь нээх, хаахад 400 миллисекунд буюу 0.4 секундын утгатай. Хэрэв та хүсвэл үүнийг өндөр эсвэл бага утгаар өөрчилж болно.
Загвар нэмэх үлдсэн хугацаа. Үнэр нь өмнөх нийтлэлийн хэв маягтай маш төстэй, зөвхөн өөр өөр байдаг хүчирхэг CSSхөдөлгөөнт дүрс.
#slow_nav > ul( өргөн: 500px; зах: 25px auto 0; ) #slow_nav > ul > li( жагсаалтын загвар: байхгүй; дэлгэц: inline-block; чимэглэл: аль нь ч биш;) #slow_nav > ul > li > a( фонт -size:18px; padding:5px; background-color:#333; color:#fff; хатуу #888; ) #slow_nav li ul li: last-child( хилийн-доод: байхгүй; ) ул li:hover( background-color:#444; ) #slow_nav li ul li:first-child(маржин-дээд:25px) байрлал:харьцангуй: өргөн: 1px;
Мөн скрипт нь зөв ажилладаг загваруудад нэг шинэ мөр нэмэгдсэн. Элементийн хувьд - #slow_nav li ul хүчийг харуулахаар тохируулсан: none; . Хэрэв та үүнийг нэмэхгүй бол доош унасан цэс шууд харагдах бөгөөд курсорыг түүн дээр гүйлгэхэд харагдахгүй болно. Reshta styles сарлагийн урагш статистик.
Гэсэн хэдий ч, энэ аргыг зөвхөн өөрөө бичсэн цэсээр хязгаарлагдахгүй, мөн WordPress зэрэг агуулгын удирдлагын системээр үүсгэгдсэн динамик цэсээр хязгаарлагдаж болно. Үүний тулд та зөвхөн хэв маягийг бага зэрэг өөрчлөх хэрэгтэй, тэгээд л болоо. Эхний HTML кодыг засварлах шаардлагагүй, зөвхөн хэв маягийг л өөрчлөх хэрэгтэй. Загварын хувьд та нэр болон #slow_nav-г өөрт байгаа зүйлээр солих шаардлагатай бөгөөд мөн нарийн ширийн зүйлсийн дагуу тохируулах боломжтой. Би тайланг цаашид хийхгүй. Арьсны асуудалд хувийн арга барил шаардлагатай тул 🙂
Энэ бүхэн хүндэтгэлийн төлөө юм. 🙂
Дэд ангиллын жагсаалт бүхий jQuery дээр гарч ирэх босоо цэсний навигацийг өөрөө бичихийн тулд та робот механизмын зарчмыг ойлгох хэрэгтэй. Юуны өмнө навигацийн бүтцийг харцгаая.
Навигац
Таны таамаглаж байсанчлан манай цэс нь тэмдэглэгдсэн жагсаалтад тулгуурладаг. Та хулганаа шошгон дээр аваачих үед
- тест 1
- тест 2
- тест 3
- тест 4
Сайн уу, унтаж байна уу? Гэхдээ бүх зүйл үнэхээр маш энгийн. Эхлэхийн тулд навигацийн жагсаалтынхаа загварын хуудсыг харцгаая, энэ нь дараах байдалтай байна.
Үндсэн хэсэг (арын дэвсгэр: rgb(244, 244, 244); үсгийн гэр бүл: Вердана; үсгийн жин: 100; ) /*---Навигаци---*/ #цэс ( өргөн: 200px; захын зай: 0; дүүргэх: 2px; ) # цэс li ( жагсаалтын хэв маягийн төрөл: байхгүй; ) .цэс (байрлал: харьцангуй; дэвсгэр: шоколад; дэвсгэр: -moz-linear-gradient(дээд, rgb(198, 255, 242), #2AC4B3) арын дэвсгэр: -webkit-linear-gradient (дээд, rgb(198, 255, 242), #2AC4B3 : 1px хатуу #2AC4B3) .цэнгүүн:hover (фон: #00c; дэвсгэр: -moz-linear-gradient (); top, rgb(230, 230, 230), #0CBFAB background: -webkit-linear-gradient(top, rgb(230, 230, 230), #0CBFAB background: -o-linear-gradient(top)); , rgb(230, 230, 230) дэлгэц: байрлал: 8px;;
дэвсгэр: -webkit-linear-gradient(дээд, rgb(198, 255, 242), #2AC4B3);
дэвсгэр: -o-linear-gradient(дээд, rgb(198, 255, 242), #2AC4B3);
хүрээ: 1px хатуу #fff; ). 230, 230, 230), #0CBFAB); дэвсгэр: -o-linear-gradient(дээд, rgb(230, 230, 230), #0CBFAB); чимэглэл: байхгүй; өнгө; цагаан ) .цэс a:хулгана (өнгө: цагаан; )
Загварын хүснэгтээс та эхлээд унасан жагсаалтыг оруулаагүй болохыг харж болно, гэхдээ энэ үед бид үүнийг тусламж болгон засах болно.
Энэ нь хуудсанд дахин зочилсны дараа устгах шаардлагатай командуудыг агуулдаг. Сонирхож амжаагүй хүмүүсээр дамжуулан ямар нэгэн объектыг олж илрүүлэх боломжгүй бол аллага байхгүйн тулд үүнийг хийсэн.
$(".цэс ул").нуух();
Энэ оруулга нь юу гэсэн үг вэ? “$()” бүтэц нь элементүүдийг сонгох боломжийг танд олгоно. Одооноос эхлээд бид дутуу байгаа зүйлсийнхээ жагсаалтыг гаргах хэрэгтэй. Бид “$()” бүтцийг аваад дотор нь объект бичээд биднийг тэмдэглэнэ. Бидний жишээн дээр энэ объект нь "цэс" ангитай тэмдэглэгдсэн жагсаалттай байх болно. Дараа нь бид "нуух ()" аргыг бичдэг бөгөөд энэ нь биднийг дарах объектыг барьж авах боломжийг олгодог.
$(".цэс span").css("арын дэвсгэр", "url("down.png")");
Яагаад санаа зовох юм бэ? Вон Эцэгийн элементэд "цэс" гэсэн ангиллаар өгөгдсөн шошгыг хайж байгаа бөгөөд "css("background", "url("down.png")")" нэмэлт аргыг ашиглан тэжээлийн хэв маягт оноогдсон. "url("down. png")" утгатай "background" нь жагсаалтыг нээх боломжтойг харуулсан дүрс юм.
Дараа нь бидний жагсаалтыг нээх загвар гарч ирэх бөгөөд энэ нь ирж байгаа юм шиг харагдаж байна:
$("# цэс li").hover(функц())( $(энэ).хүүхдүүд("ul").show(); $(энэ).find("span").css("арын дэвсгэр", " url("right.png")"); function())( $(энэ).children("ul").hide(); $(энэ).find("span").css(" дэвсгэр" , "url("down.png")");
Эцэгийн элементийн шошго нь id = "цэс" гэж томилогдсон гэдэгт бид итгэдэг. Дараа нь "hover" арга, гарт хоёр функц ирдэг. Эхний функц нь хулганы курсорыг аваачих үед идэвхгүй болох ба хулганын курсор бидэн дээр дарах элементийг арилгах үед нөгөө функц идэвхгүй болно.
Эхний функц нь:
$(энэ).хүүхдүүд("ul").show(); $(энэ).find("span").css("арын дэвсгэр", "url("баруун.png")");
"$(энэ)" бүтэц нь бидний байгаа элементийг дуудаж болно гэсэн үг юм Наразизаав (энэ нь англи хэл дээр). Тэгээд тэд биднийг шошго руу чиглүүлэв
Энэ шошгоны дараа бид дүрсүүдийг хайж, дараа нь: шошгыг хайж, дараа нь өөр дүрс болгон өөрчилнө.
Үүний дараа бүх зүйлийг анхных шигээ гүйцэтгэх функц бичигдсэн бөгөөд дараа нь хулганы курсор жагсаалтаас элементийг устгана.
Function())( $(энэ).хүүхдүүд("ul"). нуух(); $(энэ).find("span").css("арын дэвсгэр", "url("down.png")") ); )
jQuery дээр код бичиж, манай цэсийг доош буулгаж, зөв ажиллахыг хүсэхийн тулд та jquery.com сайтаас номын санг татан авч, шошгоны ард мөр бичих хэрэгтэй.
За, тэгээд л боллоо! Эцэст нь хэлэхэд, хэрэв таны сайт чухал бол скрипт нь хэтэрхий оройтож (сайт удаан хугацаанд ажиллахгүй байх болно) эхэндээ нээгдэх тул эвдэрч болзошгүй гэдгийг тэмдэглэхийг хүсч байна. тэгвэл зүгээр, энэ үнэхээр муухай байх боломжтой болно. Иймээс jQuery-ийн бүх командыг энэ конструкцийн ард байрлуулах шаардлагатай: $(баримт бичиг).ready(function()()). Энэ нь дараах байдлаар харагдах болно.
$(баримт бичиг).бэлэн(функц())( )) $(".цэс ул").нуух();
$(".цэс span").css("арын дэвсгэр", "url("down.png")");
$("# цэс li").hover(функц())( $(энэ).хүүхдүүд("ul").show(); $(энэ).find("span").css("арын дэвсгэр", " url("right.png")"); function())( $(энэ).children("ul").hide(); $(энэ).find("span").css(" дэвсгэр" , "url("down.png")");
Манай скриптийн холболтууд нь тагнаас төгсгөл хүртэл, хаалтын тагны өмнө шилжих ёстой, эсвэл скриптийг тэмдэглэгдсэн жагсаалтын дараа шууд холбож болно.
(завантажен: 314)
Нэмэлт тусламж авахын тулд JQuery сонгодог, энэ сэдвээр маш олон нийтлэл бичсэн. Би сайтыг тойрон эргэлдэж байх үед цэсийн хэсгүүдийг нээлттэй (эсвэл хэрэглэгчийн сонголтоос хамааран хаалттай) алдаж болзошгүйг нэмж, даалгаврыг улам хүндрүүлэхийг хичээсэн. Үүнд хүрэхийн тулд би JQuery Cookie залгаасыг ашиглан ажлыг хурдасгахаар шийдсэн. Энэхүү залгаасын давуу тал нь үйл ажиллагаа нь үйлчлүүлэгчийн хувьд хийгддэг бөгөөд энэ нь эргээд серверт найдах хэрэгцээг орлодог. Сул тал нь хэрэв хөгжүүлэгч JS-г идэвхжүүлсэн бол залгаас ажиллахгүй. Би энэ сонголтыг харахгүй байна, учир нь гарч ирэх мэдрэхүйн цэс бүхэлдээ алга болно. Ингээд харцгаая.Эхлэхийн тулд бид JQuery хүрээг өөрөө холбох хэрэгтэй
JQuery залгаас
Күүки:
JQuery залгаас
Код: HTML
- Дали тэмдэглэгээ. Энэ нь энгийн жагсаалт мэт харагдаж байна, ер бусын зүйл байхгүй. Та цэсийн аль нэг сонголт дээр дарахад гарчиг нь буруутай гэдгийг би зөвхөн талархах болно.
- Анхны гарчиг
- Перше посилання
Посилання нөгөө рүү
- Дали тэмдэглэгээ. Энэ нь энгийн жагсаалт мэт харагдаж байна, ер бусын зүйл байхгүй. Та цэсийн аль нэг сонголт дээр дарахад гарчиг нь буруутай гэдгийг би зөвхөн талархах болно.
- Анхны гарчиг
- Перше посилання
Түүхийн гурав дахь хэсэг
- Дали тэмдэглэгээ. Энэ нь энгийн жагсаалт мэт харагдаж байна, ер бусын зүйл байхгүй. Та цэсийн аль нэг сонголт дээр дарахад гарчиг нь буруутай гэдгийг би зөвхөн талархах болно.
- Анхны гарчиг
- Перше посилання
Бусад гарчиг
- Дали тэмдэглэгээ. Энэ нь энгийн жагсаалт мэт харагдаж байна, ер бусын зүйл байхгүй. Та цэсийн аль нэг сонголт дээр дарахад гарчиг нь буруутай гэдгийг би зөвхөн талархах болно.
- Анхны гарчиг
- Перше посилання
Гурав дахь гарчиг
Дөрөв дэх цол
За, энэ нь үгээр илэрхийлэхийн аргагүй юм. Одоо цаг нь болсон. Би код дээр хэд хэдэн тайлбар нэмэх болно, ингэснээр ойлгомжтой байх болно, chopach
Код: JS
$(баримт).бэлэн(функц())(
if($.cookie("num_open_ul"))( // күүки дотор юу байгааг баталгаажуулсан
if($.cookie("num_open_ul") != 0)( // бөгөөд энэ оруулга 0-тэй холбоогүй байна.
}
};
$("#navigation h2.navigation_head").click(function())( // дарахад функц идэвхждэг)
if(!$(энэ).next().is(":харагдах"))(
$("div.navigation_body"). ах дүүс("div.navigation_body").slideUp(500); // бусад нь урсгалаас бусад бүх зүйлийг нээж хаасан байдаг
}
$(энэ).next("div.navigation_body").slideToggle(500). ах дүүс("div.navigation_body").slideUp(500);
$(энэ).toggleClass("active_navigation").siblings("#navigation h2.navigation_head").removeClass("active_navigation"); // хэв маягийг өөрчлөхийн тулд нээлттэй эх сурвалжид анги нэмсэн
setTimeout(fncookie, 600); //бичлэгийг өөрөө унтраахгүйгээр зууханд хийнэ, ингэснээр скрипт нь бичлэг хийхээс өмнө ажлыг дуусгах боломжтой (500мс - хурд, унтрах - 600мс)
});
function fncookie())( // функцийг өөрөө бичнэ үү
var number_open_ul = 0;
var i = 0;
$("div.navigation_body"). тус бүр(функц())(
i++;
if($(энэ).(":харагдах"))(
number_open_ul = i;
}
$.cookie("num_open_ul", number_open_ul, (хугацаа нь:3, зам:"/")); // Сайтыг бүхэлд нь 3 хоног хэмнээрэй.
});
}
});
Одоо та цэсээ нээгээд, сайтаас гараад хоёр хоногийн дараа буцаж ирвэл цэс өөрөө нээгдэхгүй болно.
За, эцэст нь бидэнд бага зэрэг хүрэхгүй байна: гуйя, css загварууд. Та одоо өөрийн хүссэнээр ажиллах боломжтой, би төслүүдийн аль нэгээс бэлэн загвар авах болно
Код: CSS
#навигаци (
захын зай: 80px автомат;
өргөн: 250px;
}
#navigation h2, #navigation h2.navigation_head (
үсгийн хэмжээ: 18px;
үсгийн жин: илүү тод;
дэвсгэр өнгө: #ffb6c1;
дэвсгэр зураг: -webkit-градиент (шугаман, 50% 0.50% 100%, өнгө зогсолт (0%, #ffe9e9), өнгө зогсолт (100%, #ffb6c1));
background-image: -webkit-linear-gradient(#ffe9e9,#ffb6c1);
background-image: -moz-linear-gradient(#ffe9e9,#ffb6c1);
дэвсгэр зураг: -o-linear-gradient(#ffe9e9,#ffb6c1);
дэвсгэр зураг: шугаман-градиент(#ffe9e9,#ffb6c1);
дүүргэх: 5px 3px 6px 3px;
захын зай: автомат;
албан тушаал: харьцангуй;
}
#navigation h2.navigation_head:дараа (
байрлал: үнэмлэхүй;
баруун: 5px;
өнгө: #550000;
агуулга: "cssb";
}
#navigation h2:hover, #navigation h2.navigation_head:hover (
курсор: заагч;
}
.active_navigation(
background-image: -webkit-градиент(шугаман,50% 0.50% 100%,өнгө зогсолт(0%,#ffb6c1),өнгө зогсолт(100%,#ffe9e9)) !чухал;
background-image: -webkit-linear-gradient(#ffb6c1,#ffe9e9) ! чухал;
background-image: -moz-linear-gradient(#ffb6c1,#ffe9e9) ! чухал;
background-image: -o-linear-gradient(#ffb6c1,#ffe9e9) ! чухал;
background-image: linear-gradient(#ffb6c1,#ffe9e9) ! чухал;
}
.active_navigation:дараа (
байрлал: үнэмлэхүй;
баруун: 5px;
агуулга: "cssd" ! чухал;
}
.navigation_body(
дэлгэц: байхгүй;
}
#navigation ul (
захын зай: 0;
дэвсгэр: 0;
жагсаалтын хэв маягийн төрөл: байхгүй;
}
* html #navigation ul li (
өндөр: 1%;
}
#navigation div.navigation_body ul li (
зүүн талын зай: 10px;
}
#навигац a (
font-family: "Times New Roman";
дэлгэц: блок;
өнгө: # 918871;
дүүргэх: 3px;
дэвсгэр өнгө: #ffe3e0;
хилийн доод: 1px хатуу #fff;
текстийн чимэглэл: байхгүй;
}
#навигац a:хулганаа (
өнгө: #585858;
дэвсгэр өнгө: #ffb6cc;
}
Би хүндлэлээ алдсан мэт энд ялалтын хүч, хүч чадлын агуулгыг туршиж үзсэн: +/- хаалттай үед/ далд цэсТа мөн зураг эсвэл өөр загвар нэмж болно. Та эндээс биднээс гарч ирсэн жишээг хараад гайхаж болно
Анхны адил асуултуудыг сонсож, үнэнийг шалгахад бэлэн байна. Хамгийн сайн сайхан бүхнийг хүсье.