CSS Vertical Navigation Bar
ဒေါင်လိုက် လမ်းညွှန်ဘား
ဒေါင်လိုက်လမ်းကြောင်းပြဘားတစ်ခုတည်ဆောက်ရန်၊ သင်သည် ယခင်စာမျက်နှာမှကုဒ်အပြင်၊ စာရင်းအတွင်းရှိ <a> ဒြပ်စင်များကို ပုံစံဖော်နိုင်သည်-
ဥပမာ
li a
{
display: block;
width: 60px;
}
ဥပမာ ရှင်းပြထားသည်-
display: block;
- ဘလောက်ဒြပ်စင်များအဖြစ် လင့်ခ်များကိုပြသခြင်းသည် လင့်ခ်ဧရိယာတစ်ခုလုံးကို ကလစ်နှိပ်နိုင်စေသည် (စာသားတင်မက)၊ ၎င်းသည် ကျွန်ုပ်တို့အား သင်အလိုရှိပါက အကျယ် (နှင့် padding၊ margin၊ အမြင့်စသည်ဖြင့်) သတ်မှတ်နိုင်စေပါသည်။width: 60px;
- ဘလောက်ဒြပ်စင်များသည် ပုံမှန်အားဖြင့် ရရှိနိုင်သော အကျယ်ကို အပြည့်ယူသည်။ ကျွန်ုပ်တို့သည် 60 pixels အကျယ်ကို သတ်မှတ်လိုပါသည်။
<ul> ၏ အကျယ်ကို သင်သတ်မှတ်နိုင်ပြီး <a> ၏ အကျယ်ကို ဖယ်ရှားနိုင်သည်၊ အဘယ်ကြောင့်ဆိုသော် ၎င်းတို့သည် ဘလောက်ဒြပ်စင်များအဖြစ် ပြသသောအခါ ရနိုင်သော အကျယ်ကို အပြည့်ယူမည်ဖြစ်သောကြောင့်၊ ၎င်းသည် ကျွန်ုပ်တို့၏ယခင်နမူနာအတိုင်း တူညီသောရလဒ်ကို ထုတ်ပေးလိမ့်မည်-
ဥပမာ
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
}
Vertical Navigation Bar နမူနာများ
မီးခိုးရောင်နောက်ခံအရောင်ဖြင့် အခြေခံဒေါင်လိုက်လမ်းညွှန်ဘားတစ်ခုကို ဖန်တီးပြီး အသုံးပြုသူသည် ၎င်းတို့အပေါ်မှ မောက်စ်ကို ရွှေ့သည့်အခါ လင့်ခ်များ၏ နောက်ခံအရောင်ကို ပြောင်းလဲပါ-
ဥပမာ
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
အသက်ဝင်သော/လက်ရှိ လမ်းညွှန်လင့်ခ်
အသုံးပြုသူများအား မည်သည့်စာမျက်နှာတွင် ရှိနေသည်ကို အသိပေးရန် လက်ရှိလင့်ခ်တွင် "တက်ကြွသော" အတန်းကို ထည့်ပါ-
ဥပမာ
.active {
background-color: #04AA6D;
color: white;
}
အလယ်လင့်ခ်များနှင့် နယ်ခြားများထည့်ပါ။
text-align:center
လင့်ခ်များကို ဗဟိုပြုရန် <li> သို့မဟုတ် <a> သို့ ထည့်ပါ ။
border
ပိုင်ဆိုင်မှုကို <ul> တွင် navbar ပတ်ပတ်လည်တွင် ဘောင်တစ်ခုထည့်ပါ ။ အကယ်၍ သင်သည် navbar အတွင်းရှိ ဘောင်များကို လိုချင်ပါက border-bottom
၊ နောက်ဆုံးတစ်ခုမှလွဲ၍ <li> ဒြပ်စင်များအားလုံးသို့ a ထည့်ပါ-
ဥပမာ
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
Full-height Fixed Vertical Navbar
အမြင့်အပြည့်၊ "စေးကပ်သော" ဘေးထွက်လမ်းညွှန်ချက်ကို ဖန်တီးပါ-
ဥပမာ
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
မှတ်ချက်- ဤနမူနာသည် မိုဘိုင်းစက်ပစ္စည်းများတွင် ကောင်းစွာ အလုပ်မလုပ်နိုင်ပါ။