حل مشکل نمایش زیر منو های بوت استرپ

سلام عرض میکنم خدمت تمامی دوستان عزیز
افراد زیادی هستند که از فریم ورک دوست داشتنی Bootstrap استفاده میکنن و یکی از معزلات این فریم ورک منو های Drop Down هستش ، همون طور که میدونید برای نمایش زیر منو های بوت استرپ حتما کاربر باید رو منوی اصلی کلیک کنه تا زیر منو ها نمایش داده بشه ، این مسئله ممکنه برای خیلی از کاربر ها خوش آیند نباشه و بلعکس برای بعضی ها یک حسن محسوب بشه ، این وضعیت برای من زیاد جالب نبود و رویداد کلیک رو برداشتم
اما سوال اینجاست که چطور میتونیم رویداد کلیک(Click) رو تغییر بدیم و از حالت Hover استفاده کنیم، همراه پیکسل بوی باشید تا این  مشکل رو بر طرف کنیم

استفاده از حالت hover برای منو  Drop Down  بوت استرپ

برای این که جلوگیری کنیم از نمایش زیر منو های بوت استرپ با استفاده از رویداد کلیک دو راه وجود داره ، اولی استفاده از کد های Jquery  دومی هم ویرایش کد های CSS  فایل bootstrap.css  هستش ، من از روش دوم استفاده کردم و نتیجه گرفتم

برای استفاده از روش CSS فقط کافیه قطعه کدی رو که قرار میدم رو به فایل bootstrap.css  یا bootstrap.min.css  اضافه کنید ، آیا این دوتا فایل با هم فرق میکنن؟ خیر هر جفتشون یکی هست تنها تفاوتشون اینه که فایل bootstrap.min.css فشرده شده و حجم کم تری داره . کد مورد نطر رو باید جای مخصوصی از فایل بوت استرپ قرار بدیم؟ خیر هر جای که خواستید استفاده کنید ، پیشنهاد میکنم که ابتدا یا انتهای فایل استفاده کنید تا یادتون باشه کجا این قطعه کد رو قرار دادید

کد نمایش زیر منو های بوت استرپ با استفاده از حالت hover

@media (min-width:768px) {
ul.nav li.dropdown:hover > .dropdown-menu {
    display: block;
}
}

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

@media (min-width:768px) {
اجرای دستورات برای دستگاه هایی مثل : لپ تاپ و کامپیوتر
}

این قسمت از کد چه کاری انجام میده ؟  به این قطعه کد مدیا گوئری گفته میشه ، که باعث میشه ما دستورات CSS رو در سایز های مختلف تنظیم کنیم ، جالب هستش بدونید که سایت های واکنشگرا (Responsive) با این روش ایحاد میشن .

خوب اینجا مقدار مدیا کوئری برابرهستش با min-width:768px  به این معنی که دستورات داخل بلاک مدیا کوئری تنها با دستگاه هایی که کمترین مقدار عرض صفحه نمایش 768px  هستند اجرا میشن ، دستور که ما دادیم تنها در لپ تاپ و کامپیوتر های شخصی اجرا میشه و در صفحه نمایشی که عرض کم تر از  768px داره اجرا نمیشه. چرا از این مدیا کوئری استفاده کردیم ؟  به این دلیل که در تلفن های همراه از فناوری Touch استفاده میشه  و نشانه گر موسی وجود نداره پس قاعدتا حالت hover هم وجود نداره ، کاربر در تلفن همراه برای نمایش زیر منو ها از رویداد کلیک استفاده میکنه

ایجاد افکت منوی آبشاری در بوت استرپ

نحوه نمایش زیر منو های بوت استرپ با استفاده از حالت hover یاد گرفتیم و حالا میریم سراغ افکت دادن منو های افتادنی (Drop Down) ، برای انجام این کار کافیه که قطعه کدی که بالا قرار دادم رو کمی تغییر بدیم ، من تونستم چنتا افکت زیبا برای زیر منو ها ایجاد کنم کد رو قرار میدم تا بتونید استفاده کنید از این افکت ها ، البته با خلاقیتی که دارید میتونید افکت های جالب تری هم  اجاد کنید

افکت Slide Down/Up

@media (min-width:768px) {
ul.nav li.dropdown .dropdown-menu {
    -webkit-transition: all ease-in 0.4s;
    -moz-transition: all ease-in 0.4s;
    -o-transition: all  ease-in 0.4s;
    transition: all  ease-in 0.4s;
    padding:0;
    box-shadow: none;
    max-height: 0;
    display: block;
    overflow: hidden;
    border-color:transparent;
}
ul.nav li.dropdown:hover > ul.dropdown-menu {
    max-height: 300px;
     display: block;
}
}

برای سایت پیکسل بوی از این افکت جالب استفاده کردم

افکت  Slide Fade In/Out

@media (min-width:768px) {
ul.nav li.dropdown .dropdown-menu {
    -webkit-transition: ease 0.3s;
    -moz-transition:   ease 0.3s;
    -o-transition:   ease 0.3s;
    transition:   ease 0.3s;
    padding:0;
    box-shadow: none;
    display: block;
    overflow: hidden;
    max-height: 0;
    border-color:transparent;
    margin-top:15px;
    opacity: 0
}
ul.nav li.dropdown:hover > ul.dropdown-menu {
	 max-height: 300px;
     display: block;
     margin-top:0;
     opacity: 1
}
}

افکت Fade In/Out

@media (min-width:768px) {
ul.nav li.dropdown .dropdown-menu {
    -webkit-transition: opacity ease 0.4s;
    -moz-transition: opacity ease 0.4s;
    -o-transition: opacity  ease 0.4s;
    transition: opacity  ease 0.4s;
    padding:0;
    box-shadow: none;
    max-height: 0;
    display: block;
    overflow: hidden;
    border-color:transparent;
    opacity: 0
}
ul.nav li.dropdown:hover > ul.dropdown-menu {
    max-height: 300px;
     display: block;
     opacity: 1
}
}

توجه : کپی از این مطلب تنها با ذکر منبع مجاز میباشد