ساخت منوی dropdown توسط CSS
وبلاگ داتیس دیزاین یکی از وبلاگ های مفید وب فارسی هست که استفاده از اون رو به همه ی دوستان پیشنهاد می کنم. در زیر می توانید آخرین مطلبی که توسط این بلاگر و طراح وب نوشته شده است استفاده کنید.
چند وقت پیش تو یکی از کامنت دوستان درخواست شده بود که برای ساخت منوی dropdown فارسی من توضیحاتی رو بدم. برای ساخت منوی dropdown فارسی به دلیل نیاز به ویژگی RTL ممکن است کمی به مشکل بر بخوریم. من سعی میکنم در این پست روش ساده و کارآمدی رو آموزش بدم که تو بیشتر مرورگرها به درستی نمایش داده میشه و شما می تونید با کمی تغییر اون رو به شکل دلخواه خود درآورید.
اما به هر حال ممکن است که مشکلاتی هم در بعضی شرایط داشته باشه ، خوشحال میشم اگه موردی رو دیدید به من اطلاع بدین تا بررسی کنم. این روش تنها با HTML و CSS ساخته میشه و از هیچ کد Javascript در آن استفاده نشده است.
البته در این آموزش من از قالب گرافیکی استفاده نکردم و فقط از استایل های CSS استفاده کرده ام ، شما می توانید با یادگیری مراحل این کار ، هر قالب گرافیکی را که می خواهید در این روش پیاده سازی کنید.
کدنویسی ساختار منو
برای ساخت منو از همان روش استاندارد و همیشگی استفاده میکنم که قبلا هم در این پست نحوه ساخت آنرا توضیح داده بودم، با این تفاوت که در اینجا ما نیاز به یک زیرمنو هم داریم ، به کد زیر دقت کنید :
این کد منویی به شکل زیر در می آورد، البته کدهای کامل به همراه استایلها را می توانید در آخر این پست دریافت کنید :
مخفی کردن منوی زیرین
همانطور که مشاهده می کنید، قسمت زیرین منو هم قابل مشاهده است، خب مرحله اصلی کار در این قسمت انجام می شود، ما باید تنها با کد CSS منوی زیرین را مخفی کنیم و هنگامی که موس رو منوی مربوطه بالایی قرار می گیرد آنها نمایان شوند.
به کد CSS زیر دقت کنید :
ul.second_nav {
z-index: 1000;
}
ul.second_nav li {
width: 100px;
}
div#navigation li ul.second_nav li {
display: none;
}
div#navigation li:hover ul.second_nav li {
display: block;
direction: rtl;
}
div#navigation li:hover ul.second_nav li:hover {
background-color: #eee;
}
ul.second_nav li a {
border: none;
display: block;
color: #000;
text-indent: 0 !important;
}
در این کد ما توسط ویژگی display قسمت منوی پایین رو مخفی کردیم و سپس هنگامی که موس روی منوی مربوطه قرار می گیرد این منو توسط همان ویژگی display نمایان می شود، خب منوی ما آماده شد. دقت کنید که این کدها به ul که دارای کلاس second_nav هست اعمال شده است که همان منوی زیرین در کد HTML ما می باشد.
تنها با کمی کد CSS توانستیم یک منوی dropdown ساده را بسازیم، همانطور که گفتم شما می توانید قالب گرافیکی مورد نیاز خود را هم برای این منو با کمی تغییر آماده کنید، من این منو را در مرورگرهای IE7، IE8، Firefox، Safari، Chrome و Opera تست کردم و مشکلی نداشت، البته در مرورگر IE6 این روش جواب نمی دهد.
نظرات شما عزیزان:
برچسب ها:
تبادل
لینک هوشمند
