CSS Horizontal Navigation Bar
အလျားလိုက် လမ်းညွှန်ဘား
အလျားလိုက် လမ်းညွှန်ဘားတစ်ခုကို ဖန်တီးရန် နည်းလမ်းနှစ်ခုရှိသည်။ inline သို့မဟုတ် floating list items များကို အသုံးပြုခြင်း ။
Inline List Items
အလျားလိုက် လမ်းညွှန်ဘားတစ်ခုကို တည်ဆောက်ရန် နည်းလမ်းတစ်ခုမှာ ယခင်စာမျက်နှာမှ "စံ" ကုဒ်အပြင် <li> အစိတ်အပိုင်းများကို inline အဖြစ် သတ်မှတ်ရန်ဖြစ်သည်-
ဥပမာ
li
{
display: inline;
}
ဥပမာ ရှင်းပြထားသည်-
display: inline;
- မူရင်းအားဖြင့်၊ <li> ဒြပ်စင်များသည် ဘလောက်ဒြပ်စင်များဖြစ်သည်။ ဤတွင်၊ လိုင်းတစ်ခုစီတွင် ၎င်းတို့ကိုပြသရန် စာရင်းမ၀င်မီနှင့် အပြီးတွင် လိုင်းခွဲမှုများကို ဖယ်ရှားပါသည်။
Floating List ပစ္စည်းများ
အလျားလိုက် လမ်းညွှန်ဘားတစ်ခုကို ဖန်တီးခြင်း၏ နောက်ထပ်နည်းလမ်းမှာ <li> ဒြပ်စင်များကို မျှောချရန်နှင့် လမ်းကြောင်းပြလင့်ခ်များအတွက် အပြင်အဆင်ကို သတ်မှတ်ပါ-
ဥပမာ
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}
ဥပမာ ရှင်းပြထားသည်-
float: left;
- တစ်ခုနှင့်တစ်ခုနောက်ထပ်မျှောရန်ပိတ်ဆို့ element တွေကိုရယူရန် float ကိုသုံးပါ။display: block;
- သင်အလိုရှိပါက padding (အမြင့်၊ အနံ၊ အနားသတ်စသည်ဖြင့်) သတ်မှတ်ရန်ခွင့်ပြုသည်။padding: 8px;
- ၎င်းတို့ကို ကြည့်ကောင်းစေရန် <a> ဒြပ်စင်တစ်ခုစီကြားရှိ အကွက်အချို့ကို သတ်မှတ်ပါ။background-color: #dddddd;
- <a> ဒြပ်စင်တစ်ခုစီတွင် မီးခိုးရောင် နောက်ခံအရောင်ကို ထည့်ပါ။
အကြံပြုချက်- သင် အကျယ်အဝန်းအပြည့်ရှိသော နောက်ခံအရောင်ကို လိုချင်ပါက <ul> ဒြပ်စင်တစ်ခုစီအစား နောက်ခံအရောင်ကို <ul> သို့ ထည့်ပါ-
ဥပမာ
ul
{
background-color: #dddddd;
}
အလျားလိုက် လမ်းညွှန်ဘား နမူနာများ
နက်မှောင်သော နောက်ခံအရောင်ဖြင့် အခြေခံ အလျားလိုက် လမ်းညွှန်ဘားကို ဖန်တီးပြီး အသုံးပြုသူသည် ၎င်းတို့အပေါ်မှ မောက်စ်ကို ရွှေ့သောအခါ လင့်ခ်များ၏ နောက်ခံအရောင်ကို ပြောင်းလဲပါ-
ဥပမာ
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
}
အသက်ဝင်သော/လက်ရှိ လမ်းညွှန်လင့်ခ်
အသုံးပြုသူများအား မည်သည့်စာမျက်နှာတွင် ရှိနေသည်ကို အသိပေးရန် လက်ရှိလင့်ခ်တွင် "တက်ကြွသော" အတန်းကို ထည့်ပါ-
ဥပမာ
.active {
background-color: #04AA6D;
}
လင့်ခ်များကို ညာဘက်ညှိပါ။
စာရင်းအရာများကို ညာဘက်သို့ ရွှေ့ခြင်းဖြင့် ( float:right;
):
ဥပမာ
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul>
နယ်ခြားမျဉ်းများ
border-right
လင့်ခ်ခွဲခြမ်းများဖန်တီးရန် ပိုင်ဆိုင်မှုကို <li> သို့ ထည့်ပါ -
ဥပမာ
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
ပုံသေ လမ်းညွှန်ဘား
အသုံးပြုသူသည် စာမျက်နှာကို လှိမ့်လိုက်သည့်အခါတွင်ပင် လမ်းညွှန်ဘားကို ထိပ် သို့မဟုတ် အောက်ခြေတွင် ရှိနေစေသည်-
ပုံသေထိပ်တန်း
ul {
position: fixed;
top: 0;
width: 100%;
}
ပုံသေအောက်ခြေ
ul {
position: fixed;
bottom: 0;
width: 100%;
}
မှတ်ချက်- ပုံသေအနေအထားသည် မိုဘိုင်းစက်ပစ္စည်းများတွင် ကောင်းစွာအလုပ်မလုပ်နိုင်ပါ။
မီးခိုးရောင် အလျားလိုက် Navbar
ပါးလွှာသော မီးခိုးရောင်ဘောင်ပါရှိသော မီးခိုးရောင် အလျားလိုက် လမ်းညွှန်ဘား၏ ဥပမာ-
ဥပမာ
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Sticky Navbar
position: sticky;
စေးကပ်သော navbar တစ်ခုဖန်တီးရန် <ul> သို့ ထည့်ပါ ။
ကပ်နေသောဒြပ်စင်သည် လှိမ့်တည်နေရာပေါ်မူတည်၍ ဆွေမျိုးနှင့် ပုံသေကြားတွင် ပြောင်းသွားသည် viewport တွင် ပေးထားသည့် offset အနေအထားကို မတွေ့မချင်း ၎င်းအား ဆွေမျိုးအဖြစ် နေရာချထားသည် - ထို့နောက် ၎င်းသည် နေရာတွင် "ကပ်" (အနေအထား- ပုံသေကဲ့သို့) ဖြစ်သည်။
ဥပမာ
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
မှတ်ချက်- Internet Explorer သည် sticky positioning ကို မပံ့ပိုးပါ။ Safari သည် -webkit- ရှေ့ဆိက်တစ်ခု လိုအပ်သည် (အထက်ပါဥပမာကိုကြည့်ပါ)။ အလုပ်လုပ်ရန် ကပ်စေးနဲသော နေရာချထားခြင်းအတွက် top
, right
, bottom
သို့မဟုတ် အနည်းဆုံးတစ်ခုကိုလည်း သတ်မှတ်ရပါမည် ။left
နောက်ထပ် ဥပမာများ
တုံ့ပြန်မှု Topnav
တုံ့ပြန်မှုရှိသော ထိပ်တန်းလမ်းညွှန်ချက်တစ်ခုဖန်တီးရန် CSS မီဒီယာမေးမြန်းချက်များအား အသုံးပြုနည်း။
Sidenav တုံ့ပြန်မှု
တုံ့ပြန်မှုဘေးထွက်လမ်းညွှန်မှုဖန်တီးရန် CSS မီဒီယာမေးမြန်းချက်များအား အသုံးပြုနည်း။
Navbar ကို ဆွဲချပါ။
လမ်းကြောင်းပြဘားအတွင်း dropdown menu တစ်ခုထည့်နည်း။
W3Schools Spaces အကြောင်း ကြားဖူး ပါသလား။ ဤနေရာတွင် သင်သည် သင့်ဝဘ်ဆိုဒ်ကို အစမှအဆုံး ဖန်တီးနိုင်သည် သို့မဟုတ် နမူနာပုံစံတစ်ခုကို အသုံးပြုကာ ၎င်းကို အခမဲ့ လက်ခံဆောင်ရွက်ပေးနိုင်သည်။
❯ အခမဲ့ စတင်လိုက်ပါ။* ခရက်ဒစ်ကတ်မလိုအပ်ပါ။