W3.CSS လမ်းညွှန်ဘားများ
ဒေါင်လိုက်-
အလျားလိုက်-
W3.CSS Navigation Bar Classes
W3.CSS သည် လမ်းကြောင်းပြဘားများအတွက် အောက်ပါအတန်းများကို ပံ့ပိုးပေးသည်-
| အတန်း | သတ်မှတ်ပါတယ်။ |
|---|---|
| w3-ဘား | HTML အစိတ်အပိုင်းများအတွက် အလျားလိုက် ကွန်တိန်နာ |
| w3-bar-block | HTML အစိတ်အပိုင်းများအတွက် ဒေါင်လိုက်ကွန်တိန်နာ |
| w3-bar- item | ကွန်တိန်နာဘားဒြပ်စင် |
| w3-ဘေးဘား | HTML အစိတ်အပိုင်းများအတွက် ဒေါင်လိုက်ဘေးဘား |
| w3-မိုဘိုင်း | မည်သည့် ဘားဒြပ်စင်ကိုမဆို မိုဘိုင်း-ပထမ တုံ့ပြန်မှု ပြုလုပ်သည်။ |
| w3-dropdown-hover | ရွေ့လျားနိုင်သော ဆွဲချဒြပ်စင် |
| w3-dropdown-ကလစ်နှိပ်ပါ။ | ကလစ်နှိပ်နိုင်သော dropdown ဒြပ်စင် (အပေါ်ကို ရွှေ့မည့်အစား) |
အခြေခံအညွှန်း
w3-bar အတန်း သည် HTML ဒြပ်စင်များကို အလျားလိုက်ပြသရန် ကွန်တိန်နာတစ်ခုဖြစ်သည်။
w3-bar-item class သည် container element များကို သတ်မှတ်သည်။
၎င်းသည် လမ်းကြောင်းပြဘားများဖန်တီးရန်အတွက် ပြီးပြည့်စုံသောကိရိယာတစ်ခုဖြစ်သည်။
ဥပမာ
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
တုံ့ပြန်မှုလမ်းညွှန်
w3-mobile class သည် မည်သည့် ဘားဒြပ်စင်များကို တုံ့ပြန်မှုဖြစ်စေသည် ( ကြီးမားသော စခရင်များတွင် အလျားလိုက်နှင့် သေးငယ်သော ဒေါင်လိုက်)။
အလတ်စားနှင့် ကြီးမားသော မျက်နှာပြင်များ
သေးငယ်သော မျက်နှာပြင်များ
ဥပမာ
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
ရောင်စုံလမ်းကြောင်းပြဘားများ
လမ်းညွှန်ဘားတွင် အရောင်တစ်ခုထည့်ရန် w3-ရောင်စုံ အတန်းကို သုံး ပါ-
ဥပမာ
<div class="w3-bar w3-light-grey">
<div
class="w3-bar w3-green">
<div
class="w3-bar w3-blue">
နယ်နိမိတ်ချင်းထိစပ်နေသော လမ်းကြောင်းပြဘားများ
လမ်းကြောင်းပြဘားတစ်ဝိုက်ရှိ နယ်နိမိတ်များထည့်ရန် သို့မဟုတ် ကတ်တစ်ခုအဖြစ်ပြသရန် w3-နယ်စပ် သို့မဟုတ် w3-ကတ်အတန်းအစား ကို အသုံးပြု ပါ -
ဥပမာ
<div class="w3-bar w3-border w3-light-grey">
<div
class="w3-bar w3-border w3-card-4">
အသုံးပြုနေသော/လက်ရှိလင့်ခ်
၎င်းကို မီးမောင်းထိုးပြရန် လင့်ခ်တစ်ခုသို့ w3-ရောင်စုံ အတန်းကို ထည့်ပါ -
ဥပမာ
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-green">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
Hoverable Links များ
ခလုတ်တစ်ခုကို နှိပ်လိုက်သောအခါ၊ နောက်ခံအရောင်သည် မီးခိုးရောင်အဖြစ်သို့ ပြောင်းလဲသွားမည်ဖြစ်သည်။
အမြင့်တွင် မတူညီသော နောက်ခံအရောင်ကို လိုချင်ပါက w3-hover- အရောင် အတန်းများကို အသုံးပြုပါ။
ဥပမာ
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button w3-hover-green">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-blue">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-teal">Link 3</a>
</div>
၎င်းအစား စာသားအရောင်ကို ပြောင်းလဲ လိုပါက w3-hover-none အတန်း ဖြင့် ပုံသေ ပျံဝဲသည့်အကျိုးသက်ရောက်မှုကို ပိတ်ပြီး w3- hover-စာသား အတန်းကို ထည့်ပါ။
ဥပမာ
<div class="w3-bar w3-border w3-black">
<a href="#"
class="w3-bar-item w3-button">Default</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-hover-none w3-text-grey w3-hover-text-white">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 3</a>
</div>
မတူညီသော ပြေးလွှားခြင်းအကျိုးသက်ရောက်မှုများဖြင့် ကစားရန် အချိန်အနည်းငယ်ပေးပါ။
ဥပမာ
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 2</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 3</a>
</div>
ညာဖက်ညှိထားသော လင့်ခ်များ
သီးခြားလင့်ခ်တစ်ခုကို right-align လုပ်ရန် list item တစ်ခု ရှိ w3-right class ကိုသုံး ပါ-
ဥပမာ
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-green w3-right">Link 3</a>
</div>
Navigation Bar အရွယ်အစား
navbar အတွင်းရှိလင့်ခ်များ၏ဖောင့်အရွယ်အစားကိုပြောင်းလဲရန် w3-အရွယ်အစား အတန်း ကိုသုံး ပါ-
ဥပမာ
<div class="w3-bar w3-green w3-large">
<div class="w3-bar w3-green w3-xlarge">
navbar အတွင်းရှိ link တစ်ခုစီ၏ padding ကိုပြောင်းလဲရန် w3-padding အတန်း ကိုသုံး ပါ
ဥပမာ
<div class="w3-bar w3-border w3-green">
<a href="#" class="w3-bar-item w3-button w3-padding-16">Home</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 3</a>
</div>
မှတ်ချက်- ခလုတ်တစ်ခုစီအစား navigation bar သို့ padding ကိုလည်း ထည့်နိုင်သည်။ သို့ရာတွင်၊ သင်ဤသို့လုပ်ပါက၊ လင့်ခ်များသည် hover တွင် padding အပြည့်အစုံမရရှိနိုင်ကြောင်းသတိပြုပါ။
ဥပမာ
<div class="w3-bar w3-green w3-padding-16"></div>
CSS အကျယ်ပိုင်ဆိုင်မှုနှင့် လင့်ခ်များ၏ အကျယ်ကို စိတ်ကြိုက်ပြင်ဆင်ပါ။
( မှတ်ချက် - သေးငယ်သောစခရင်များတွင် လင့်ခ်များကို 100% အကျယ်အဖြစ် ပြောင်းလဲရန် w3-mobile ကို သုံး ပါ)
ဥပမာ
<div class="w3-bar w3-dark-grey">
<a href="#"
class="w3-bar-item w3-button w3-mobile w3-green" style="width:33%">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile"
style="width:33%">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-mobile" style="width:33%">Link 2</a>
</div>
အိုင်ကွန်များပါရှိသော လမ်းညွှန်ဘား
ဥပမာ
<div class="w3-bar w3-light-grey w3-border">
<a href="#"
class="w3-bar-item w3-button w3-green"><i class="fa fa-home"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-search"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-globe"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-sign-in"></i></a>
</div>
အထက်နမူနာရှိ "fa fa" အတန်းများသည် "Font Awesome" သင်္ကေတများကို ပြသသည်။
အခန်း W3.CSS အိုင်ကွန် များတွင် အိုင်ကွန်များကို မည်သို့ပြသရမည်ကို ပိုမိုလေ့လာပါ ။
Navigation Bar စာသား
လမ်းညွှန်ဘားအတွင်း ခလုတ်များအစား စာသားကို လိုချင်ပါက၊ ခလုတ်များ နှင့် တူညီသော padding ရရှိရန် w3-bar-item အတန်းကို အသုံးပြုပါ။
ဥပမာ
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
<span
class="w3-bar-item">Text</span>
</div>
အဝင်များနှင့် ခလုတ်များပါရှိသော Navbar
ဥပမာ
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<input type="text" class="w3-bar-item w3-input" placeholder="Search..">
<a href="#" class="w3-bar-item w3-button w3-green">Go</a>
</div>
Dropdown ဖြင့် Navigation Bar
မောက်စ်ကို "Dropdown" လင့်ခ်ပေါ်တွင် ရွှေ့ပါ-
ဥပမာ
<div class="w3-bar w3-light-grey">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div
class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link
2</a>
<a href="#" class="w3-bar-item
w3-button">Link 3</a>
</div>
</div>
</div>
နှိပ်နိုင်သော Dropdown
အပေါ်ကိုရွှေ့မည့်အစား dropdown link ကို နှိပ်လိုပါက w3-dropdown-click ကိုသုံး ပါ-
ဥပမာ
<div class="w3-dropdown-click">
<button class="w3-button" onclick="myFunction()">
Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div id="demo"
class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
အလျားလိုက် Dropdown Menu
ဒေါင်လိုက်အစား ဒေါင်လိုက်များအစား အလျားလိုက် ဖော်ပြလိုပါက w3-bar-block အတန်းကို dropdown container မှ ဖယ်ရှားပါ။
ဥပမာ
<div class="w3-bar w3-light-grey">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div
class="w3-dropdown-content w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link
2</a>
<a href="#" class="w3-bar-item
w3-button">Link 3</a>
</div>
</div>
</div>
Responsive Dropdown with Responsive Navbar
တုံ့ပြန်မှုရှိသော dropdown လင့်ခ်များပါရှိသော တုံ့ပြန်မှုရှိသော navbar တစ်ခုဖန်တီးရန် dropdown container အပါအဝင် လင့်ခ်များအားလုံးတွင် w3-mobile class ကိုသုံးပါ။
အကျိုးသက်ရောက်မှုမြင်ရန် ဘရောက်ဆာဝင်းဒိုးကို အရွယ်အစားပြောင်းပါ။
ဥပမာ
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item
w3-button w3-mobile w3-green">Home</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 2</a>
<div
class="w3-dropdown-hover w3-mobile">
<button
class="w3-button">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-dark-grey">
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
</div>
</div>
Fixed Navigation Bar
To force the navigation bar to stay at the top or at the bottom of the page, even when the user scrolls the page, wrap a <div> element around the bar and add the w3-top or w3-bottom class:
Fixed Top
<div class="w3-top">
<div class="w3-bar">
...
...
</div>
</div>
Fixed Bottom
<div class="w3-bottom">
<div class="w3-bar">
...
...
</div>
</div>
Vertical Navigation Bar
The w3-bar-block class is a container for displaying HTML elements vertically.
Example
<div class="w3-bar-block w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
Collapsing the Navigation Bar
When the navigation bar takes up too much space on a small screen, and you do not want to display it vertically by default, you can use hide and show classes on specific links in the navigation bar.
In the example below, the navigation bar is replaced with a button (☰) in the top right corner when shown on tablets and mobile devices. When the button is clicked, the links in the navigation bar will vertically stack:
Example
Side Navigation
The w3-sidebar class creates a side navigation:
Go to the next chapter to learn more about the side navigation.