در ادامه سری آموزش های HTML امروز به بررسی مبحث ساخت منوی کشویی یا همان منوی دراپ داون با استفاده از HTML می پردازیم. شاید در نگاه اول ایجاد منوهای دراپ داون کمی پیچیده به نظر بیاید ولی در این آموزش یاد خواهید گرفت که ساختن این منوها فقط با به کار گیری استایلهای ساده امکان پذیر بوده و در واقع ساخت این نوع منوها نیاز به انجام هیچ عمل پیچیده ای ندارد.

در این آموزش به صورت عملی بر روی یک پروژه کوچک کار میکنیم تا مطالب بهتر برای شما جا بیفتد. در پایان آموزش ساخت منوی کشویی html ، شما هم می توانید خودتان منوی کشویی بسازید.  از شما دعوت می کنیم که در ادامه آموزش ساخت منوی کشویی html با توکاپس همراه شوید.

ساختار منوی کشویی html

 

قبل از شروع آموزش بهتر است بدانید که در بعضی از قسمت ها از عبارت منوی کشویی و در بعضی قسمت ها از عبارت منوی دراپ داون استفاده کرده ایم، این دو نام هردو به یک نوع منو اشاره دارند. عبارت منوی کشویی معمولا در زبان فارسی بیشتر به گوشمان می خورد ولی این عبارت دقیقا معادل منوی دراپ داون (drop down) است که برخی اوقات به آن منوی بازشونده هم می گوییم.

منوی کشویی که امروز به بررسی آن می پردازیم از لحاظ کد HTML ساختار بسیار ساده ای دارند. برای ایجاد این نوع منو ها عموما از تگ های ul و li استفاده می کنیم. ما هم در ساختار منوی خود از همین نوع کدنویسی پیروی میکنیم. البته ما اینجا یک کار دیگر هم انجام میدهیم. کل ناحیه منو را با تگ nav که از تگ های html5 و مخصوص منوهای ناوبری است، احاطه میکنیم تا محل قرارگیری منو از لحاظ ساختار کدنویسی، کاملا مشخص باشد. به نمونه کد زیر دقت کنید:

<nav>
  <ul>
      <li><a href="#">اموزش ها</a></li>
      <li><a href="#">اخبار</a></li>
      <li><a href="#">تماس با ما</a></li>
      <li><a href="#">درباره ما</a></li>
  </ul>
</nav>

حتما در جریان هستید که کد بالا فقط یک مثال است و آیتم های منو میتوانند با توجه به نیاز شما کاملا متفاوت باشند. همچنین دقت داشته باشید که در کد بالا به جای لینک دلخواه در تگ a ، از نامبرساین یا # استفاده کرده ایم که شما باید آن را با لینک دلخواه خود جایگزین نمایید.

تا اینجا کدی که ما در اختیار داریم فقط سطح اول منوها را در بر دارد. حال برای اینکه بتوانیم به آیتم های دلخواه منو، زیر منو اضافه کنیم، کافی است دقیقا با پیروی از همان ساختار یک بلاک کامل ul و li به آیتم منوی دلخواهمان اضافه کنیم تا آیتم مورد نظر دارای زیر منو شود. به عنوان مثال حالا میخواهیم سه زیرمنوی “وردپرس، جوملا و متفرقه” را به آیتم منوی آموزش ها اضافه کنیم. در این حالت کد ما به شکل زیر باید تعریف شود :

<nav>
  <ul>
      <li><a href="#">اموزش ها</a></li>
           <ul>
              <li><a href="#">وردپرس</a></li>
              <li><a href="#">جوملا</a></li>
              <li><a href="#">متفرقه</a></li>
                  <ul>
                      <li><a href="#">html</a></li>
                      <li><a href="#">css</a></li>
                 </ul>
          </ul>
      <li><a href="#">اخبار</a></li>
      <li><a href="#">تماس با ما</a></li>
      <li><a href="#">درباره ما</a></li>
  </ul>
</nav>

همانطور که در تصویر زیر  مشاهده می کنید، حالا ما توانستیم به سادگی یک منوی سه سطحی داشته باشیم. در حال حاضر با توجه به اینکه برای این منو استایل css ای ننوشته ایم، نتیجه کد نوشته شده در بالا چیزی مشابه تصویر زیر خواهد بود :

 

ساخت منوی کشویی htmlهمانطور که ملاحظه می کنید یک بلاک ul کامل به تگ li مربوط به آیتم آموزش ها اضافه کرده ایم. مجددا به همین ترتیب میتوانیم به زیرمنوی متفرقه هم دو زیرمنوی دیگر اضافه کنیم و به زیرمنوی html نیز دو زیر منوی دیگر اضافه کنیم و تا زمانی که به منوی دلخواه خود برسیم به همین ترتیب جلو برویم.

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

غلامرضا بهشتیان

من غلامرضا بهشتیان، عاشق نوشتن مقاله های مفید در حوزه ی وب هستم. امیدوارم مقالات نوشته شده نظر شما خوانندگان عزیز را جلب نماید.

1 دیدگاه

https://vidao.ir/v/71277 · ژوئن 28, 2019 در 1:57 ق.ظ

سلام عالی بود

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

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