کیسے بناوا: آف-کانواس منو

آف-کانواس منو بناوا

پہلے قدم - ایچ تی ام ایل اضافہ کرنا:

<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>

دوسرا قدم - سی ایس ایس اضافہ کریں:

/* سائیڈ بار ناویگیشن منو */
.sidenav {
  ہائیٹ: 100%; /* 100% پورا اونچائی */
  وائیڈتھ: 0; /* 0 وائیڈتھ - اس سیٹنگ کو جی ایس این میں تبدیل کریں */
  پوزیشن: فیکسڈ; /* اصل مقام پر رکھنا */
  ز-اے-اینڈیگز: 1; /* بالای دوسرے کو رکھنا */
  top: 0;
  لینت: 0;
  بگاہ رنگ: #111; /* کالامائی */
  اورفر-ایکس: ھائیڈن; /* افقی اسکرول کا روکنا */
  پیدائش-بالا: 60 پیکسل; /* مطلب کا سمت بالا کی دوری 60 پیکسل */
  ترنزیشن: 0.5س; /* 0.5 سیکنڈ کا تبدیل اثر، سائیڈ بار کو سائیڈ ناویگیشن میں شامل کریں */
}
/* ناویگیشن منو کا لنک */
.sidenav a {
  پیدائش: 8 پیکسل 8 پیکسل 8 پیکسل 32 پیکسل;
  ٹیکسٹ-دیکوریشن: نہیں;
  فونٹ سائز: 25 پیکسل;
  رنگ: #818181;
  ڈسپلے: بلوک;
  ترنزیشن: 0.3س;
}
/* جب کچھ بندلیو کو موس پر لگا دیا جائے تو اس کا رنگ بدل دیا جائے */
.sidenav a:hover {
  رنگ: #f1f1f1;
}
/* لوگارتمبر بستن کا مقام اور استایل (در بالا سمت راست) */
.sidenav .closebtn {
  پوزیشن: ابسولوت;
  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% 不透明度）的黑色背景色，以“突出显示”侧边导航栏：

کینگشٹیپ کینوک کا منوج

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