جلسه ۵۷ – منو های باز شونده در CSS

چگونه یک منوی Drop Down در CSS بسازیم؟ منظور از منو های بازشونده چیست؟ تو این مقاله، مفهوم dropdown menu، یا منو های بازشونده رو بررسی می‌کنیم.

قبل از بررسی کردن منو های باز شونده، بیایم و ببینیم اصلا اینطور سیستمی چطور با CSS کار می‌کنه؟

برای نوشتن کد مربوط به منو های باز شونده، هیچ مفهوم جدیدی قرار نیست یاد بگیریم و دقیقا مثل فصل منو ها در CSS، فقط با یاد گرفته های قبلیمون بازی می‌کنیم و ازشون به صورت کاربردی استفاده می‌کنیم.

مفهوم dropdown برای هر عنصر

تو این قسمت از آموزش طراحی وب سایت با CSS، بررسی می‌کنیم که چطور با بردن نشانگر روی یک عنصر، یک عنصر جدید رو در پایین اون به وجود بیاریم؟

به مثال زیر توجه کنین و قبل از خوندن توضیحات، سعی کنین که خودتون کد رو تحلیل کنین:

<div class="dropdown">
   <p>Click on me to show the message</p>
   <div class="dropdown-content">
      Here is the message!
   </div> 
</div>

.dropdown-content{
   display:none;
   padding:20px;
   background-color:#141414;
   color:white;
   width: 20%;
   font-size: 1.1em;
}
div.dropdown:hover .dropdown-content{
   display: block;
}

نتیجه ی کد به شکل زیر خواهد بود:

و حالا نوبت به تحلیل و توضیح کد می‌رسه:

نکته اول
اولین نکته حائز اهمیت، استفاده از عناصر مناسب برای قرار گیری مناسبه. یعنی چی؟
یعنی اگه شما، از عناصری مثل span یا a استفاده کنین، یا این بین display:inline رو استفاده کنین، ممکنه به فرم دلخواهتون نرسین.
توجه کنین که یکی از عناصر حتما باید دارای ویژگی display:block باشه.

نکته دوم
یادتون نره که از شبه کلاس hover به خوبی استفاده کنین. حتما باید عنصری که “تحت hover” قرار می‌گیره، عنصر پدر عنصری باشه که قراره ظاهر بشه. برای مثال، اگه کد HTML رو به شکل زیر بنویسیم، کار نمی‌کنه:

<div>
   <p class="dropdown">Click on me to show the message</p>
   <div class="dropdown-content">
      Here is the message!
   </div> 
</div>

نکته سوم
خاصیت های padding، font-size و در کل خاصیت هایی که تو بالا در موردشون توضیح ندادیم، کاملا دلخواه هستن و می‌تونین به سلیقه خودتون تغییرشون بدین. تغییر کردن اون ها نتیجه رو زشت تر یا خوشگل تر می‌کنه، ولی خللی تو dropdown ما ایجاد نمی‌کنه!

مفهوم dropdown در یک لینک

این قسمت رو با بررسی یه مثال، از یک dropdown بسیار ساده شروع می‌کنیم.

مثال مورد نظر رو، حتما قبل از بررسی تحلیل کد خودتون تحلیل کنین و سعیتون بر این باشه که خودتون یادش بگیرین!

به کد های HTML و CSS زیر توجه کنین:

<div class="dropdown">
   <button>MENU BUTTON</button>
   <div class="dropdown-content">
      <a href="#">ABOUT</a>
      <a href="#">CAREER</a>
      <a href="#">CONTACT</a>
   </div>
</div>

.dropdown{
   width:15%;
}
.dropdown button{
   color:white;
   background-color: #4caf50;
   padding:20px;
   border: none;
}
.dropdown:hover button{
   background-color: green;
}
div.dropdown-content a{
   display: block;
   padding:20px;
   text-decoration: none;
   color:black;
   border-bottom: 1px solid lightgray;
}
div.dropdown-content a:hover{
   background-color: lightgray;
}
div.dropdown-content{
   display: none;
   box-shadow: 1px 1px 3px lightgray;
}
div.dropdown:hover .dropdown-content{
   display: block;
}

نتیجه کد بالا رو به شکل زیر می‌تونیم ببینیم:

نکته اول
همونطور که میبینیم، دقیقا عین مثال قبل، عملیات hover باید روی عنصر پدر عنصر با کلاس dropdown-content انجام بگیره، و نه منحصرا روی عنصر button، چرا که در این صورت، کد کار نمی‌کنه.

نکته دوم
سعی کنین که حتما محتوایی که قراره پدیدار بشه رو، داخل یک عنصر مثل div یا ul قرار بدین. بهتره که به صورت مستقل قرارشون ندین. مثل کد زیر:

<div class="dropdown">
   <button>MENU BUTTON</button>
   <a href="#" class="dropdown-content">ABOUT</a>
   <a href="#" class="dropdown-content">CAREER</a>
   <a href="#" class="dropdown-content">CONTACT</a>
</div>

نکته سوم
عناصر a دارای ویژگی display:inline هستن، برای همین بهشون ویژگی display:block رو دادیم که زیر هم قرار بگیرن.

اگه جایی از مقاله براتون مبهم و سوال برانگیزه، حتما تو قسمت نظرات پایگاه دانش میزفا بپرسین تا کمکتون کنیم 🙂

مفهوم dropdown در یک منوی اصلی

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

تو این بخش،‌ یاد می‌گیریم که چطور می‌تونیم تو یک منوی اصلی یا navigation menu، یک dropdown یا منوی باز شونده داشته باشیم.

منطق ساختاری HTML فرقی با دو بخش قبلی نداره، اما یکم پیچیده تر می‌شه. به مثال پایین توجه کنین:

<ul class="navmenu">
   <li><a href="#">Home</a></li>
   <li class="dropdown-item">
   <a href="#">Contact</a>
   <ul class="dropdown-content">
      <li><a href="#">Twitter</a></li>
      <li><a href="#">Instagram</a></li>
      <li><a href="#">Telegram</a></li>
   </ul>
   </li>
   <li><a href="#">About</a></li>
   <li><a href="#">Career</a></li>
</ul>

ul.navmenu{
   list-style-type: none;
   padding-left: 0px;
   background-color:#4caf50;
   display: flex;
}
ul li:hover{
   background-color: darkgreen;
}
ul li a{
   text-decoration: none;
   color:white;
   padding:20px;
   display: inline-block;
}
/* ----- dropdown ---- */
ul.dropdown-content{
   position: absolute;
   background-color: #4caf50;
   list-style-type: none;
   padding-left: 0px;
   display: none;
}
li.dropdown-item:hover ul.dropdown-content{
   display: block;
}

نتیجه کد رو به شکل زیر مشاهده می‌کنیم:

نکته اول
کد HTML تو نگاه اول، ممکنه خیلی پیچیده و سخت به نظر برسه! اما هیچ فرقی با مثال های دو بخش قبلی نداره.
اول کد HTML‌ یک منوی ساده رو بنویسید و بعد، محتوای dropdown رو داخل بدنه li مورد نظرتون قرار بدین. مثلا به کد
زیر که قسمتی از کد بالاست توجه کنین:

همونطور که میبینیم، همه لینک های موجود تو عنصر ul سر جاشونن، فقط یکی از لینک ها “contact” دارای عنصر ul دیگه‌ای هست. این هم اتاق بودن! dropdown-content و لینک contact باعث می‌شه که خیلی راحت تر به هم وابسته باشن.

نکته دوم
حتما سعی کنین که لینک هاتون دارای عنصر a باشن، و به صورت مستقیم نوشته نشن. مثل کد زیر:

/* -------------- اینطوری بنویس---------- */
<li><a href="#">Contact</a></li>
/* -------------- نه اینطوری---------- */
<li>Contact</li>

چون در این صورت کلمه Contact به عنوان یک عنصر لینک دار شناخته میشه و خیلی راحت می‌تونیم توسط اون به صفحات دیگه وب سایت هدایت بشیم.

مفهوم dropdown در عکس ها

آخرین بخشی که با هم بررسی می‌کنیم، dropdown تو عکس هاست. به نظرتون dropdown ها چه تاثیری می‌تونن تو عکس ها داشته باشن؟

به کد CSS و HTML مثال زیر توجه کنین:

<div class="dropdown">
   <img src="flower.jpg">
   <div class="dropdown-content">
      <img src="flower.jpg">
      <h1>The Flower</h1>
      <p>This is a beautiful flower!</p>
   </div>
</div>

.dropdown img{
   width:10%;
}
.dropdown-content{
   display: none;
   box-shadow: 1px 1px 3px black;
   width:20%;
   text-align: center;
}
.dropdown-content img{
   width: 100%;
}
.dropdown-content p{
   padding:30px;
}
.dropdown:hover .dropdown-content{
   display: block;
}

نتیجه کد به شکل زیر مشاهده می‌شه:

این مثال نکته خاصی نداشت، اما می‌شه ازش به عنوان یکی از کاربرد های عالی dropdown نام برد.

پایان ترم

سوال:

نتیجه گیری

خب، فصل کوتاه و “یه کوچولو” پیچیده dropdown‌ ها به پایان رسید. البته کاربرد این فصل می‌تونه به خوبی اون “یه کوچولو” پیچیده بودنش رو بپوشونه! 🙂

این فصل با یک بار خوندن یاد گرفته نمیشه، چرا که تنوع تو طراحی dropdown ها خیلی بالاست، پس بهتون پیشنهاد می‌کنم که جدا از مطالعتون داخل میزفا، خودتون مثال های مختلف رو طراحی کنین!

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی‌