W3.CSS ဘေး ဘောင်
W3.CSS Vertical Navigation Bars
ဘေးထွက်လမ်းညွှန်ခြင်းဖြင့်၊ သင့်တွင် ရွေးချယ်စရာများစွာရှိသည်-
- စာမျက်နှာအကြောင်းအရာ၏ ဘယ်ဘက်တွင် လမ်းညွှန်မှုအကန့်ကို အမြဲတမ်းပြသပါ။
- အထူးပြုနိုင်သော၊ "အပြည့်အဝ အလိုအလျောက်" တုံ့ပြန်နိုင်သော ဘေးထွက်လမ်းညွှန်ချက်ကို အသုံးပြုပါ။
- စာမျက်နှာအကြောင်းအရာ၏ ဘယ်ဘက်ခြမ်းရှိ လမ်းကြောင်းပြကွက်ကို ဖွင့်ပါ။
- စာမျက်နှာအကြောင်းအရာအားလုံးအပေါ် လမ်းညွှန်မှုအကန့်ကို ဖွင့်ပါ။
- လမ်းညွှန်မှုအကန့်ကိုဖွင့်သောအခါ စာမျက်နှာအကြောင်းအရာကို ညာဘက်သို့ ပွတ်ဆွဲပါ။
- ဘယ်ဘက်ခြမ်းအစား ညာဖက်ခြမ်းတွင် လမ်းကြောင်းပြကွက်ကို ပြသပါ။
Sidebar ကို အမြဲတမ်းပြသပါ။
ဥပမာ
<div class="w3-sidebar w3-bar-block" style="width:25%">
<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 style="margin-left:25%">
... page content ...
</div>
အကြောင်းအရာ၏ တစ်စိတ်တစ်ပိုင်းကို Sidebar Navigation ကိုဖွင့်ပါ။
ဥပမာ
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
အကြောင်းအရာအပေါ် Sidebar Navigation ကိုဖွင့်ပါ။
ဥပမာ
function w3_open() {
document.getElementById("mySidebar").style.width
= "100%";
document.getElementById("mySidebar").style.display
= "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
Collapsible Responsive Side Navigation
ဥပမာ
<div class="w3-sidebar
w3-bar-block w3-collapse w3-card" style="width:200px;" id="mySidebar">
<button class="w3-bar-item
w3-button w3-hide-large"
onclick="w3_close()">Close ×</button>
<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 class="w3-main" style="margin-left:200px">
<div class="w3-teal">
<button class="w3-button w3-teal
w3-xlarge" onclick="w3_open()">☰</button>
<div
class="w3-container">
<h1>My Page</h1>
</div>
</div>
</div>
<script>
function w3_open()
{
document.getElementById("mySidebar").style.display
= "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
စာမျက်နှာ အကြောင်းအရာကို ညာဘက်သို့ ပွတ်ဆွဲပါ။
ဥပမာ
function w3_open() {
document.getElementById("main").style.marginLeft
= "25%";
document.getElementById("mySidebar").style.width
= "25%";
document.getElementById("mySidebar").style.display
= "block";
document.getElementById("openNav").style.display
= 'none';
}
function w3_close() {
document.getElementById("main").style.marginLeft
= "0%";
document.getElementById("mySidebar").style.display
= "none";
document.getElementById("openNav").style.display
= "inline-block";
}
ညာဘက်ခြမ်း Side Navigation
ဥပမာ
<div class="w3-sidebar
w3-bar-block" style="width:25%;right:0">
<h5 class="w3-bar-item">Menu</h5>
<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 style="margin-right:25%">
... page content ...
</div>
ညာဘက်မှ ခေါက်သိမ်းနိုင်သော လမ်းကြောင်း
ဥပမာ
<div class="w3-sidebar w3-bar-block w3-collapse" style="width:200px;right:0"
id="mySidebar">
<button class="w3-bar-item w3-button w3-hide-large"
onclick="w3_close()">Close
×</button>
<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 class="w3-main" style="margin-right:200px">
<div class="w3-teal">
<button class="w3-button w3-teal w3-xlarge
w3-right w3-hide-large" onclick="w3_open()">☰</button>
<div
class="w3-container">
<h2>My Page</h2>
</div>
</div>
</div>
<script>
function w3_open()
{
document.getElementById("mySidebar").style.display
= "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
ဘယ်နှင့်ညာခြမ်း လမ်းညွှန်
ဥပမာ
Side Navigation ကို ပုံစံရေးဆွဲခြင်း။
နောက်ခံအရောင်ပြောင်းရန် w3- အရောင် အတန်းအစားကို w3-sidebar သို့ ထည့်ပါ ။ အသုံးပြုသူ/လက်ရှိ လင့်ခ်တစ်ခု လိုချင်ပါက၊ သူ/သူမ ပေါ်နေသော စာမျက်နှာကို အသုံးပြုသူအား အသိပေးရန်၊ w3- အရောင် အတန်းအစားကို လင့်ခ်များထဲမှ တစ်ခုသို့ ပေါင်းထည့်ပါ-
ဥပမာ
<div class="w3-sidebar w3-red">
Bordered Side Navigation
ဘေးဘက်လမ်းညွှန်ချက်တစ်ဝိုက်တွင် နယ်ခြားတစ်ခုကိုထည့်ရန် w3-border class ကို သုံး ပါ-
ဥပမာ
<div class="w3-sidebar w3-border">
လင့်ခ်ခွဲခြမ်းများဖန်တီးရန် w3-border-bottom class ကို လင့်ခ်များ ထဲသို့ ထည့်ပါ -
ဥပမာ
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-border-bottom">Link 1</a>
<a href="#"
class="w3-bar-item w3-button w3-border-bottom">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
ဘေးထွက်လမ်းညွှန်ချက်ကို ကတ်တစ်ခုအဖြစ်ပြသရန် w3-card အတန်းအစားကို အသုံးပြု ပါ-
ဥပမာ
<nav class="w3-sidebar w3-card">
ပျံဝဲနိုင်သောလင့်ခ်များ
ဘားဘလောက်တစ်ခုအတွင်းရှိ လင့်ခ်များကို မောက်စ်ပေါ်တင်သောအခါ နောက်ခံအရောင်သည် မီးခိုးရောင်သို့ ပြောင်းလဲသွားမည်ဖြစ်သည်။
အမြင့်ပေါ်တွင် မတူညီသော နောက်ခံအရောင်ကို လိုချင်ပါက w3-hover-color အတန်းများကို အသုံးပြုပါ။
ဥပမာ
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-hover-black">Link 1</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-green">Link 2</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-blue">Link 3</a>
</div>
w3-hover-none အတန်းအစား ဖြင့် ပုံသေ ပျံဝဲသည့်အကျိုးသက်ရောက်မှုကို သင်ပိတ်နိုင်သည် ။ အမြင့်ပေါ်တွင် စာသားအရောင် (နှင့် နောက်ခံအရောင်မဟုတ်) ကို မီးမောင်းထိုးပြလိုသောအခါတွင် ၎င်းကို မကြာခဏအသုံးပြုသည်-
ဥပမာ
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-grey">Link
1</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-hover-text-green">Link
2</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-hover-text-teal">Link
3</a>
</div>
ဘေးထွက်လမ်းကြောင်း အရွယ်အစားများ
တိုးမြှင့်ထားသော ဖောင့်အရွယ်အစား (w3-ကြီးသော စသည်ဖြင့်)။
တိုးလာသော padding (w3-padding စသည်တို့)။
ဥပမာ
<div class="w3-sidebar w3-bar-block w3-large">
<a href="#" class="w3-bar-item
w3-button">Link</a>
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#" class="w3-bar-item w3-button">Link</a>
</div>
အိုင်ကွန်များဖြင့် ဘေးဘက် လမ်းညွှန်ခြင်း။
ဥပမာ
<div class="w3-sidebar w3-bar-block w3-black" style="width:70px">
<a href="#"
class="w3-bar-item w3-button"><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>
</div>
Dropdown ပါရှိသော ဘေးဘား
ဥပမာ
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<div
class="w3-dropdown-hover">
<button
class="w3-button">Dropdown
<i class="fa fa-caret-down"></i></button>
<div
class="w3-dropdown-content w3-bar-block">
<a href="#"
class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#"
class="w3-bar-item w3-button">Link
3</a>
</div>
Tip: When the dropdown menu is "open", the dropdown link gets a grey background color to indicate that it is active. To override this, add a w3-hover-color class to both the "dropdown" <div> and <a>.
Sidebar with Accordion
Example
<div class="w3-sidebar w3-light-grey w3-card" style="width:200px">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<button class="w3-button w3-block w3-left-align" onclick="myAccFunc()">Accordion</button>
<div
id="demoAcc" class="w3-bar-block w3-hide w3-white w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
<div class="w3-dropdown-click">
<button class="w3-button" onclick="myDropFunc()">Dropdown</button>
<div
id="demoDrop" class="w3-dropdown-content w3-bar-block w3-white w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#" class="w3-bar-item
w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link
3</a>
</div>
Animated Sidebar
Use any of the w3-animate-classes to fade, zoom or slide in side navigation:
Example
<div class="w3-sidebar w3-animate-left">
Sidebar Overlay
The w3-overlay class can be used to create an overlay effect when opening the sidebar. The w3-overlay class adds a black background with a 50% opacity to the "page content" - this effect will "highlight" the side navigation.
Example
<!-- Sidebar -->
<div class="w3-sidebar w3-bar-block" style="display:none;z-index:5" id="mySidebar">
<button
class="w3-bar-item w3-button"
onclick="w3_close()">Close</button>
<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>
<!-- Overlay -->
<div class="w3-overlay" onclick="w3_close()" style="cursor:pointer"
id="myOverlay"></div>
<!-- Page content -->
<button class="w3-button w3-xxlarge"
onclick="w3_open()">☰</button>
<div class="w3-container">
<h1>Sidebar Overlay</h1>
<p>Click on the "hamburger" icon to slide
in the side navigation.</p>
</div>
<!-- JS to
open and close sidebar with overlay effect -->
<script>
function
w3_open() {
document.getElementById("mySidebar").style.display
= "block";
document.getElementById("myOverlay").style.display
= "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
</script>
Sidebar Content
Add whatever you like inside the side navigation:
Example
<div class="w3-sidebar w3-bar-block w3-light-grey" style="width:50%">
<div
class="w3-container w3-dark-grey">
<h4>Menu</h4>
</div>
<img src="img_snowtops.jpg">
<a href="#"
class="w3-bar-item w3-button w3-red">Home</a>
<a href="#" class="w3-bar-item w3-button">Projects
<span
class="w3-tag w3-red w3-round w3-right">8</span>
</a>
<a href="#" class="w3-bar-item w3-button">About</a>
<a href="#"
class="w3-bar-item w3-button">Contact</a>
<div class="w3-panel w3-blue-grey
w3-display-container">
<span class="w3-button w3-display-topright">X</span>
<p>Lorem
ipsum box...</p>
</div>
</div>