چگونه ایجاد کنم: منوی جانبی

ایجاد منوی ناوبری جانبی با اثر انیمیشن

مرحله اول - اضافه کردن 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 {
  height: 100%; /* 100% ارتفاع کامل */
  width: 0; /* 0 عرض - این تنظیم را توسط JavaScript تغییر دهید */
  position: fixed; /* در مکان خود بمانید */
  z-index: 1; /* در بالا بمانید */
  top: 0; /* در بالا بمانید */
  left: 0;
  background-color: #111; /* سیاه */
  overflow-x: hidden; /* حرکت افقی را غیرفعال کنید */
  padding-top: 60px; /* محتوا را در فاصله 60px از بالا قرار دهید */
  transition: 0.5s; /* اثر گذار过渡 به مدت 0.5 ثانیه، برای نمایش اسلاید ناوبری استفاده می‌شود */
}
/* لینک‌های منوی ناوبریThe navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* تغییر رنگ هنگام قرارگیری ماوس بر روی لینک‌های ناوبری */
.sidenav a:hover {
  color: #f1f1f1;
}
/* موقعیت و سبک دکمه بستن (سمت راست بالای صفحه) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* تنظیم سبک محتوای صفحه - اگر می‌خواهید هنگام باز شدن ناوبری جانبی، محتوای صفحه به سمت راست هل داده شود، از این تنظیم استفاده کنید. */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* در صفحه‌های کوچک با ارتفاع کمتر از 450px، سبک ناوبری جانبی تغییر می‌کند (کاهش فضای داخلی و اندازه فونت) */
@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";
}
/* تنظیم عرض ناوبری جانبی به 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

آزمایش کنید

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

ناوبری جانبی محتوای صفحه را هل می‌دهد

/* تنظیم عرض ناوبری جانبی به 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 اضافه کرده‌ایم تا ناوبری جانبی "توجه‌داری" بیشتری داشته باشد.

ناوبری جانبی با شفافیت

/* تنظیم عرض ناوبری جانبی به 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";
}

آزمایش کنید

在下面的例子中，侧边导航将从左侧滑入，并覆盖整个页面（宽度为 100%）：

全宽的侧边导航：

/* 打开侧边导航 */
function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}
/* 关闭/隐藏侧边导航 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

آزمایش کنید

下面的例子在打开和关闭侧边导航菜单时不带动画效果。

没有动画的 Sidenav

/* 打开侧边导航 */
function openNav() {
  document.getElementById("mySidenav").style.display = "block";
}
/* 关闭/隐藏侧边导航 */
function closeNav() {
  document.getElementById("mySidenav").style.display = "none";
}

آزمایش کنید

下面的例子展示了如何创建右侧导航菜单：

右侧导航：

.sidenav {
  right: 0;
}

آزمایش کنید

下面的例子展示了如何创建一个始终显示的侧边导航菜单（固定位置）：

始终显示的侧边导航：

/* 侧边导航 */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}
/* 页面内容 */
.main {
  margin-left: 200px; /* 与侧边导航的宽度相同 */
}

آزمایش کنید

صفحات مرتبط

آموزش‌ها:نوار ناوبری CSS