چگونه ایجاد کنید: منو خارج از کanvas

ایجاد منو خارج از کanvas

قدم اول - اضافه کردن HTML:

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">درباره</a>
  <a href="#">خدمات</a>
  <a href="#">مشتریان</a>
  <a href="#">تماس</a>
</div>
<!-- از هر عنصر مورد نظر برای باز کردن منوی جانبی استفاده کنید -->
<span onclick="openNav()"> باز کردن</span>
<!-- اگر می‌خواهید منوی جانبی صفحه‌ی محتوا را به سمت راست هل دهد، همه‌ی محتوا را به داخل این div اضافه کنید (اگر فقط می‌خواهید منوی جانبی در بالای صفحه باقی بماند، این تنظیم را استفاده نکنید) -->
<div id="main">
  ...
</div>

مرحله دوم - اضافه کردن CSS:

/* منوی جانبی ناوبری */
.sidenav {
  ارتفاع: 100%; /* 100% ارتفاع کامل */
  عرض: 0; /* عرض 0 - این تنظیم توسط جاوااسکریپت تغییر می‌کند */
  پوزیشن: fixed; /* در مکان خود باقی می‌ماند */
  زوم: 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:

منوی خارج از کanvas

/* 设置侧边导航的宽度为 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";
}

آزمایش کنید

مثال زیر نیز منوی جانبی را به سمت چپ می‌کشد و محتوای صفحه را به سمت راست هل می‌دهد. اما این بار ما یک پس‌زمینه سیاه نیمه‌شفاف (40% نیمه‌شفافیت) به عنصر body اضافه کرده‌ایم تا منوی جانبی را "توجه‌داری" کنیم:

منوی خارج از کanvas با شفافیت

/* 设置侧边导航的宽度为 250px，页面内容的左外边距为 250px，并给 body 添加黑色背景色 */
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，页面内容左边距为 0，body 背景色为白色 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

آزمایش کنید

صفحات مرتبط

تدریس:نوار ابزار CSS