Dropdown یک عنصر رابط کاربری است که شامل یک لیست از گزینه‌ها می‌شود. این به کاربر اجازه می‌دهد که یک مقدار را از بین یک لیست با هوور یا کلیک روی یک عنصر محرک انتخاب کند. به طور معمول در منوهای ناوبری، فرم‌ها و سایر اجزای تعاملی وب‌سایت استفاده می‌شود.
منوی Dropdown با استفاده از المان‌های لیست غیرمرتب (<ul>) و مورد لیست (<li>) HTML ایجاد می‌شود.
در این فصل، از CSS برای استایل‌دهی و ترتیب دادن به عناصر منوی Dropdown، کنترل ظاهر و رفتار آن‌ها پوشش داده خواهد شد.
مثال ساده
در این مثال، یک نمونه ساده از dropdown با لیست گزینه‌ها را مشاهده می‌کنیم. وقتی شما روی متن “Select an Option” هاور می‌کنید، یک منوی dropdown با گزینه‌ها نمایش داده می‌شود.
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-button {
background-color: #e81a1a;
padding: 10px 20px;
border: none;
cursor: pointer;
color: #ffffff;
margin: 0;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
margin: 0;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-menu {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<span class="dropdown-button">Select an Option</span>
<div class="dropdown-menu">
<p>Option 1</p>
<p>Option 2</p>
<p>Option 3</p>
</div>
</div>
</body>
</html>در این مثال، از عناصر HTML مانند <span> یا <button> برای باز کردن محتوای dropdown استفاده می‌شود.
برای ایجاد محتوای dropdown یا منو، از یک عنصر ظرف (مانند <div>) استفاده می‌شود.
استفاده از CSS برای بسته‌بندی و قرار دادن صحیح محتوای dropdown.
کلاس .dropdown از position:relative استفاده می‌کند. این ویژگی منوی dropdown را مستقیماً زیر دکمه dropdown قرار می‌دهد (با استفاده از position:absolute).
کلاس .dropdown-menu محتوای واقعی dropdown را نگه می‌دارد. این به صورت پیش‌فرض مخفی است و با هاور نمایش داده می‌شود.
استفاده از ویژگی box-shadow CSS برای ایجاد منوی dropdown شبیه به یک کارت.
انتخاب‌کننده :hover منوی dropdown را نمایش می‌دهد وقتی کاربر موس را روی دکمه dropdown حرکت می‌دهد.
افکت شناور (Hoverable Effect)
این کد یک نمونه ساده از یک Dropdown با اثر Hoverable را نشان می‌دهد. وقتی کاربر ماوس خود را روی المان محرک قرار می‌دهد، یک منوی Dropdown ظاهر می‌شود. زمانی که کاربر ماوس خود را از المان محرک دور می‌کند، منوی Dropdown معمولاً ناپدید می‌شود.
در این مثال از برچسب‌های لینک داخل جعبه Dropdown استفاده شده و آن‌ها را به گونه‌ای استایل داده تا با یک دکمه Dropdown استایل شده سازگار شوند.
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-button {
background-color: #e81a1a;
padding: 15px;
border: none;
cursor: pointer;
color: #ffffff;
margin: 0;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
padding: 0;
margin: 0;
}
.dropdown-menu li {
padding: 10px;
background-color: #15AD39;
}
.dropdown-menu li a {
display: block;
text-decoration: none;
color: #ffffff;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu li:hover {
background-color: #82ea32;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropdown-button">Select an Option</button>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</div>
</body>
</html>Clicked Dropdowns
این کد یک نمونه از یک Dropdown است که هنگام کلیک بر روی آن، به منظور نمایش گزینه‌های موجود، باز می‌شود و می‌توانید یکی از این گزینه‌ها را با کلیک بر روی آن انتخاب کنید.
ویژگی‌های این کد شامل:
- دکمه‌ای با کلاس
.dropdown-buttonکه هنگام کلیک بر روی آن، منوی Dropdown نمایش داده می‌شود. - یک لیست (
<ul>) با کلاس.dropdown-menuکه گزینه‌های Dropdown را درون آن نشان می‌دهد. - اطلاعات بصری مربوط به استایل‌ها در CSS.
- اطلاعات برنامه‌نویسی جاوااسکریپت که باعث نمایش و مخفی شدن منوی Dropdown می‌شود و همچنین اینکه در صورت کلیک خارج از Dropdown، آن را ببندد.
<div class="hcb_wrap" dir="ltr">
<pre class="prism line-numbers lang-html" data-lang="HTML"><code><html>
<head>
<style>
.dropdown-button {
background-color: #e81a1a;
padding: 15px;
border: none;
cursor: pointer;
color: #ffffff;
margin: 0;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
padding: 0;
margin: 0;
}
.dropdown-menu li {
padding: 10px;
background-color: #15AD39;
}
.dropdown-menu li a {
display: block;
text-decoration: none;
color: #ffffff;
}
.dropdown-menu li:hover {
background-color: #82ea32;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropdown-button">Select an Option</button>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const button = document.querySelector('.dropdown-button');
const dropdownContent = document.querySelector('.dropdown-menu');
button.addEventListener('click', function () {
dropdownContent.classList.toggle('show');
});
window.addEventListener('click', function (event) {
if (!event.target.matches('.dropdown-button') && dropdownContent.classList.contains('show')) {
dropdownContent.classList.remove('show');
}
});
});
</script>
</body>
</html></code></pre>
</div>منوی راست چین شده (Right-aligned Menu)
این کد یک نمونه از Dropdown است که با اعمال استایل float: right به <div> که منوی Dropdown را شامل می‌شود، می‌توانید منوی Dropdown را در سمت راست صفحه قرار دهید. این ترتیب باعث می‌شود که منو به سمت راست صفحه جابجا شود.
ویژگی‌های این کد شامل:
- یک
<div>با کلاس.dropdownکه Dropdown را شامل می‌شود و به صورت نسبی نمایش داده می‌شود. - یک دکمه با کلاس
.dropdown-buttonکه هنگام کلیک بر روی آن، منوی Dropdown نمایش داده می‌شود. - یک لیست (
<ul>) با کلاس.dropdown-menuکه گزینه‌های Dropdown را درون آن نشان می‌دهد. - استایل‌های CSS برای استایل‌دهی به عناصر منو.
- اعمال استایل float: right به
<div>مربوط به Dropdown تا آن را به سمت راست صفحه منتقل کند.
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-button {
background-color: #e81a1a;
padding: 15px;
border: none;
cursor: pointer;
color: #ffffff;
margin: 0;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
padding: 0;
margin: 0;
list-style: none;
}
.dropdown-menu li {
padding: 10px;
background-color: #15AD39;
}
.dropdown-menu li a {
display: block;
text-decoration: none;
color: #ffffff;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu li:hover {
background-color: #82ea32;
}
</style>
</head>
<body>
<div class="dropdown" style="float: right;">
<button class="dropdown-button">Select an Option</button>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</div>
</body>
</html>منوی چپ چین شده (Left-aligned Menu)
این کد یک نمونه از Dropdown است که با اعمال استایل float: left به <div> که منوی Dropdown را شامل می‌شود، می‌توانید منوی Dropdown را در سمت چپ صفحه قرار دهید. این ترتیب باعث می‌شود که منو به سمت چپ صفحه جابجا شود.
ویژگی‌های این کد شامل:
- یک
<div>با کلاس.dropdownکه Dropdown را شامل می‌شود و به صورت نسبی نمایش داده می‌شود. - یک دکمه با کلاس
.dropdown-buttonکه هنگام کلیک بر روی آن، منوی Dropdown نمایش داده می‌شود. - یک لیست (
<ul>) با کلاس.dropdown-menuکه گزینه‌های Dropdown را درون آن نشان می‌دهد. - استایل‌های CSS برای استایل‌دهی به عناصر منو.
- اعمال استایل float: left به
<div>مربوط به Dropdown تا آن را به سمت چپ صفحه منتقل کند.
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-button {
background-color: #e81a1a;
padding: 15px;
border: none;
cursor: pointer;
color: #ffffff;
margin: 0;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
padding: 0;
margin: 0;
list-style: none;
}
.dropdown-menu li {
padding: 10px;
background-color: #15AD39;
}
.dropdown-menu li a {
display: block;
text-decoration: none;
color: #ffffff;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu li:hover {
background-color: #82ea32;
}
</style>
</head>
<body>
<div class="dropdown" style="float: left;">
<button class="dropdown-button">Select an Option</button>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</div>
</body>
</html>به همراه تصویر
این کد یک نمونه از Dropdown است که با اضافه کردن تصاویر کنار گزینه‌های متنی، بهبود یافته است. وقتی موس را بر روی تصویر می‌برید، یک تصویر با اندازه بزرگتر همراه با توضیح نمایش داده می‌شود.
ویژگی‌های این کد شامل:
- یک
<div>با کلاس.dropdownکه Dropdown را شامل می‌شود و به صورت نسبی نمایش داده می‌شود. - یک تصویر که هنگام نگهداری ماوس بر روی آن، منوی Dropdown با تصویر بزرگتر و توضیح ظاهر می‌شود.
- استایل‌های CSS برای استایل‌دهی به عناصر منو.
در این کد، زمانی که موس بر روی تصویر قرار می‌گیرد، display: block به .dropdown-img-menu اعمال می‌شود تا منوی Dropdown نمایش داده شود.
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-img-menu {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
}
.dropdown:hover .dropdown-img-menu {
display: block;
}
.img-descripition {
padding: 15px;
background-color: rgb(38, 222, 53);
text-align: center;
}
</style>
</head>
<body>
<div class="dropdown">
<img src="images/red-flower.jpg" alt="Cinque Terre" width="200" height="100">
<div class="dropdown-img-menu">
<div class="img-descripition">Red color flower</div>
<img src="images/red-flower.jpg" alt="Cinque Terre" width="300" height="150">
</div>
</div>
</body>
</html>با Navbar
این کد یک نمونه از Navbar Dropdown است که معمولاً در منوهای ناوبری وب‌سایت‌ها یافت می‌شود. این نوع ناوبری شامل یک نوار افقی است که حاوی یک لیست از پیوندهاست. هنگامی که کاربران موس خود را روی یک پیوند خاص می‌اندازند یا روی آن کلیک می‌کنند، یک منوی Dropdown ظاهر می‌شود که گزینه‌های ناوبری اضافی یا محتوای مربوط به پیوند انتخاب شده را نمایش می‌دهد.
ویژگی‌های این کد شامل:
- یک
<ul>(لیست ناورده) برای ایجاد ناوبری، با استایل‌هایی برای تنظیمات نمایشی و ظاهری. <li>ها که حاوی پیوندها هستند و از float: left استفاده می‌کنند تا به صورت افقی نمایش داده شوند.- استفاده از کلاس
.dropdownبرای لیستی که شامل Dropdownها می‌شود. - استایل‌های CSS برای Dropdownها که زمانی که کاربران موس خود را روی یک Dropdown می‌اندازند، ظاهر می‌شوند.
- استفاده از استایل‌های CSS برای تعیین ظاهر Dropdownها هنگام هوور یا کلیک.
- استفاده از کلاس
.dropdown-menuبرای Dropdown منوها. - استفاده از رویدادهای hover و click برای نمایش Dropdown منوها.
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #208926;
}
li {
float: left;
}
li a,
.dropdown-option {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropdown-option {
background-color: #f39a1d;
}
li.dropdown {
display: inline-block;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: #44e2d5;
border: 1px solid #ccc;
padding: 0;
margin: 0;
list-style: none;
width: 120px;
}
.dropdown-menu a {
color: black;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-menu a:hover {
background-color: #ee3131;
}
.dropdown:hover .dropdown-menu {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Tutorialspoints</a></li>
<li><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-option">Articles</a>
<div class="dropdown-menu">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">Bootstrap</a>
</div>
</li>
</ul>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام