JQuery နဲ့အကော်ဒီယန်၏ပုံစံအတွက် site ကိုဒေါင်လိုက် menu ကို

သင်သိအဖြစ် menu ကို - ဆိုက်၏အရေးပါသောအစိတ်အပိုင်းတစ်ခု။ စိတ်ဝင်စားစရာကောင်းတဲ့လမ်းကြောင်းရှာရန်အွန်လိုင်းသယံဇာတအကျိုးစီးပွားဧည့်သည်များနိုင်ဖြစ်ပါတယ်။ ထို့အပြင်ခုနှစ်, မဆိုမီနူး၏အရေးပါသောပစ္စည်းဥစ္စာပိုင်ဆိုင်မှု - ၎င်း၏ Compact ။ အလွယ်တကူ HTML နဲ့ CSS ကိုသုံးပြီးဖန်တီးရိုးရှင်းတဲ့ဒေါင်လိုက် menu ကို။ ဒါပေမယ့်ကျနော်တို့နောက်ထပ် go: စို့ကျွန်တော်တို့ကို jQuery ၏အကူအညီဖြင့် menu- "အကော်ဒီယန်" ကိုဖန်တီးရန်သင်ယူကြသည်။

တစ်ဦး menu- "အကော်ဒီယန်" Create

တစ်ဦးအကော်ဒီယန်၏ပုံစံအတွက်ဒေါင်လိုက် menu ကဘာလဲ? ဒါက drop-down list ကို, သွားလာရန်လွယ်ကူသောဖန်တီးကာစတိုင် site ကိုပေးသောဖြစ်ပါတယ်။ ဤနည်းဖြင့်ဖျော်ဖြေ Menu ကို, သငျသညျခွဲပစ္စည်းများအများကြီးကိုဖွင့်ဖို့ခွင့်ပြုပါတယ်။ သူတို့ကို Access ကိုသင်လိုချင်သောပစ္စည်းကိုပေါ် mouse ကို click နှိပ်သည့်အခါတွေ့ရှိနိုင်ပါသည်။ တစ်စုံတစ်ဦးကပြုလုပ် jQuery ၏အသုံးပြုမှုမရှိဘဲဤဖက်ရှင်အတွက်ရိုးရှင်းတဲ့ menu ကိုအောင်တတ်နိုင်သမျှကြောင်းပြောပါလိမ့်မည်။ ဟုတ်ကဲ့ကြောင့်ဖြစ်ပါတယ်။ သို့သော်ဤအရာဝတ္ထုစမတ်ဖုန်းသို့မဟုတ် tablet များ၏ပိုင်ရှင်များအလွန်အသုံးဝင်လိမ့်မည်မဟုတ်ပေ။ ရဲ့လူအပေါင်းတို့အားဆွဲဆောင်တစ်ဒေါင်လိုက် menu ကဖန်တီးကြပါစို့။ ထို့နောက်တစ်ဦးအညွှန်း styling အရောင်ပြောင်းလဲနေတဲ့ကြောင့်မည်သည့် site ကိုမှဒီဇိုင်းကိုထိန်းညှိဖို့ဖြစ်နိုင်ခြေရှိလိမ့်မည်။

HTML code တွေဟာ

ဒီတော့ကျွန်တော်တို့ရဲ့ဒေါင်လိုက် menu ကိုဖန်တီးရန်, သင်ပထမဦးဆုံးအောက်ပါလိုင်းများဆံ့တံ့သော, အက HTML-code ကို dial ရမယ်:

Accord_menu.html လို့ခေါ်တဲ့ဖိုင်ထဲမှာဒီ code ကို save လုပ်ပါ။

သငျသညျမွငျနိုငျအဖြစ်ကျနော်တို့အနေနဲ့နံပါတ်စဉ်မပါတဲ့ list ဖန်တီးခဲ့ကြသည်။ ဒါဟာ 3 အဓိကအချက်များပါဝင်သည်:

- ဓာတ်ပုံများ;

- ရုပ်ရှင်;

- စာအုပ်တွေ။

တစ်ခုချင်းစီကို item အနည်းငယ်အပိုဒ်ရှိပါတယ်။ အဘယ်မှာရှိ, သင်လင့်များကိုထည့်သွင်းဖို့ # လိုအပ်ပါလိမ့်မည်နေကြသည်။ အခုတော့ကစတိုင်လ်ကိုဖော်ပြရန်ရန်အရေးကြီးပါသည်။ ဒါဟာအားလုံးသင့်အင်တာနက်အရင်းအမြစ်များ၏ကြည့်ပေါ်တွင်မူတည်သည်။ အဆိုပါ site ကိုဒေါင်လိုက် menu က၎င်း၏ဒီဇိုင်းသို့လိုက်ဖက်စွာပေါင်းစည်းရမည်ဖြစ်သည်။

CSS ကို-code ကို

စတိုင်များနှင့်အတူသငျသညျခကျခဲမဖြစ်သင့်ပါတယ်။ ကျနော်တို့ကဒီဥပမာထဲမှာတစ်ဦး gradient ကိုဝစွာအသုံးပြုမှသာသတိပြုပါ။ ဤတွင် CSS ကို-code ကိုဖြစ်ပါသည်:

အရောင်ကတော့ CSS ကို-ဖိုင်ထဲမှာသတ်မှတ်ထားတာဖြစ်ပါတယ်, အရွယ်အစားအမှတ်အသားများလက်ဝဲပေါ်တွင်စာရင်းထဲတွင်ပစ္စည်းများမှဖယ်ရှားပစ်ပါသည်။ ဒါဟာသင်ကကျော်ပျံဝဲသည့်အခါတစ်ဦးချင်းစီကို item နှင့် sub-menu ကိုပြုမူဖို့ဘယ်လိုပြဋ္ဌာန်းခဲ့ပြီ။ ဥပမာ:

# e1fee2 - ဤ ဖျော့အစိမ်းရောင်အရောင် ခွဲ။

သငျသညျသူတို့အပေါ်မှာပျံဝဲလာသောအခါ # C4f0f7 -golubovaty အရိပ်ခွဲ။

display property ကလိုအပ်သော padding နဲ့အရွယ်အစားကိုထိန်းညှိဖို့ပိတ်ပင်တားဆီးမှုတန်ဖိုးကိုမေးကြည့်ပါ။ အရောင်, အရွယ်အစား, ဖောအမျိုးအစား, တည်နေရာ - အရာအားလုံး CSS ကိုဖိုင်ထဲမှာကိုဖော်ပြရန်ကဲ့သို့ဖြစ်၏။ ဥပမာအားဖြင့်, accordionmenu_my1.css ကြောင့်ခေါ်ပါ။

jQuery menu ကတိုးတက်မှုချိတ်ဆက်ခြင်း

သငျသညျ, ကျွန်တော်တို့ရဲ့ရည်မှန်းချက်မှတ်မိစေခြင်းငှါအဖြစ် - တစ်ဦးဒေါင်လိုက် menu ကို jQuery ကိုဖန်တီးရန်။ သင်ဤနည်းပညာကိုအကျွမ်းတဝင်မဟုတ်ခဲ့လျှင်, စိုးရိမ်ပူပန်ကြပါဘူး။ ကျနော်တို့က Google repository ကိုသုံးပါနှင့် JQuery script ကိုချိတ်ဆက်ပါ။ ဤသည်ကပိုပြီးဆွဲဆောင်မှု menu ကိုဖြစ်စေမည်။ jQuery Hypertext Markup HTML နဲ့ JavaScript ကို၏အပြန်အလှန်အပေါ်အခြေခံပြီးတစ်ဦး JavaScript ကိုစာကြည့်တိုက်ဖြစ်ပါတယ်။ jQuery ကိုသင်ဒြပ်စင်များ၏အကြောင်းအရာနှင့် attribute တွေဝင်ရောက်ဖို့ခွင့်ပြုပါတယ်။

ဒါကြောင့် HTML ကို-ဖိုင်ခန္ဓာကိုယ်အတွက်လိုအပ်သော script ကိုချိတ်ဆက်နှင့်မြင်းပြိုင်ပွဲဒြပ်စင် မှလွဲ. 2 variable တွေကို၏သိုလှောင်မှုအတွက်စည်းမျဉ်းစည်းကမ်းသတ်မှတ်ထားသည်။ မောက်ကလစ်နှိပ်လည်းမရှိသည့်အပေါ်တဦးတည်း၏အဖွင့်လှစ်မှာကိုအခြား tabs များပိတ်, code ကိုကူညီသည်။ ဒီမှာကြည့်ဘယ်လိုဖွင့်:

အားလုံးအပြောင်းအလဲများကို Save ကဘရောက်ဇာကို Menu ထဲမှာတူအဘယ်အရာကိုကြည့်ပါ။ ဆိုလိုသည်မှာတစ်ဘုံရလဒ်ဖြစ်ပါသည်: ရလဒ်အနေနဲ့ကျနော်တို့ကိုသူတို့ဦးစားပေးအပေါ်မူတည်ပြီးသင်အမြဲပြောင်းလဲပစ်နိုင်မအနေနဲ့ဆွဲဆောင်မှု menu ကိုလာကြပြီ။ ထိုအ jQuery, CSS ကို၏လယ်ပြင်တွင်အသစ်သောအသိပညာလေ့လာဆည်းပူး, သင်သည်သူတို့၏ကျွမ်းကျင်မှုတိုးတက်စေခြင်း, ဆိုဒ်၏ထူးခြားသောဒြပ်စင်ဖန်တီးပါလိမ့်မယ်။