ترتیبی که روکسو برای مطالعه‌ی دروس سری صفر تا صد CSS
توصیه می‌کند:
منوهای آبشاری (Drop Down) در CSS
15 اردیبهشت 1398
درس 25 از سری صفر تا صد CSS
منوی آبشاری یا Drop Down چیست؟
منوهای آبشاری یا Drop Down منوهایی هستند که در ابتدا به شکل یک دکمه / تصویر / نوشته و ... اند و زمانی که کاربر موس خود را روی آن می برد یا روی آن کلیک می کند یک منوی عمودی از آن ها خارج می شود.
برای توضیح این بحث با یک مثال ساده شروع می کنیم و سپس مثال های پیشرفته تری برایتان ذکر می کنم.
مثال زیر یک مثال ساده است که در آن یک منوی ساده ی آبشاری یا Drop Down خواهیم داشت. این منو با خصوصیت hover روی یک متن اجرا می شود. به کدهای زیر دقت کنید:
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</body>
</html>
توضیحات این مثال به دو قسمت کدهای مربوط به HTML و کدهای مربوط به CSS تقسیم می شود که ما از مورد اول شروع می کنیم.
کدهای مربوط به HTML:
شما می توانید از هر نوع عنصری برای باز کردن یک منوی آبشاری یا Drop Down استفاده کنید چه تگ <span> باشد چه تگ <button> و ... . در مثال بالا از یک <span> استفاده کرده ایم. سپس از یک عنصر نگه دارنده (در این مثال، یک <div>) استفاده می کنیم تا محتوا و شکل منوی آبشاری یا Drop Down را در آن قرار دهیم. در آخر هم از یک عنصر <div> دیگر استفاده می کنیم تا محتوای منو و دیگر عناصر مربوط را با CSS مرتب کنیم.
کدهای مربوط به CSS:
در این مثال کلاس dropdown. از position:relative استفاده می کند. ما به این موقعیت نیاز داریم تا بتوانیم بعدا کاری کنیم که منوی آبشاری یا Drop Down دقیقا زیر دکمه اش باشد (از طریق position:absolute). همچنین کلاس dropdown-content. محتوای اصلی منو را در خود نگه می دارد که در حالت پیش فرض hidden (مخفی) است و تنها در هنگام hover (هنگامی که موس روی آن برود) نمایان می شود. توجه داشته باشید که min-width روی 160 پیکسل تنظیم شده است اما شما می توانید بر اساس سلیقه آن را تغییر دهید.
نکته: اگر می خواهید عرض منوی آبشاری یا Drop Down به اندازه ی دکمه اش باشد، خصوصیت width را روی %100 تنظیم کنید تا 100 درصدِ عرض پدرش (دکمه) را بگیرد.
همچنین مقدار overflow:auto را نیز تعیین کرده ایم تا کاربرانی که از صفحات نمایش کوچکتری دارند بتوانند اسکرول کنند. در این مثال به جای border از خاصیت box-shadow در CSS استفاده کرده ایم تا به منوی خودمان حالت card (کارت) بدهیم؛ یعنی مرز داشته باشد و جدا بودنش از بقیه ی محتوا کاملا مشخص شود. در آخر گفته ایم که در حالت hover آن را از حالت مخفی بیرون بیاورد و به block تبدیل کند.
حالا نوبت یک مثال زیبا تر است. بیایید این بار از یک دکمه به جای متن خالی استفاده کنیم:
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.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);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<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>
</body>
</html>
نحوه ی کارکرد این منو دقیقا مشابه منوی قبلی است و تنها تفاوت آن ها در ظاهرشان است.
نکته: ما در مثال بالا از "#"=href استفاده کرده ایم تا فقط لینک ها را به شما نمایش دهیم. در دنیای وب واقعی باید از لینک های واقعی برای این منوها استفاده کنید.
منوهای راست به چپ
سوال: اگر بخواهیم منوهای ما از راست به چپ باز شوند چطور؟
پاسخ: شما می توانید با خصوصیت های right و left این کار را انجام دهید. به مثال زیر نگاه کنید:
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Aligned Dropdown Content</h2>
<p>Determine whether the dropdown content should go from left to right or right to left with the left and right properties.</p>
<div class="dropdown" style="float:left;">
<button class="dropbtn">Left</button>
<div class="dropdown-content" style="left:0;">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown" style="float:right;">
<button class="dropbtn">Right</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>
منوهای تصویری و Navbar ها
همانطور که گفتیم شما می توانید از هر عنصری برای ایجاد یک منوی آبشاری یا Drop Down استفاده کنید. در این مثال میخواهیم از یک تصویر استفاده کنیم:
<!DOCTYPE html>
<html>
<head>
<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);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<h2>Dropdown Image</h2>
<p>Move the mouse over the image below to open the dropdown content.</p>
<div class="dropdown">
<img src="https://www.w3schools.com/css/img_5terre.jpg" alt="Cinque Terre" width="100" height="50">
<div class="dropdown-content">
<img src="https://www.w3schools.com/css/img_5terre.jpg" alt="Cinque Terre" width="300" height="200">
<div class="desc">Beautiful Cinque Terre</div>
</div>
</div>
</body>
</html>
در مثال بالا زمانی که موس خود را روی تصویر کوچک ببرید یک منوی دیگر باز می شود که شبیه card است. این منو در واقع همان عکس به صورت بزرگ نمایی شده است.
همچنین از جلسات قبل حتما navigation bar های dropdown را به یاد دارید:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
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);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<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>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
امیدوارم از این قسمت لذت برده باشید.
ترتیبی که روکسو برای مطالعه‌ی دروس سری صفر تا صد CSS
توصیه می‌کند:
دوره‌های آموزشی مرتبط
مقالات مرتبط
17 اردیبهشت 1401
15 اردیبهشت 1401
11 بهمن 1400
07 اردیبهشت 1400
09 مرداد 1399
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.