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

ساخت منو های Drop Down

منو های باز شونده
منو های باز شونده

چگونه یک منوی 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;
}

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

مفهوم dropdown

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

نکته اول
اولین نکته حائز اهمیت، استفاده از عناصر مناسب برای قرار گیری مناسبه. یعنی چی؟
یعنی اگه شما، از عناصری مثل 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 زیر توجه کنین:

کد 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;
}

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

dropdown اول

نکته اول
همونطور که میبینیم، دقیقا عین مثال قبل، عملیات 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 فرقی با دو بخش قبلی نداره، اما یکم پیچیده تر می‌شه. به مثال پایین توجه کنین:

ساختار dropdown menuاستایل دهی به dropdown menu

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

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

dropdown منوی نهایی

نکته اول
کد 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 نام برد.

پایان ترم

[box type=”info” class=”question-from-users” width=””]

سوال:

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

نکته: طراحی منو های بازشونده، راه های بسیار متنوعی داره. بنابراین خودتون رو “زیاد” به کد های گفته شده در این مقاله محدود نکنین.

کد های CSS خودتون رو در یک فایل txt نوشته و اون رو در قسمت نظرات میزفا، با نام “پاسخ کوییز” آپلود کنین.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

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

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

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

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

 

فیلم آموزشی asp.net core 2

نوید معدن نژاد
یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!
آموزش CSS
پایین سرفصل های CSS هست، روی منم کلیک کنی میتونی ببینی.

فیلم آموزشی asp.net core 2

13 نظر

13 پاسخ

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

    یک سوالی که برام ایجاد شد اینه که بعد از ساخت “.dropdown-content” بعد ازین که display مقداری میگیره
    عنصر های پایینی جابجا میشن
    یعنی با باز شدن منو کشویی عناصر زیرش به اندازه فضای “.dropdown-content” پایین میرن که جالب نیست
    چه راه حلی باید انجام داد؟

    1. سلام اقا کریم. خواهش میکنیم🌹
      برای حل این مشکل میشه به سادگی از دستور position: absolute برای dropdown-content استفاده کرد. البته با رعایت دستور position-relative برای عنصر والد dropdown-content که dropdown-content ما تو صفحه ول نچرخه 🙂
      اینطوری باز شدن منو باعث حرکت هیچ عنصر دیگه ای جز همون دراپ داون نمیشه.

    1. سلام متین، خسته نباشی، خیلی عالی شده مرسی ازت🌹

  2. سلام ؛ساخت منوهایی که به صورتی افقی باز می شند هم می گید مث منوی خودتون و اینکه اون آیکون سه خط رو چجوری قرار بدیم.

    1. سلام عزیز. ببین اگه درست متوجه منظورت شده باشم، منو هایی رو میخوای که قسمت دراپ داونشون به صورت افقی کنار گزینه ها باشه. من مطالعه این مقاله رو بهت پیشنهاد میکنم.
      برای قرار دادن آیکون اون سه خط هم راه های مختلفی هست که عمومی ترینشون استفاده کردن از fontawesome هست که تو آموزش CSS یه مقاله کامل براش نوشتیم که میتونی کامل مطالعه کنی 🙂
      اگه سوالی برات باز پیش اومد حتما بپرس

  3. سلام در بخش دراپ داون منو اصلی تو کد هایی ک هست تو بخش
    /* —– dropdown —- */

    سی اس اس یه display:none کم داره برای همین دراپ داون ثابته درستش کنید

    1. الان آپلود شده. ممنون مهدی منوی خوبیه. فقط یه نکته، سعی کن بدون استفاده از خاصیت های right و top هم تمرین کنی. استفاده از این خاصیت ها به خصوص در واحد px میتونه تو واکنش گرایی یه مقدار دردسر ایجاد کنه.

    1. مهدی جان پاسخ کوییزت تو این مقاله هم آپلود نشده.

    1. سلام سینا.
      arrow down icon در گوگل سرچ کنی کلی منبع هست.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر