ساخت منو آبشاری با css

توی خیلی از سایت ها دیدید که یه سری منو دارند که وقتی موس رو روی قسمت های مختلف اون منو میبرید زیر منو باز میشه 😀 در اینجا میخوام بهتون آموزش بدم چجوری یه منوی باز شونده (dropDown menu) بسازیم , همچنین میتونید اون رو از انتهای همین پست دانلود کنید. (پیش نمایش چیزی که در انتهای کار خواهیم ساخت رو میتونید از اینجا ببینید)

مراحل ساخت به صورت زیر هست:

  1. ساخت قسمت html
  2. تبدیل بدنه ی html به منوی با استفاده از css

در قسمت html ما میایم ساختار منوی خودمون رو با استفاده از html میسازیم , من برای ساختن منوی خودم از لیست ها یا همون ul و li استفاده میکنم 😀

برای ساختن قسمت html به صورت زیر عمل میکنیم: (برای دیدن پیش نمایش کد زیر میتونید اینجا کلیک کنید)

هر کدام از ul و li هایی که به صورت تودرتو درج کردیم برای زیرمنوها استفاده میشن!!! مثلا قسمت producs دارای زیر منو خواهد بود و همچنین زیر منوی product4 باز خودش دارای زیر منو خواهد بود 😀 اگه متوجه نشدید نگران نباشید در اخر اموزش منوی کامل شده رو ببینید کاملا متوجه میشید.

در مرحله ی دوم با استفاده از Css میایم ساختار html رو به منو تبدیل میکنیم , به کد زیر توجه کنید: (برای دیدن پیش نمایش اینجا کلیک کنید)

در دستورات بالا اومدیم و ساختار html خودمون رو به منو تبدیل کردیم. دقت کنید که هر ul که به صورت تودرتو ایجاد میشه یک منو خواهد بود مثلا در ساختار بالا دوتا ul درون هم به صورت منویی است که به سمت پایین باز میشه ولی سه تا ul درون هم مانند منویی هست که به سمت راست باز میشه.

نکته : برای ایجاد منوهای تو در تو این نکته رو باید بدونید که در ul والد باید ابتدا محتوای درون رو display:none کنید و بعدش که روی li های ul والد هاور (hover) شد بیاید و display محتوای درونی رو block کنید 😀 به همین راحتی! به همین خوشمزگی

میتونید پیش نمایش نهایی منو رو از اینجا ببینید(کلیک کنید) هم چنین میتونید اون رو از انتهای همین پست دانلود کنید.

دوستانی که سوال دارند میتونن از بخش نظرات پایین همین پست مطرح کنند تا در اسرع وقت پاسخ دریافت کنند. نگران نباشید زنده هستیم و پاسخ خواهیم داد 😀

نمونه منوی ابشاری با css
نمونه منوی ابشاری با css
casscade_menu.zip
Version: 1.0
966.0 B
63 Downloads
اطلاعات بیشتر
به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK
  1. Red Simurgh

    با سلام
    ببخشید نمیشه این رو برای صفحه نمایش لمسی باز نویسی کنید

    درگ کردن موس در صفحه لمسی امکان پذیر نیست

    خودم خیلی گشتم اما هنوز به جواب نرسیده ام

    • سلام دوست عزیز , درگ کردن چرا؟ ما توی این برنامه نیازی به درگ کردن نداریم! همه چیز بر اساس hover انجام میشه که توی گوشی های لمسی هم به درستی کار میکنه.

می‌خواهید دیدگاهتان را بیان کنید؟