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

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

مرحله اول - اضافه کردن 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 {
  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 ثانیه، برای نمایش اسلاید ناوبری از سمت چپ به راست */
}
/* ناویگیشن منوی لینک‌ها */
.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;}
}

تیسری قدم - جاوااسکریپت کا اضافا:

در مثال ذیل، کورکولی کی باریکائی بھی سائیڈ ناویگیشن میں داخل ہوجائیگی، اور اس کی باریکائی 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% نامفهمومائی کا کالای 250px کا باکسر اضافا کیا ہے، تاکہ کورکولی کی باریکائی کو "بولانگ" کیا جائے.

نامفهمومائی کی کورکولی کی باریکائی محتوا کو بھجائیتی ہے

/* نویتیغی کورکولی کی باریکائی 250px رکھی جاتی ہے، صفحہ کی محتوا کی چپ بیرونی میجرین 250px اور بدیوی کا کالای 250px کا باکسر اضافا کیا جاتا ہے */
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