တစ်ဦးက step-by-ခြေလှမ်းလမ်းညွှန်
သင့်ရဲ့အညွှန်း menu ကဘေးထွက်ဆင်းထိပ်တစ်ခုသို့မဟုတ်ဒေါင်လိုက်အတန်းကိုဖြတ်ပြီးတစ်ဦးအလျားလိုက်အတန်းရှိမရှိ, ကနေဆဲပဲတစ်စာရင်းဖြစ်ပါတယ်။ ကို web အညွှန်းဒီဇိုင်းတဲ့အခါမှာ, တကအညွှန်း menu ကိုလင့်များ့ဘုန်းအုပ်စုတစ်စုကြောင်းကိုမေ့လျော့ဖို့မကြာခဏလွယ်ကူပါတယ်။ သငျသညျ XHTML က + CSS ကိုသုံးပြီးသင့်ရဲ့အညွှန်း program လျှင်မူကား, သင်ပါ (XHTML က) ဒေါင်းလုပ်လုပ်ရန်အသေးစားနှင့် (ထို CSS ကို) customize ရန်လွယ်ကူကြောင်းတစ် menu ကိုဖန်တီးနိုင်ပါတယ်။
စတင်ခဲ့သည်
အညွှန်းများအတွက်စာရင်းဒီဇိုင်းကိုစတင်ရန်, သင်ကစာရင်းသုံးစွဲဖို့လိုအပ်ပါတယ်။
ဒါဟာအညွှန်းအဖြစ်ဖော်ထုတ်ခဲ့ပြီးတစ်ဦးစံနံပါတ်စဉ်မပါတဲ့ list ဖြစ်နိုင်သည်:
သင်က HTML မှာအနီးကပ်ကြည့်ရှုလျှင်, သင်က "ပင်မစာမျက်နှာ" link ကိုလည်း youarehere တစ်ဦး၏ ID ရှိကြောင်းသတိထားမိပါလိမ့်မယ်။ ဒါဟာသင့်ရဲ့စာဖတ်သူတွေများအတွက်လက်ရှိတည်နေရာသတ်မှတ်ဖေါ်ပြတဲ့ menu ကိုဖန်တီးရန်ခွင့်ပြုပါလိမ့်မယ်။ သင်အခုသင့်ရဲ့ site ပေါ်တွင်အမြင်အာရုံ cue ၏အမျိုးအစားရှိခြင်းအပေါ်စီစဉ်ထားကြဘူးဆိုရင်တောင်သင်သတင်းအချက်အလက်များပါဝင်နိုင်ပါသည်။ သငျသညျနောက်ပိုင်းတွင် cue ထည့်သွင်းဖို့ဆုံးဖြတ်ခဲ့လျှင်, သင်သည်သင်၏ site ကိုပြင်ဆင်ထားရန်လျော့နည်းနိုင်တဲ့ coding ရှိပါလိမ့်မယ်။
မဆိုသာမရှိရင် CSS ကိုပုံစံ , ဒီ XHTML က menu ကိုစံနံပါတ်စဉ်မပါတဲ့ list နဲ့တူလှပါတယ်။ ကျည်ဆံတွေနဲ့ရှိပါတယ် စာရင်းတွင်ပစ္စည်းများ အနည်းငယ်အသစ်မှာနေကြသည်။ ငါသုံးပြီးငါသောကြောင့် အမှတ်အသားလင့်များ အများစု browser များနှိပ် (မျဉ်းသားနဲ့အပြာအတွက်) အဖြစ်လင့်များမပြပါလိမ့်မယ်။ သင်တစ်ဦးက Web page သို့အထက်ပါ HTML မှာ paste ပါလျှင်, သင့်အညွှန်းဤကဲ့သို့သောကြည့်ရှုမည်:
- နေအိမ်
- ထုတ်ကုန်များ
- န်ဆောင်မှုများ
- ကြှနျုပျတို့ကိုဆကျသှယျရနျ
ဒါဟာတော်တော်လေးပျင်းစရာဖြစ်ပြီးတစ်ဦး menu ကိုနဲ့တူတာကိုကြည့်မထားဘူး။ ဒါပေမယ့်စာရင်းကဆက်ပြောသည်အနည်းငယ် CSS ကိုစတိုင်များနှင့်အတူသင်ဂုဏ်ယူစေသည်တဲ့ menu ကိုဖန်တီးနိုင်ပါတယ်။
ဒေါင်လိုက် Navigation Menu ကို
တက်ဆင်း: ကပုံမှန်စာရင်းကဲ့သို့တူညီသောလမ်းအတွက်ဖော်ပြပေးနေသောကြောင့်တစ်ဦးကဒေါင်လိုက်အညွှန်း menu ကိုရေးသားဖို့အလွန်လွယ်ကူသည်။
အဆိုပါစာရင်းကိုပစ္စည်းများစာမျက်နှာကိုဆင်းဒေါင်လိုက်ဖော်ပြရန်။
ကျွန်မပုံစံ menus တွေပေါ့အခါ, ငါပြင်ပမှာ start နှင့်အလုပ်လို။ ဒီအားဖြင့်ငါပထမဦးဆုံးစတိုင်ဟာအူလ် # အညွှန်း, ပြီးတော့ဒီ menu ကိုများအတွက်ဒါစသည်တို့ကိုပု li ဒြပ်စင်များနှင့်ထို့နောက်လင့်များမှရွှေ့ကြောင်းဆိုလိုတာ ပထမဦးဆုံးအသငျသညျမီနူးရဲ့ width သတ်မှတ်။ ဒါက menu ကိုပစ္စည်းများကိုတာရှည်များမှာပင်လျှင်, သူတို့သည်ကျော် layout ကို၏ကျန်တွန်းသို့မဟုတ်အလျားလိုက် scrolling မဖြစ်ပေါ်စေမည်မဟုတ်ကြောင်းသေချာပါလိမ့်မယ်။
ul # အညွှန်း {width: 12em; }
ငါ width ကို set ကိုရရှိပါသည်ပြီးတာနဲ့ငါစာရင်းပစ္စည်းများနှင့်အတူဆော့ကစားနိုင်ပါတယ်။ ဤသည်ငါ့ကို (ထိုကျည်ဆံဖယ်ရှားပစ်ရ), နောက်ခံအရောင်တွေ, border, စာသား alignment ကိုနှင့်မာဂျင်ကဲ့သို့အမှုအရာတို့ကိုတင်ထားရန်ခွင့်ပြုပါတယ်။
ul # အညွှန်း li {
list-style: none;
background-color: # 039;
နယ်စပ်-top: အစိုင်အခဲ 1px # 039;
text-align: left;
margin: 0;
}
သငျသညျစာရင်းတွင်ပစ္စည်းများများအတွက်အခြေခံသတ်မှတ်ထားပါဘူးပြီးတာနဲ့သင်ကမီနူးလင့်ခ်ဧရိယာထဲမှာမြင်တွေ့ရပုံနှင့်အတူကစားခြင်းစတင်နိုင်ပါသည်။ ပထမဦးစွာစတိုင်ဟာ ul # အညွှန်း LI A နှင့်ထို့နောက်တစ်ဦးက: (သူတို့ကိုသင်ချင်လျှင်) တက်ကြွစွာ: link ကို, ဖြေ, တစ်ဦးကသွားရောက်ကြည့်ရှု: ပျံဝဲ, နှင့် A ။ လင့်ခ်အဘို့, ငါလင့်များတစ်ပိတ်ပင်တားဆီးမှုဒြပ်စင် (ထက် In-line ကိုကို default) လုပ်လို။ ဒါကသူတို့ကပိုအစဉ်မပြတ်ငါပြုမည် menu ကို buttons.The သည်အခြားအရာမျဉ်းသားကိုဖယ်ရှားဖြစ်သကဲ့သို့စတိုင်မှသူတို့ကိုပိုမိုလွယ်ကူစေသည်ထားတဲ့အပိုဒ်ကဲ့သို့ပြုမူကတညျးကတော့ LI ၏တစ်ခုလုံးကိုအာကာသကိုတက်ယူမှသူတို့ကိုတွန်းအားပေး (text-decoration: none;), ဒီအဖြစ်ခလုတ်ကပိုခလုတ်ကဲ့သို့ငါ့ကိုမျှော်ကြည့်စေသည်။
ဒါပေမယ့်သင်တန်း၏, သင့်ရဲ့ဒီဇိုင်းကိုကွဲပြားခြားနားပါလိမ့်မယ်။
ul # အညွှန်း li တစ် {
display: block ကို;
text-decoration: none;
padding ကို: .25em;
နယ်စပ်-အောက်ခြေ: အစိုင်အခဲ 1px # 39f;
နယ်စပ်ညာ: အစိုင်အခဲ 1px # 39f;
}
Display ရဲ့နဲ့သတိထားမိ: ပိတ်ပင်တားဆီးမှု; လင့်ခ်ပေါ်တွင် ထား. မီနူးကို item ၏တစ်ခုလုံးကို box ကိုစာလုံးမယ့်နှိပ်ဖြစ်ပါတယ်။ ဤသည်ကိုလည်းအသုံးဝင်မှုရှိစေရန်ကောင်းမွန်သည်။ သတ်မှတ်ထားဖို့သေချာပါစေ လင့်ခ်အရောင်များ သင်သည်ထိုသူတို့အပြာအနီနှင့်ခရမ်းရောင်ကို default အနေဖြင့်ကွဲပြားခြားနားသောဖြစ်လိုလျှင် (link ကို, ပျံဝဲနှင့်တက်ကြွသော, သွားရောက်ခဲ့ပြီး) ။
တစ်ဦး: link ကိုတစ်ဦး: {အရောင်သွားရောက်ခဲ့ပြီး: #fff; }
တစ်ဦး: တက်ကြွ {အရောင်: တစ်ပျံဝဲ # 000; }
ကျွန်မကိုလည်းပေးပါလို မောက်စ်တင်ပြည်နယ် နောက်ခံအရောင်ကိုပြောင်းလဲနေဖြင့်တစ်နည်းနည်းပိုပြီးအာရုံစူးစိုက်။
တစ်ဦး: မောက်စ်တင် {background-color: #fff; }
သငျသညျဒေါင်လိုက် menus တွေပိုပြီးဥပမာလိုပါကအောက်ပါစာရင်းနှင့်တိုင်ပင်ပါ။
- တစ်ဦးက style ဒေါင်လိုက် Menu ကို
- တစ်ဦးကအခြေခံပညာဒေါင်လိုက် Menu ကို Template ကို
- သင်နှင့်အတူ Style ဒေါင်လိုက် Menu ကိုဒီနေရာမှာ Are
- သငျသညျနှင့်အတူတစ်ဦးကအခြေခံပညာဒေါင်လိုက် Menu ကို Template ကိုဒီနေရာမှာ Are
အလျားလိုက် Navigation Menu ကို
သငျသညျက HTML စာရင်းများကိုဒေါင်လိုက်ဖော်ပြရန်ကြိုက်တတ်တဲ့ဆိုတဲ့အချက်ကို offset ရန်ရှိသည်ဘာဖြစ်လို့လဲဆိုတော့အလျားလိုက်အညွှန်း menus တွေ Creating အနည်းငယ်ပိုပြီးခက်ခဲဒေါင်လိုက်အညွှန်း menus တွေထက်ဖြစ်ကြသည်။ အလျားလိုက် menu ကိုအတူအမျှပထမဦးဆုံးသင့်ရဲ့ဖန်တီး အညွှန်း menu ကိုစာရင်း :
တစ်ဦးအလျားလိုက် menu ကိုဖန်တီးရန်, သင်ဒေါင်လိုက် menu ကိုအတူပြုသကဲ့သို့တူညီအလုပ်လုပ်ကြသည်။ ငါသည်ငါ့အညွှန်းလက်ဝဲထောင့်တွင်စတင်ချင်ကတည်းက။ ပြင်ပနှင့်အတူစတင်အလုပ်လုပ်ငါ margin နဲ့ padding ကို left, ငါဘယ်ဘက်ကိုက float 0 င်နှင့်အတူထားကြ၏။ သင့်ရဲ့ menu ကိုသင်ရည်ရွယ်ထားထက်ပိုသို့မဟုတ်လျော့နည်းအာကာသကိုတက်ယူမထားဘူးဒါကြောင့်သင်တို့လည်း width ကို setting များ၏အလေ့အထရသင့်ပါတယ်။ အလျားလိုက် menus တွေအဘို့, ဒီအများအားဖြင့်ဒီဇိုင်းအပြည့်အဝအကျယ်ဖြစ်ပါတယ်။ ငါသည်လည်းဆက်ပြောသည် တစ်နောက်ခံအရောင် ကိုဖတ်ရှုဖို့လွယ်ကူစေရန်တစ်ခုလုံးကိုစာရင်း။
ul # အညွှန်း {
float: left;
margin: 0;
padding ကို: 0;
width: 100%;
background-color: # 039;
}
ဒါပေမယ့်အလျားလိုက်အညွှန်း menu ကိုမှလျှို့ဝှက်စာရင်းတွင်ပစ္စည်းများဖြစ်ပါတယ်။ စာရင်းပစ္စည်းများကိုပုံမှန်အားဖြင့်သူတို့တစ်ဦးချင်းစီတဦးတည်းမီနှင့်အပြီးနေရာချတဲ့ NEWLINE ရပါလိမ့်မယ်ဆိုလိုတာက, ဒြပ်စင်ပိတ်ဆို့ထားပါသည်။ inline မှပိတ်ပင်တားဆီးမှုထံမှ Display ကို switching အသုံးပြုပုံသငျသညျနောကျတဦးတည်းအလျားလိုက်အခြားအထိတန်းစီဖို့စာရင်း element တွေကိုအတင်း။
ul # အညွှန်း li {display: inline; }
ငါတူအရောင်များနှင့်စာသားအလှဆင်နှင့်တကွ, ဒေါင်လိုက်အညွှန်း Menu ထဲမှာသူတို့ကိုကုသအတိအကျတူလင့်များကုသ။ ငါသူတို့တခုလုံးကိုရစ်ဝဲနေကြသည်အခါခလုတ် delineate မှထိပ်တန်းနယ်စပ်ကဆက်ပြောသည်။ ငါဖယ်ရှားတစ်ခုတည်းသောအရာပြသမှုခဲ့: ပိတ်ပင်တားဆီးမှု; ကြောင်းအတိုင်းအလျားလိုက် Menu ထဲမှာ NEWLINE ပြန်ထားငါဖျက်ဆီးမည်။
ul # အညွှန်း li တစ် {
text-decoration: none;
padding ကို: .25em 1em;
နယ်စပ်-အောက်ခြေ: အစိုင်အခဲ 1px # 39f;
နယ်စပ်-top: အစိုင်အခဲ 1px # 39f;
နယ်စပ်ညာ: အစိုင်အခဲ 1px # 39f;
}
တစ်ဦး: link ကိုတစ်ဦး: {အရောင်သွားရောက်ခဲ့ပြီး: #fff; }
ul # အညွှန်း li တစ်ဦး: မောက်စ်တင် {
background-color: #fff;
အရောင်: # 000;
}
သငျသညျဒီနေရာမှာနေရာအချက်အလက်များ Are
HTML ကိုနောက်ထပ်ရှုထောင့်ကတော့ youarehere အမှတ်အသားဖြစ်ပါတယ်။ သင်သည်သင်၏အသုံးပြုသူလက်ရှိတည်နေရာညွှန်ပြရန်သင့် menu ကိုပြုပြင်မွမ်းမံလိုပါကရိုးရှင်းစွာကွဲပြားခြားနားသောနောက်ခံအရောင်သို့မဟုတ်အခြားစတိုင်သတ်မှတ်ဤ ID ကိုသုံးပါ။ လက်ရှိစာမျက်နှာကိုအမြဲမီးမောင်းထိုးပြကြောင်းသို့မှသာအခြားစာမျက်နှာများတွင်အပေါ်မှန်ကန်သော menu ကိုကို item မှထိုအိုင်ဒီ attribute ကိုရွှေ့ပါ။
ul # အညွှန်း li # တစ် {background-color youarehere: # 09f; }
သင်သည်သင်၏စာမျက်နှာပေါ်တွင်အတူတကွထိုအစတိုင်များထားလျှင်သင့်ဆိုက်နှင့်အလုပ်လုပ်တယ်ဒါပေမဲ့ဒေါင်းလုပ်လုပ်ရန်မြန်ဆန်အနာဂတ်တွင်ကို update လုပ်ဖို့အရမ်းလွယ်ကူပါတယ်သောအလျားလိုက်သို့မဟုတ်ဒေါင်လိုက် Menu bar ကဖန်တီးနိုင်ပါတယ်။ XHTML က + CSS ကိုအသုံးပြုခြင်းဒီဇိုင်းအတွက်အလွန်အစွမ်းထက် tool ကိုစသင့်ရဲ့စာရင်းကိုပြန်သွားလေ၏။
သငျသညျအလျားလိုက် menus တွေပိုပြီးဥပမာချင်ပါတယ်လျှင်, အောက်ပါအချက်များကိုနှင့်တိုင်ပင်ပါ။
- တစ်ဦးက style အမျိုးမျိုး Horizontal Menu ကို
- တစ်ဦးကအခြေခံပညာ Horizontal Menu ကို Template ကို
- သင်ကဒီနေရာမှာ Are နှင့်အတူတစ်ဦးက style အမျိုးမျိုး Horizontal Menu ကို
- သငျသညျနှင့်အတူတစ်ဦးကအခြေခံပညာ Horizontal Menu ကို Template ကိုဒီနေရာမှာ Are