如何创建：画布外菜单

学习如何创建画布外菜单。



亲自试一试

创建画布外菜单

第一步 - 添加 HTML：

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<!-- နှီးခြားသတ်တင်သုံးဆောင်း အခြားအရေး */
<span onclick="openNav()">open</span>
<!-- အကြောင်းအရာ အခြားအရေး ကို အခြား div တွင် ထည့်သွင်းပါ (အခြားအရေး ကို အခြားအရွယ် အခြေအနေ မှာ သုံးပါဘဲ) -->
<div id="main">
  ...
</div>

ဒုတိယပုံ - အဆိုပါ CSS အသုံးပြုပါ:

/* နှီးခြားသတ်တင်သုံးဆောင်း အခြားအရေး */
.sidenav {
  အမြင်: 100%; /* အမြင် 100% ပမာဏ */
  အကြာ: 0; /* အကြာ 0 ပမာဏ */
  သုံးဆောင်း: fixed; /* အခြေအနေ အချိန်မှာ အခြေခံကြောင်း */
  z-index: 1; /* အောက်ဆုံးအခြေအနေ */
  top: 0;
  အခြေအနေ: 0;
  အရေး: #111; /* ရောင်သုံးဆောင်း */
  အလွန်: hidden; /* လုံးအနှံ့ လှည့်ခြင်း ပိတ်ပြီ */
  အဝေး: 60px; /* အောက်ဆုံးအရွယ် 60 ပမာဏ */
  အသွားအလွန်: 0.5s; /* 0.5 စက္ကူ သွားလာအခြေအနေ ပြောင်းလဲကြောင်း ကို ပျက်ကွဲလိမ့်မည် */
}
/* နှီးခြားသတ်တင်သုံးဆောင်း အခြားအရေး */
.sidenav a {
  အဝေး: 8px 8px 8px 32px;
  လက်ဆုံးဖြတ်: none;
  အရွယ်: 25px;
  အကြောင်းအရေး: #818181;
  ပြောင်းလဲအခြေအနေ: block;
  အသွားအလွန်: 0.3s;
}
/* မူးယစ်ကြည်းသတ်တင်သုံးဆောင်း အခြားအရေးကို ပြောင်းလဲကြောင်း */
.sidenav a:hover {
  အကြောင်းအရေး: #f1f1f1;
}
/* ပိတ်သတ်သုံးဆောင်း နှင့် ဖွင့်အုံး အပေါ်အနေအထား (အရှေ့အထိုအရွယ်) */
.sidenav .closebtn {
  သုံးဆောင်း: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* 设置页面内容的样式 - 如果您希望在打开侧边导航时，将页面内容推向右侧，请使用此选项 */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* 在屏幕高度小于 450 像素的小屏幕上，更改侧边导航栏的样式（减少内边距和字体大小） */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

第三步 - 添加 JavaScript：

画布外菜单

/* 设置侧边导航的宽度为 250px，页面内容的左外边距为250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* 设置侧边导航的宽度为 0，页面内容的左外边距为0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

亲自试一试

下面的例子同样将侧边导航栏滑入，并将页面内容推向右侧。不过，这次我们在 body 元素上添加了一个半透明（40% 不透明度）的黑色背景色，以“突出显示”侧边导航栏：

အန်းချိုးခြင်း အပြင် ဘက်ခြူးလမ်း

/* ဘက်ခြူးလမ်း အကြီးအကျယ် သုံးစွဲပြီး စာကြိုး ဘက်ခြူးလမ်း အရှည် သုံးစွဲပြီး ဘက်ခြူးလမ်း အရောင် ပုံမှန် ဖြင့် အပြည့်အဝိုက် ဖြင့် ဖုံးကွယ်ပြီ */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* နောက်ခံဘက် သုံးစွဲခြင်း - ဘက်ခြူးလမ်း အကြီးအကျယ် သုံးစွဲပြီး စာကြိုး ဘက်ခြူးလမ်း အရှည် ကို 0 ဖြင့် သတ်မှတ်ပြီး ဘက်ခြူးလမ်း အရောင် အပြည့်အဝိုက် အပြင်က ဖုံးကွယ်ပြီ */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

亲自试一试

相关页面

教程：CSS 导航栏