لرن سورس
ورود

آشنایی با Dropdown در CSS

با استفاده از زبان CSS میتوان یک Dropdown ایجاد کرد که با قرار گیری نشانگر موس کاربر بر روی آن محتویاتش نشان داده شود. در این فصل به انواع Dropdown در CSS میپردازیم.

 یک Dropdown ساده

در نمونه مثال زیر به ساخت یک Dropdown خواهیم پرداخت که با حرکت نشان گر موس بر روی آن محتوای آن نشان داده میشود :

<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>
خودتان امتحان کنید

توضیح مثال :

از هر عنصری برای باز کردن محتوای یک Dropdown میتوان استفاده کرد، برای مثال یک عنصر <span> و یا یک عنصر <button>.

از یک عنصر container همچون <div> برای ساخت محتوای یک Dropdown استفاده کنید و هر عنصری که میخواهید داخل آن قرار دهید.

برای جایابی مناسب محتوای یک Dropdown در CSS همه ی عناصر Dropdown را داخل عنصر <div> قرار دهید.

کلاس dropdown. از position:relative استفاده میکند، این برای زمانی که میخواهیم محتوای Dropdown درست در زیر دکمه ی Dropdown قرار گیرد مورد نیاز است ( با استفاده از position:absolute).

کلاس dropdown-content. محتوای یک Dropdown را نگه میدارد و به صورت پیشفرض hidden (مخفی) است و وقتی نشانگر موس روی آن قرار میگیرد نمایان میشود. توجه داشته باشید که min-width با مقدار 160 پیکسل مقدار دهی شده است و به این ترتیب آن را برای تغییر آزاد گذاشته ایم.

نکته : اگر بخواهید پهنای محتوای Dropdown با اندازه ی پهنای دکمه ی Dropdown باشد، مقدار صفت width برای آن را با 100% تنظیم کنید (و همین طور از overflow:auto برای فعال کردن نوار پیمایش در صفحه نمایش های کوچک استفاده کنید).

 

به جای استفاده از یک border ، ما از صفت box-shadow در CSS3 برای برجسته کردن منوی Dropdown استفاده کرده ایم. 

انتخاب کننده ی hover: برای نشان دادن منوی Dropdown وقتی که نشانگر موس کاربر بر روی دکمه ی Dropdown قرار میگیرد ، استفاده میشود.

ساخت یک Dropdown Menu

در اینجا میخواهیم یک Dropdown Menu ایجاد کنیم که به کاربر اجازه میدهد از بین آیتم های لیست یکی را انتخاب کند.

نمونه مثال زیر شبیه مثال قبلی است، به جز اینکه ما لینک هایی را داخل باکس Dropdown اضافه کرده ایم و آنها را به صورت مناسب فرمت بندی کرده ایم :

<style>
/* Style The Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.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;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
خودتان امتحان کنید

راست چین کردن محتوای یک Dropdown

اگر میخواهید محتوای یک Dropdown Menu راست چین شود به جای صفت left از right استفاده کنید، ;right: 0

.dropdown-content {
    right: 0;
}
خودتان امتحان کنید

چند مثال دیگر از Dropdown Menu

در این مثال خواهیم دید که چگونه میتوان یک تصویر و دیگر محتویات را داخل یک Dropdown قرار داد :

<div class="dropdown">
  <img src="img_fjords.jpg" alt="Trolltunga Norway" width="100" height="50">
  <div class="dropdown-content">
    <img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
    <div class="desc">Beautiful Trolltunga, Norway</div>
  </div>
</div>
خودتان امتحان کنید

در این مثال خواهیم دید که چگونه میتوان یک Dropdown منویی را داخل یک نوار هدایتی قرار داد :

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>
خودتان امتحان کنید

 

دیدگاه ها

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید

آموزش CSS

هدف لرن سورس

لرن سورس با هدف ایجاد یک مرجع کامل و جامع در زمینه آموزش دوره محور زبان های برنامه نویسی و وب پا به عرصه وب گذاشته است.

ما در لرن سورس همیشه سعی خواهیم کرد تا نیاز های آموزشی شما کاربران عزیز را در قالب آموزش های مختلف پاسخ دهیم.

بخش های اصلی

با استفاده از لینک های زیر میتوانید به بخش های اصلی سایت دسترسی داشته باشید:

راه های ارتباطی

شما کاربران عزیز میتوانید با هر کدام از راه های ارتباطی زیر با تیم آموزشی لرن سورس در ارتباط باشید:

کلیه حقوق مادی و معنوی وبسایت متعلق به لرن سورس می باشد.