آموزش CSSآموزش طراحی سایت

جلسه ۵۷ – منو های باز شونده در 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;
}
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 نام برد.

پایان ترم

سوال:

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

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

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

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

نتیجه گیری

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

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

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

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

 

برچسب ها

نوید معدن نژاد

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

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

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


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

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

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