Drop-down CSS ကို menus တွေလုပ်ဖို့ဘယ်လို

ညွှန်ကြားချက်

ပထမဦးစွာဖွင့် drop-down menu ကိုကဘာလဲဆိုတာနားလည်ကြကုန်အံ့။ ဒီချက်နှင့်အဓိပ္ပါယ်လက်အောက်တွင်ကွဲပြားခြားနားသောအပြင်အဆင်ဆောက်လုပ်ကွဲပြားခြားနားသောနည်းလမ်းများအများကြီးရရှိသွားတဲ့။ ဤကိစ္စတွင်ခုနှစ်, ကျနော်တို့တော်တော်များများအဆက်မပြတ်မြင်နိုင်ပစ္စည်းများနှင့် (ဝှက်ထား) အများအပြားထပ်တိုးပါဝင်သည်ဟုတစ်ဖွဲ့စည်းပုံမှာခွဲခြမ်းစိတ်ဖြာပါလိမ့်မယ်။ ရဲ့သီအိုရီနှင့်အတူပြီးအောင်နှင့်လေ့ကျင့်ရန်စတင်ကြပါစို့။

• ကျွန်တော်တို့ရဲ့ menu ရဲ့ layout ကိုဖန်တီးပါ။ ဒီက HTML-code ကိုတံဆိပ်ကပ်ခြင်းပြုပါရန်။
  • • <: တစ်အသိုက်စာရင်း Create / ul> ။ ဤကဲ့သို့သောအရာတစ်ခုခုကိုသင့်ရဲ့ Drop-down menu ကိုတူအောင်သငျ့သညျ။ နောက်ပိုင်းမှာ်ရောက်စွက်ဖက်ဖို့ CSS ကို။ ဤကိစ္စတွင်အဓိကစာရင်းသုံးခုအဓိကဒေသများပါဝင်သည်နှစ်ယောက်ပူးတွဲ။
    • အဆိုပါ sub-menu ကိုဖျောက်ထားပါ။ ဒီအတှကျအကြှနျုပျတို့သကိုနှိပ်ပြီးအသုံးပြုအောက်ပါဂုဏ်သတ္တိများသတ်မှတ်: ul ul {display: none;} ဒီဖန်သားပြင်ကနေဒုတိယစာရင်း၏ဒြပ်စင်ဖယ်ရှားပစ်ပါလိမ့်မယ်။
    • တစ်ဦး menu ကို CSS ကို Create, အဓိကစာရင်းထဲမှစက်စက်ကျ။ အဆိုပါတန်းဒေသတွေစတိုင်စာရွက်များကိုအောက်ပါစည်းမျဉ်းရေးလိုက်: ul li: မောက်စ်တင် ul {display: block ကို;} ။ ဒီ entry မောက် ul စာရင်းထဲတွင်တည်ရှိပြီးသောဒြပ်စင် li, ကျော်အခါမျက်နှာပြင် ul (ပူးတွဲပါ) ပေါ်ဆိုလိုသည်။ ပထမတစ်ချက်မှာထိုကဲ့သို့သော scheme ကိုရှုပ်ထွေးခြင်းနှင့်ရှုပ်ထွေးပုံပေါက်ပေမည်။ ဒါပေမယ့်တကယ်တော့, အရာအားလုံးသည်အလွန်ရိုးရှင်းပါသည်။
    • ဒီ tags များ
    • သင့်ရဲ့ content တွေကိုထည့်ခြင်းဖြင့်သင့်ကိုယ်သင် layout ကိုအသုံးပြုပါ။ သငျသညျစာရင်းဒြပ်စင်၏နံပါတ်ပြောင်းလဲနိုင်သည်။

    အလှဆင်အပြောင်းအလဲများ

    အဖြစ်မကြာမီ main menu ကို layout ကိုအဆင်သင့်ဖြစ်သကဲ့သို့, သင်မှတ်ပုံတင်မှဆက်လက်ဆောင်ရွက်နိုင်ပါ။ ဖြစ်ကောင်း, စာရင်းထဲကို item ညွှန်ပြအမှတ်အသားများဖယ်ရှားပစ်ရဆန္ဒရှိပထမဦးဆုံးဌာန၌အများအပြား။ ဒါဟာတစ်ခုတည်းသောပိုင်ဆိုင်မှု CSS ကို, အမည်ရ list-style-type အမျိုးအစားကိုအသုံးပြုပြီးပြုသောအမှုဖြစ်ပါတယ်။ li: သင်အောက်ပါ entry ကို add ဖို့လိုအပ် {list-style-type ကို: none;} ။ ထိုအခါသင်သည် frame ကိုထည့်သွင်းခြင်းနှင့်ဖြစ်စေနိုင်ပါတယ် နောက်ခံ။ အဆိုပါနယ်စပ်နှင့်နောက်ခံဒီအားဖြင့်သင်တို့ကိုကူညီပေးသည်။ ဖြစ်ကောင်းဖြစ်နိုင်ခြို့ဆွဲ-down menu ကိုတူညီတဲ့အခြေခံဒြပ်စင်မှာတွန်းတစ်ဦးအပိုဆောင်းစာရင်းအဖြစ်ပေါ်လာပါလိမ့်မယ်သဘောကျမည်မဟုတ်။ ဒီကို fix စေရန်, သင်ကနေရာချလို့ရပါတယ်။ ဒီလိုလုပ်ဖို့ထပ်ဆင့်စတိုင်စာရွက်များကိုအောက်ပါ entry ကိုရေးရန်: ul ul {အနေအထား: အကြွင်းမဲ့အာဏာ; left: 15px; ညာဘက်: 15px; ထိပ်တန်း: 15px; အောက်ခြေ: 15px;} ။ ၏သင်တန်း, တန်ဖိုးများသင်သည်သင်၏ကိုယ်ပိုင်သုံးပါလိမ့်မယ်။ သငျသညျ drop-down menus တွေမြင်ချင်ဘယ်မှာပေါ် မူတည်. CSS ကိုအမျိုးမျိုးသောသက်ရောက်မှု add နှင့်ကျွန်ုပ်တို့၏စာရင်းကိုအလှဆင်နိုင်သောအများအပြားပိုပြီး features တွေပူဇော်ပါလိမ့်မယ်။

    ကောက်ချက်

    နောက်တကြိမ်က menu က layout ကို၏ဆောက်လုပ်ရေးသတိပြုရကျိုးနပ်သည်။ ဥပမာအားအဘို့ဤကိစ္စတွင် embedded တန်ဖိုးကို, ul ul အတွက်အသုံးပြုတဲ့ CSS ကိုစည်းမျဉ်းစည်းကမ်းတွေကို assign ရန်။ သင်သည်အခြားအလားတူဖွဲ့စည်းပုံဖြည့်ဆည်းဖို့စာရွက်စာတမ်းမှာရောက်နေတယ်ဆိုရင်, ကြီးမားသောပြဿနာများရှိစေနိုင်သည်။ ဤအခွအေနမြေားတှငျ, သငျသညျတိကျတဲ့ရည်ရွယ်ချက်ဥပမာ, selector တွေကိုသို့မဟုတ်အိုင်ဒီ-၏ ID သုံးစွဲဖို့လိုအပ်ပါတယ်။ အထက်ပါဆောင်းပါး layout ကို drop-down menu ကအထွေထွေဒီဇိုင်းကိုရင်းနှီးကျွမ်းဝင်စေရန်ဒီဇိုင်းပြုလုပ်ထားသည်။ အလုပ်၏ကျန်သင့်ရဲ့ပခုံးပေါ်မှာကျိန်းဝပ်။