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

در اینجا اولین قدم ما این است که کاری کنیم که اولا در حالت عادی، فقط آیتم های اصلی منو به نمایش در بیایند و دوما، هرگاه ماوس بر روی سردسته منویی قرار گرفت که دارای زیرمنو است، زیرمنو های آن به نمایش گذاشته شوند. برای این منظور کد زیر را به استایل های css خود اضافه می کنیم :

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

این کار را به این دلیل انجام داده ایم که از به نمایش گذاشته شدن همزمان همه ul های فرزند در زمان قرارگیری ماوس روی یکی از سرمنوها جلوگیری شود. (دقت کنید که در صورت عدم موجود بودن این علامت، وقتی ماوس را روی یکی از منوهای دارای زیرمنو قرار می دهید،تمام سطوح زیرین آن با هم به نمایش در می آیند که این مسئله برای ما اصلا ایده آل نیست)

شاید از این مقاله خوشتون بیاد:  آموزش css جلسه ششم: خصوصیت Position در CSS

در ادامه با ما همراه باشید تا نحوه نمایش و رنگ منوها را بتوانیم تغییر دهیم.

در اینجا یکی از بخش های مهم استفاده از position : relative برای منو است. انتخاب پوزیشن در حالت relative به ما اجازه میدهد که بعدا محل قرارگیری آیتم های زیرمنو را با توجه به آیتم های راس منو مرتب کنیم.

سپس نوبت به تعریف استایل های آیتم های رده اول منو میرسد :

در ابتدا محل شناوری آیتم li را بر روی right تنظیم کرده ایم تا آیتم های منو در کنار هم از راست به چپ و متناسب با زبان فارسی نشان داده شوند. و سپس در خط هفتم مشخص کرده ایم که در زمان قرارگیری ماوس روی یکی از آیتم های منو، پس زمینه آن به چه رنگی در بیاید. و در بخش بعدی نیز رنگ لینک های تگ a را در زمان شناور شدن ماوس روی آنها می توانیم تغییر دهیم.

شاید از این مقاله خوشتون بیاد:  آموزش css جلسه سوم :فرمت دهی جداول در css

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

بعد از این تنها یک کار برای انجام دارید و آن هم مشخص کردن استایل های آخرین سطح منوی کشویی است :

شاید از این مقاله خوشتون بیاد:  آموزش css جلسه چهارم: تنظیم پشت زمینه در css

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

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

هر چقدر منوی شما عمیق تر شود، باز هم محل نمایش آیتم های زیرمنو صحیح خواهد بود. فقط حواستان به عرض صفحه باشد …. پیشنهاد توکاپس این است که منوهای خود را خیلی هم تو در تو نکنید و حتی الامکان به دو یا حداکثر سه سطح اکتفا کنید.

منتظر شنیدن نظرات و پیشنهادات شما هستیم.

دسته‌ها: آموزش css

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

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

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

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