چگونه ایجاد می‌شود: منو پرده‌ای

ایجاد منو پرده‌ای

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

<!-- پوشاننده -->
<div id="myNav" class="overlay">
  <!-- بستن ناوبری پوشاننده -->
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <!-- Overlay content -->
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>
</div>
/* کسی بھی علامت کو استعمال کریں تا کہ اورارایا میل گئی وار تھو ناویگیشن منو کو کھولنا/دکھائی دینا */
<span onclick="openNav()">open</span>

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

/* اورارایا (پس منظر) */
.overlay {
  /* چوڑائی اور کچھائی کا چننا، جس طرح میں آپ چاہتے ہیں کہ اورارایا میل گئی وار تھو دکھائی دیجائی (جی ایس) */   
  height: 100%;
  width: 0;
  position: fixed; /* اپنے مقام پر رکھنا */
  z-index: 1; /* اوپر رکھنا */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* کالائی رنگ کا پلان بجلی (پلان بجلی) */
  background-color: rgba(0,0,0, 0.9); /* شفافیت والا کالائی رنگ */
  overflow-x: hidden; /* افقی رولنگ رکھنا */
  transition: 0.5s; /* 0.5 سیکنڈ کا تیار ہونا، تا کہ اورارایا میل گئی وار تھو چل جائی یا بند ہوجائی (کچھائی یا چوڑائی، من کی دکھائی دینا کی طرز پر) */
}
/* کانٹینٹ کو اورارایا میل گئی وار تھو رکھنا */
.overlay-content {
  position: relative;
  top: 25%; /* اوپر کی دوری 25% کا مقام */
  width: 100%; /* 100% چوڑائی */
  text-align: center; /* وسط میں کچھ کا دکھائی دینا/لنگار */
  margin-top: 30px; /* اوپر بیرونی پیدائش 30px، تا کہ بچھی سارایا سے تقابلی نہ ہو */
}
/* اورارایا میل گئی وار تھو، ناویگیشن لنک */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* بلک سارایا دکھائی دینا، نہ کہ آرائی کا سارایا دکھائی دینا */
  transition: 0.3s; /* موس کی سارایا میل گئی وار تھو، رنگ کا تیار ہونا (رنگ) */
}
/* جبک سارایا میل گئی وار تھو، اور لنگار میل گئی وار تھو، رنگ بدل دینا */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}
/* دکمه بستن را موقعیت‌دهی کن (سمت راست بالا) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}
/* وقتی ارتفاع صفحات کمتر از 450 پیکسل است، اندازہ حروف لینک تغییر می‌کند و دکمه بستن دوباره موقعیت‌دهی می‌شود، تا از تداخل آن‌ها جلوگیری شود */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

مرحله سوم - جاوااسکریپت اضافه کن:

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

از کنار داخل شروع کن

/* وقتی کاربر روی عنصر <span> کلیک می‌کند، کھولنا */
function openNav() {
  document.getElementById("myNav").style.width = "100%";
}
/* وقتی کاربر روی نماد "x" در لایر کلیک می‌کند، بستن */
function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}

آپ خود سنجیدھار کریں

مثال زیر منوی نویگیشن لایر را از بالا به پایین پایین رفتار می‌کند (از 0 تا 100% ارتفاع).

توجه داشته باشید:اس مثال می‌باشد، لطفاً توجه کنید که CSS از مثال بالا کمی متفاوت است (ارتفاع پیش‌فرض اکنون 0، عرض 100% اور overflow-y برای خفی((محدودیت عمودی سیکولنگ غیرفعال، کوچک اسکرین کے خلاف)）：

از بالا به پایین پایین رفتار

/* کھولنا */
function openNav() {
  document.getElementById("myNav").style.height = "100%";
}
/* بستن */
function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}

آپ خود سنجیدھار کریں

مثال کے مطابق بغیر موشن کا منوی نویگیشن کھولنا:

من بغیر موشن منوی باز کن

/* کھولنا */
function openNav() {
  document.getElementById("myNav").style.display = "block";
}
/* بستن */
function closeNav() {
  document.getElementById("myNav").style.display = "none";
}

آپ خود سنجیدھار کریں

مربوط صفحات

تعلیم:CSS ناویگیشن بار