سبد خرید 0

وبلاگ

ساخت یک منوی drop down با css

یکی از نیازهای بیشتر پروزه های وب داشتن منوهایی با تعدادی زیر شاخه می باشد . امروزه با گسترش کتابخانه های زیادی از جمله جکوری و… ساختن یک منو بسیار آسان و نمونه های آماده خیلی زیادی در وب به صورت رایگان قرار داد . اما بیشتر نمونه منوها،اسلایدر ها ، پلاگین ها و … به صورت بهینه نوشته نشده اند .منظور از بهینه در اینجا هم فایل ها css و هم فایل های مربوط به جکوری می باشد . هدف سایت های مختلف از قرار دادن پلاگین ها و منوها و … افزایش بازید وب سایت  و مواردی از این قبیل می باشد .در صورتی که حداقل با مفاهیم و اصول اولیه css آشنایی دارید پیشنهاد می کنم اصلا از نمونه های آماده استفاده  نکنید .همانطور که گفتیم فایل های قرار گرفته به صورت بهینه ننوشته شده اند و اکثرا دارای حجم های زیادی می باشند و همین مورد می تواند باعث افت سرعت بارگذاری وب سایت شما شود . با دانستن حداقل اصول اولیه css و html می توانید بدون استفاده از کتابخانه هایی مثل جکوری یک منوی drop down بسازید .

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

برای شروع ابتدا یک فایل جدید با پسوند html. ایجاد کنید و تگ های زیر را درون تگ body آن قرار دهید :

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

ابتدا برای مخفی کردن تمامی زیر منوهای داخلی دستور css زیر را منویسیم :

و برای اینکه با قرار گرفتن اشاره گر ماوس بر روی المان های دارای زیر منو ، منوی داخلی را به نمایش در بیاوریم کد css زیر را قرار می دهیم :

 

در این حالت بدون استفاده از هیچ کتابخانه ی اضافه ای توانستیم یک منوی drop down را بسازیم .البته برای زیباتر کردن آن می توانید بر روی css آن کار کنید

کدهای css زیر مربوط به عکس فوق می باشد . اما مهمترین قسمت آن مواردی بود که توضیح داده شد .

 

اشتراک گذاری:

مطالب زیر را حتما مطالعه کنید

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

keyboard_arrow_up