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

آموزش ایجاد منوی بزرگ (منوی کشویی تمام عرض ناوبری).

ایجاد منوی بزرگ

یک منوی کشویی ایجاد کنید که وقتی کاربر ماوس را روی عنصر ناوبری حرکت می‌دهد، این منو نمایش داده شود.

ابتدائي - اضافه کردن HTML:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Mega Menu</h2>
      </div>
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <a href="#">لینک 1</a>
          <a href="#">لینک 2</a>
          <a href="#">لینک 3</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">لینک 1</a>
          <a href="#">لینک 2</a>
          <a href="#">لینک 3</a>
        </div>
        <div class="column">
          <h3>دسته‌بندی 3</h3>
          <a href="#">لینک 1</a>
          <a href="#">لینک 2</a>
          <a href="#">لینک 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

例子解释：

می‌توان از هر عنصری برای باز کردن منوی پایین کشیده شده استفاده کرد، به عنوان مثال عنصر <button>، <a> یا <p>.

از عنصر قالب (مانند <div class="dropdown-content">) برای ایجاد منوی پایین کشیده شده استفاده کنید، سپس شبکه (ستون) اضافه کنید و سپس لینک‌های منوی پایین کشیده شده را در شبکه اضافه کنید.

از عنصر <div class="dropdown"> برای بسته‌بندی دکمه و عنصر قالب (<div class="dropdown-content">) استفاده کنید، تا منوی پایین کشیده شده را به درستی موقعیت‌دهی کنید.

مرحله دوم - اضافه کردن CSS:

/* قالب ناوبری */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* لینک‌های داخل ناوبری */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* قالب منوی پایین کشیده شده */
.dropdown {
  float: left;
  overflow: hidden;
}
/* دکمه منوی پایین کشیده شده */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit; /* برای تراز عمودی در دستگاه‌های موبایل بسیار مهم است */
  margin: 0; /* برای تراز عمودی در دستگاه‌های موبایل بسیار مهم است */
}
/* هنگام قرارگیری موس بر روی لینک‌های ناوبری پس‌زمینه قرمز اضافه می‌شود */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* فهرست پایین کشیده شده محتوا (پیش‌فرض مخفی) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* بڑا منوی عنوان (اگر نیاز باشد) */
.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}
/* 鼠标悬停时显示下拉菜单 */
.dropdown:hover .dropdown-content {
  display: block;
}
/* 创建三个等宽的列，并使其并排浮动 */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}
/* 为列内的链接设置样式 */
.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* 鼠标悬停时添加背景颜色 */
.column a:hover {
  background-color: #ddd;
}
/* 清除列后的浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

خود خود کوشاں

例子解释：

我们已经为导航栏和导航栏链接设置了背景色、内边距等样式。

我们为下拉菜单按钮设置了背景色、内边距等样式。

.dropdown-content 类包含实际的下拉菜单。它默认是隐藏的，将在鼠标悬停时显示（见下文）。它被定位在下拉菜单按钮的正下方，并且宽度设置为 100%，以覆盖整个屏幕。

我们没有使用边框，而是使用了 box-shadow 属性，使下拉菜单看起来像一个“卡片”。我们还使用 z-index 将下拉菜单放置在其他元素的前面。

:hover سلیکٹر، یہ ڈاؤن فیلوی منو کو، کاربر کوئی بٹن پر موس کا نقش کرسکتا ہے کے وقت دکھاتا ہے.

.column کلاس، ڈاؤن فیلوی میں تین ساتھ ساتھ کیپنے والی کالومن بنانے کے لئے استعمال کی جاتی ہے (مختلف زمرات کو دکھانے کے لئے استعمال کی جاتی ہے).

متعلقہ صفحات

تعلیم:منو فله CSS

تعلیم:کہاں سے کلک کرسکتے والا ڈاؤن فیلوی بنایا جائے

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

تعلیم:کہاں سے ریسپانسف ٹاپ ناویگیشن بار بنایا جائے