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

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

nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}

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

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

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

nav ul {
background: #f1f4f7;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}

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

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

nav ul li {
float: right;
position: relative;
font-weight: bold;
}

nav ul li:hover {
background: #a70101;
}

nav ul li:hover a {
color: #fff;
}

nav ul li a {
display: block;
padding: 15px 32px;
color: #4e4e4e;
text-decoration: none;
}

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

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

nav ul ul {
background: #9c0000;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
right: 0;
width: 200px;
}
nav ul ul li {
float: none;
border-top: 1px solid #940000;
border-bottom: 1px solid #940000;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #112f44;
}

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

nav ul ul ul {
position: absolute;
right: 100%;
top:0;
}

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

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

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

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

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

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

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

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

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