5- درست کردن منوی کشویی با html (آپدیت جدید)

سلام، یکی از مواردی که خیلی پرتکراره اینه که چجوری یه همچین منوی کشویی با استفاده از کدنویسی درست کنیم.

نمونه منوی کشویی

منوهای کشویی با استفاده از تگ های ul, li ساخته می شوند. لینک آموزش و تمرین تگ.

تگ ul که مخفف کلمه UnOrdered List می باشد در فارسی یعنی "لیست نامرتب". می باشد تگی است که با استفاده از آن میتوان یک لیست نامرتب را در یک صفحه وب ایجاد و یا تعریف کرد.
آیتم های آن بصورت دایره تو پُر هستند. مثل این:

• علی
• احمد
• رضا

وقتی از این تگ استفاده کنید بصورت پیش فرض این جوری نمایش داده میشه.

برای اینکه کدنویسی تون بهتر باشد و بعدا کسی خواست گسترشش بده راحت باشد باید کل محتوای منو تون رو در تگ <nav></nav> قرار دهید.

اصول این منوها این است که وقتی موس روی یک دکمه می رود باید منو باز شو پس در مورد هاور (hover:) هم باید بدانید. لینک آموزش و تمرین

مرحله اول: کد های html ساده تون را بنویسید.

<nav>
<ul>
<li><a href=&quot#&quot>خانه</a></li>
<li><a href=&quot#&quot>در باره ما</a></li>
<li><a href=&quot#&quot>مقالات</a></li>
<li><a href=&quot#&quot>تماس با ما</a></li>
</ul>
</nav>

این مثال بالا یک نمونه منوی معمولی است که اگر آن را در html خود قرار دهید زیر هم قرار می گیرد. حالا باید با استفاده از css بغل هم بیاریم شون، نقطه ها رو برداریم، خوشکلش کنیم.

مرحله دوم: کدهای html سطح دو تون رو بنویسید و به کدها تون .
برای این موضوع باید قبل از <li/> دوباره یه <ul> باز کنیم.

مرحله سوم: اگر سطر سه خواستیم چی؟

فرق نمی کنه قراره چن زیر منو داشته باشید برای این منظور باید قبل از هر <li/> دوباره <ul> جدید شروع کنید.

مرحله چهارم: کدهای css رو اضافه کنید.

یک نکته برای افزایش سرعت:

برای اینکه بتونید سرعت بالاتری در کدنویسی داشته باشید حتما از افزونه emmet استفاده کنید. همونجور که در تصویر بالا می بینید این افزونه رایگان قابل نصب روی 14 ادیتور معروف است.

در این مطلب دو تا آموزش هم برای افزونه emmet گذاشتم.

لینک آموزش تکمیلی برای منوی کشویی