جلسه چهاردهم: منو کشویی Dropdown

منو کشویی Dropdown

خوش اومدین به چهاردهمین جلسه از دوره آموزش رایگان CSS. امروز قرار هست که در مورد dropdown با همدیگه صحبت کنیم و با انواع اون از جمله منو کشویی آشنا بشیم. ما تو این جلسه علاوه بر اینکه با نحوه ایجاد dropdown با استفاده از css آشنا میشیم، چند نمونه عملی هم انجام میدیم و نکات مربوط به اونها رو بررسی میکنیم.

ما توی این جلسه یک منو کشویی dropdown ایجاد میکنیم و کدهای اون رو بررسی میکنیم. همچنین میتونیم بجای منو عناصر دیگه ای رو هم قرار بدیم.

به عنون مثال

• متن کشویی Dropdown Text
• منو کشویی Dropdown Menu
• تصویر کشویی Dropdown Image
• other

اساس کار یکسان هست و ما میتونیم این ویژگی رو به هر شکلی که مدنظرمون هست پیاده سازی کنیم.

اساس بازشونده کشویی Basic 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>

همونطور که میبینید در بخش html من یک div دارم که کلاس dropdown داره. position این کلاس رو روی relative قرار میدم. در داخل این div از یک span استفاده کردم که حاوی همون عبارتی هست که قراره وقتی موس رو روی اون بردیم کشویی ما نمایش داده بشه. همچنین یه div دیگه داخل div با کلاس dropdown دارم که کلاس dropdown-content رو داره. همونطور که از اسم گذاری اون مشخص هست، قراره محتوایی که قرار هست بصورت کشویی نمایش داده بشه رو داخل اون قرار بدیم. این محتوا توی این مثال یه تگ p هست ما میتونیم هر چیز دیگری جای اون استفاده کنیم. اگر در بخش استایل دهی بینید من به کلاس dropdown-content دو تا ویژگی مهم رو دادم که وجودشون ضروری هست. اولین display:none که باعث میشه در حالت معمولی این محتوا نمایش داده نشه و دومی position:absolute که باعث میشه که جایگاه ثابتی داشته باشه و دقیقا زیر کلاس dropdown نمایش داده بشه. یه ویژگی مهم دیگه هم داریم که البته ضروری نیست ولی اگه تعداد لایه های ما زیاد باشه وجودش ضروری میشه و اونم z-index هست. در مورد این ویژگی در یک درس جداگانه توضیح خواهم داد.

در آخرین بخش استایل دهی هم در وضعیت hover کلاس dropdown برای کلاس dropdown-content ویژگی display:block رو ست کردم.یعنی زمانی که موس روی کلاس dropdown رفت، کلاس drodown-content رو نمایش بده.

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

ایجاد منو کشویی dropdown menu

خب حالا که با اساس dropdown آشنا شدیم، ایجاد یک منو کشویی کار خیلی راحتی هست. کافیه کلاس dropdown خودمون رو به یک دکمه تبدیل کنیم و کلاس dropdown-content رو به یه لیست. در مورد اولی که کار سختی نداریم و میتونیم اون رو با استفاده از css به راحتی انجام بدیم. در مورد دومی که قرار هست dropdown-content رو به لیست تبدیل کنیم هم کار سختی نداریم. در مثال بالا من یه تگ p داخل این کلاس قرار داده بودم، حالا میتونیم خیلی راحت یک لیست بجای اون تگ p قرار بدیم. قطعه کد پایین رو ببینید:

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

در اینجا من کار خاصی انجام ندادم فقط بجای اون تگ span که در مثال قبلی استفاده کرده بودم، اومدم و از تگ button استفاده کردم. با این کار بجای یه متن معمولی که باعث نمایش dropdown-content میشد از یه دکمه استفاده کردم. و در داخل dropdown-content هم بجای یک پاراگراف با استفاده از ۳ تا تگ a و استایل دهی مناسب به اونها یک منو درست کردم.

با تغییر محتوای دو کلاس dropdown و dropdown-content میتونیم انواع مختلفی از dropdownها رو ایجاد کنیم.

همچنین ما میتونیم از منو کشویی داخل نوار ناوبری (navigation bar) هم استفاده کنیم. منو کشویی کاربردهای زیادی داره که حتما نمونه های زیادی از اون رو توی صفحات وب دیدید. در حال حاضر شما هم قادر به ایجاد چنین مواردی هستید.

همه ویدیوهای دوره آموزش CSS