ਕਿਵੇਂ ਬਣਾਓ: ਪੂਰੇ ਸਕਰੀਨ ਓਵਰਲੇ ਨੇਵੀਗੇਸ਼ਨ

ਪੂਰੇ ਸਕਰੀਨ ਓਵਰਲੇ ਨੇਵੀਗੇਸ਼ਨ ਮੇਨੂ ਬਣਾਉਣ ਦੇ ਤਰੀਕੇ ਸਿੱਖੋ。

ਪੂਰੇ ਸਕਰੀਨ ਓਵਰਲੇ ਨੇਵੀਗੇਸ਼ਨ ਬਣਾਓ

ਕਦਮ 1 - ਐੱਚਟੀਐੱਮੀ ਜੋੜੋ:

<!-- 覆盖层 -->
<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; /* 30 ਪਿਕਸਲ ਉੱਪਰ ਬਾਹਰੀ ਘੱਟੀ, ਛੋਟੇ ਸਕਰੀਨ 'ਤੇ ਬੰਦ ਬਟਨ ਨਾਲ ਟਕਰਾਅ ਰੋਕਣ ਲਈ */
}
/* ਓਵਰਲੇ ਵਿੱਚ ਨੇਵੀਗੇਸ਼ਨ ਲਿੰਕ */
.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;
}
/* ਬੰਦ ਬਟਨ ਨੂੰ (ਉੱਪਰੰਚੀ ਕੋਣ) ਸਥਾਪਿਤ ਕਰੋ Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}
وقتی ارتفاع صفحه کمتر از 450 پیکسل باشد، اندازه فونت لینک‌ها را تغییر دهید و دکمه بستار را مجدداً قرار دهید، تا آنها به هم برخورد نکنند
/* وقتی ارتفاع صفحه کمتر از 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 به hidden (ممنوع کردن رول کردن عمودی، به استثنای صفحه‌های کوچک) است):

از بالا به پایین پایین می‌آید

/* کھولنا */
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 导航栏