كيفية إنشاء: نافذة علوية استجابة مع قائمة منسدلة

تعلم كيفية إنشاء نافذة علوية استجابة مع قائمة منسدلة.

إنشاء قائمة منسدلة استجابة في النافذة العلوية

الخطوة الأولى - إضافة HTML:

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>

الخطوة الثانية - إضافة CSS:

/* إضافة لون خلفية أسود لشريط التوجيه العلوية */
.topnav {
  background-color: #333;
  overflow: hidden;
}
/* تحديد نمط الروابط في شريط التوجيه */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/* إضافة فئة نشطة لتبريζ الصفحة الحالية */
.active {
  background-color: #04AA6D;
  color: أبيض;
}
/* في الشاشات الصغيرة، إخفاء الروابط لفتح وإغلاق شريط التوجيه العلوية */
.topnav .icon {
  display: none;
}
/* وحدة القائمة المنسدلة - لتحديد موقع محتويات القائمة المنسدلة */
.dropdown {
  float: left;
  overflow: hidden;
}
/* تحديد نمط زر القائمة المنسدلة لتناسق مع شريط التوجيه العلوية */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: أبيض;
  padding: 14px 16px;
  background-color: توريث;
  font-family: توريث;
  margin: 0;
}
/* تحديد نمط محتويات القائمة المنسدلة (مبدئيًا مخفي) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* تحديد نمط الروابط داخل القائمة المنسدلة */
.dropdown-content a {
  float: none;
  color: أسود;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* في حالة وضع الفأرة فوق، أضف خلفية داكنة للروابط في شريط التوجيه العلوية والزر في القائمة المنسدلة */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: أبيض;
}
/* في حالة وضع الفأرة فوق، أضف خلفية رمادية للروابط في القائمة المنسدلة */
.dropdown-content a:hover {
  background-color: #ddd;
  color: أسود;
}
/* عند تحريك الفأرة فوق رمز القائمة المنسدلة، تُظهر القائمة المنسدلة */
.dropdown:hover .dropdown-content {
  display: block;
}
/* عند انخفاض عرض الشاشة إلى أقل من 600 بكسل، تُخفى جميع الروابط باستثناء الروابط الأولى ("الصفحة الرئيسية") وتُظهر الروابط المفتوحة وإغلاق لوحة التحكم العلوية (الرمز) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/* عند النقر على الرمز، يضيف JavaScript الفئة "responsive" إلى لوحة التحكم العلوية. تجعل هذه الفئة من لوحة التحكم العلوية تبدو أفضل على الشاشات الصغيرة (تظهر الروابط بشكل عمودي بدلاً من أفقي) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

الخطوة الثالثة - إضافة JavaScript:

/* عند النقر على الرمز، يتم التبديل بين إضافة وإزالة الفئة "responsive" في لوحة التحكم العلوية */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

جربها بنفسك

الصفحات ذات الصلة

دليل:قائمة تنقل CSS

دليل:كيفية إنشاء قائمة منسدلة قابلة للنقر

دليل:شريط التوجيه CSS

دليل:كيفية إنشاء لوحة تحكم جانبية