۳۰
مهر

جلسه ۳۰ : ویژگی Dropdown در CSS

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. با استفاده از ویژگی Dropdown در CSS شما می توانید در قالب یک لیست کشویی در CSS آیتم هایی را برای انتخاب کاربران بصورت کشویی نمایش دهید. شما می توانید این قابلیت را روی عناصر مختلف HTML از جمله TEXT ، BUTTON و تصاویر اعمال کنید، به طوری که کاربر با بردن اشاره گر ماوس روی آن لیست آیتم های مشخص شده را مشاهده کرده و اجازه ی انتخاب آن ها را داشته باشد. برای آشنایی بیشتر با قابلیت منوی Dropdown در CSS در ادامه ی این آموزش با ما همراه باشید.

Dropdown در CSS

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

نمونه های مختلف Dropdown در CSS

منوی Dropdown در CSS

ساختار اصلی یک Dropdown در CSS

ساختار اصلی یک منوی Dropdown در CSS که با حرکت اشاره گر ماوس روی آن ، آیتم های آن ظاهر می شود:

مثال : ساختار اصلی منوی 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>

<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>

<span>Mouse over me</span>

<p>Hello World!</p>

</div>

خودتان امتحان کنید »

تشریح مثال فوق

HTML) – می توانید از عناصر مختلف برای باز کردن محتوای Dropdown در CSS از جمله <span> یا <button> استفاده کنید.

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

در نهایت یک عنصر <div> هم برای هر کدام از آیتم های Dropdown تعریف کرده ایم.

CSS) – در کلاس .dropdown از ویژگی position:relative استفاده کرده ایم تا به عنوان عنصر والد منوی کشویی از موقعیت نسبی برخوردار باشد.

ویژگی min-width عنصر محتوا را برابر با ۱۶۰px قرار داده ایم تا عرض محتوا انعطاف پذیر بوده و در صورت لزوم کوچک تر شود.

اگر می خواهید عرض عنصر محتوا با عرض دکمه dropdown برابر باشد ویژگی width:100% را اعمال کرده و overflow:auto را نیز اضافه کنید.

ما به جای border اطراف محتوا از ویژگی box-shadow استفاده کرده ایم تا منوی کشویی جذاب تر به نظر برسد.

از انتخابگر :hover استفاده کرده ایم تا زمانیکه کاربر اشاره گر ماوس را روی button یا عنصر مربوطه می برد لیست کشویی Dropdown ظاهر شود.

منوی Dropdown

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

مثال : منوی 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>

<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>

<button class="dropbtn">Dropdown</button>

</div>

خودتان امتحان کنید »

ترازبندی محتوای dropdown در سمت راست

اگر می خواهید محتوای منوی شما از راست به چپ تراز شود، کافیست صفت right: 0; را به CSS اضافه کنید:

مثال : ترازبندی منو کشویی

.dropdown-content {
    right: 0;
}

.dropdown-content {

right: 0;

}

خودتان امتحان کنید »

مثال های بیشتر

مثال ۱- افزودن عناصر دیگر از جمله تصاویر به محتوای منوی dropdown در CSS:

مثال : افزودن تصاویر

<!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="img_5terre.jpg" alt="Cinque Terre" width="100" height="50">
  <div class="dropdown-content">
    <img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="200">
    <div class="desc">Beautiful Cinque Terre</div>
  </div>
</div>

</body>
</html>

<!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="desc">Beautiful Cinque Terre</div>

</div>

</body>

</html>

خودتان امتحان کنید »

منوی Dropdown Navbar

همچنین می توانید یک منوی dropdown را به نوار navigation اضافه کنید:

مثال : منوی افقی

<!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>

<!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>

<a href="javascript:void(0)" class="dropbtn">Dropdown</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>

خودتان امتحان کنید »

کلام آخر

در ایجاد یک قالب کامل وب سایت به احتمال زیاد به ایجاد یک یا چند منوی Dropdown نیاز خواهی داشت، از این رو ما برای راهنمایی شما چگونگی طراحی یک منوی Dropdown در CSS را در این بخش ارائه کردیم.

به اشتراک بگذارید

منوی Dropdown در CSS ,ویژگی Dropdown در CSS

دیدگاه کاربران

تعداد دیدگاه : 3

amin
خرداد ۲۸, ۱۳۹۹
سلام خط زیر را امکانش هست توضیح بدهید تا حالا همچین چیزی را ندیده بودم
.dropdown:hover .dropdown-content
نباید بین dropdown:hover و .dropdwn-content یک <> گذاشته شود?
پاسخ دادن
amin
خرداد ۲۸, ۱۳۹۹
منظورم اینست بین این دو علامت و گذاشته شود در متن بالایم پاک شده است
پاسخ دادن
- پی وی لرن
  خرداد ۲۸, ۱۳۹۹
  سلام
  اگر منظورتون این خط است
  .dropdown:hover .dropdown-content { display: block; }
  یعنی هر وقت موس روی drop-down هاور شد dropdown-content نمایش داده شود و اگر علامت < قرار داده شود یعنی اولین dropdown-content نمایش داده شود.
  پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۳۰ : ویژگی Dropdown در CSS

مقدمه

Dropdown در CSS

نمونه های مختلف Dropdown در CSS

ساختار اصلی یک Dropdown در CSS

تشریح مثال فوق

منوی Dropdown

ترازبندی محتوای dropdown در سمت راست

مثال های بیشتر

منوی Dropdown Navbar

کلام آخر

لیست مطالب دوره

آموزش های پیشرفته CSS

گریدبندی در css

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ