با عرض سلام و احترام خدمت شما کاربران گرامی سایت بزرگ یک لرن

تو این مطلب براتون آموزش ساخت منوی آبشاری با استفاده از html و css رو قرار دادم تا با نحوه ی ساخت اون آشنا بشید و خودتون برای سایتتون منو بسازید .

.:: لطفا برای مشاهده آموزش ساخت منوی آبشاری به ادامه مطلب بروید ::.

تو این آموزش من اصول طراحی منو رو براتون توضیح میدم و استایل دهیش دیگه به عهده ی خودتونه . البته بعد از آموزش براتون یه منوی آبشاری زیبا قرار دادم .

ابتدا کد html زیر را می نویسیم :

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

تو کد بالا من به تگ ul اولی کلاس menu را دادم تا بتونم تو css بهش استایل بدم .

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

حالا ببینیم کد بالا چی میگه :

تو خط ۲ مقدار direction رو برای کلاس menu برابر rtl قرار دادیم تا منو از راست به چپ نوسته بشه ، برای زبان شیرین فارسی

تو خط ۳ توسط سلکتور .menu li به تموم تگ های li داخل کلاس menu مقدار display:inline-block رو دادیم تا آیتم های منو زیر هم نباشن و کنار هم قرار بگیرن .

تو خط ۴ تگ ul ای که به عنوان زیر منو هست رو صدا زدیم و مقدار position:absolute رو بهش دادیم تا زیر تگ والد خودش قرار بگیره تا وقتی ماوس روی لینک امکانات قرار گرفت این زیر منو زیرش باز بشه .

مقدار padding رو هم برای این گذاشتیم تا زیر منو از هیچ طرف فاصله نداشته باشه مخصوصا طرف راست . و مقدار visibility رو هم روی مقدار hidden گذاشتیم تا زیر منو در حالت معمولی پنهان باشه .

تو خط ۵ هم توسط سلکتور .menu li ul li به تگ های li داخل زیر منو خاصیت display:block رو دادیم تا آیتم های زیر منو ، زیر همدیگه قرار بگیرن .

و در آخر تو خط ۶ گفتیم که اگه تگ li ای که داخل کلاس menu هست hover شد (یعنی ماوس روش قرار گرفت) زیر منوش که تگ ul هست توسط مقدار visibility:visible ظاهر بشه .

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

در آخر به خاطر این که تو این آموزش ما را همراهی کردید تشکر می کنم و این منوی آبشاری رو به شما تقدیم می کنم امیدوارم خوشتون بیاد :

کد html :

کد css :

آدرس سایتهای ساخت منو

CSS Button Generator - Imageless css buttons simplified

ColorZilla - Eyedropper, Color Picker, Gradient Generator and more

The ultimate CSS tools for web designers | CSSmatic

CSS3 Generator