ਕਿਵੇਂ ਬਣਾਉਣਾ ਹੈ: ਕੈਸ਼ੇਟ ਮੇਨੂ

ਕੈਸ਼ੇਟ ਸਟਾਈਲ ਮੇਨੂ ਬਣਾਓ

ਕਦਮ 1 - 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 {
  /* اوورلائی کا اونچائی او ر وچت کیوئی جیسی نمائش کروؤندا، دیکھو جس طرح جو JS وچو دکھایا گیا ہے */   
  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 {
  رنگ: #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%";
}
/* جب یوزر ناویگیشن میں کسی علامت کو کلک کرتا ہے تو بند بست کریئے */
function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}

亲自试一试

نئی مثال میں، ناویگیشن منوی کا کوریول کوریول بند بست کیا جائے گا (از 0 سے 100% بلندی)。

توجہ دہانی کریئے:اس مثال میں، لطفاً دیکھیئے کہ سی ایس ایس اور بالا مثال میں بہت کم فرق ہوتا ہے (مقصدی بلندی 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 导航栏