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

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

جمعه,۲۱آبان,۱۳۹۵ امیرحسین ۱۰ دیدگاه 9240 بازدید

سلام عرض میکنم خدمت تمامی دوستان عزیز
افراد زیادی هستند که از فریم ورک دوست داشتنی 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  به این معنی که دستورات داخل بلاک مدیا کوئری تنها با دستگاه هایی که کمترین مقدار عرض صفحه نمایش ۷۶۸px  هستند اجرا میشن ، دستور که ما دادیم تنها در لپ تاپ و کامپیوتر های شخصی اجرا میشه و در صفحه نمایشی که عرض کم تر از  ۷۶۸px داره اجرا نمیشه. چرا از این مدیا کوئری استفاده کردیم ؟  به این دلیل که در تلفن های همراه از فناوری 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
}
}

 

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

Rate this post
امیرحسین
امیرحسین

امیرحسین شهسواری هستم مدیر سایت پیکسل بوی . دانشجوی رشته نرم افزار و فعال در زمینه طراحی وب و گرافیک . دوست دارم که تجربیاتم رو با شما دوستان به اشتراک بزارم ، هم چنین امیدوارم که مطالب پیکسل بوی براتون مفید باشه :)

نوشته های مرتبط

اشتراک در
اطلاع از
guest

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

10 نظرات
قدیمی‌ترین
تازه‌ترین بیشترین رأی
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها
های شارژ
های شارژ
7 سال قبل

سلام ؛
سایت من فول ریسپانسیو هست ؛
و از بوت استرپ استفاده شده ،
اما منوش خیلی محدود و غیرقابل انعطافه ،
چطور میشه منوی اصلی بوت استرپ رو بهش اضافه کرد ؟
ممنونم از سایت خوب شما

abolfazl
abolfazl
7 سال قبل

سلام:
منوی سایت من یه جاهایی تا ۴ نسل زیر شاخه داره
توی موبایل وقتی منو رو باز میکنی با همه زیر شاخه هاش باز میشه و وقتی یکی رو میبندی همش با هم بسته میشه
میخواستم ببینم مشکلش از کجاست و چجوری میتونم درستش کنم؟
http://www.fakoursanat.com
این ادرس سایت هست میتونید انلاین چک کنید
از قالب finance ورد پرس هم استفاده کردم

soheil
soheil
7 سال قبل

سلام امیر حسین عزیز سایتت فوق العادست ولی ممکنه بتونی اموزش طراحی وب رو از پایه اموزش بدی خیلی خوب میشه

saman
saman
7 سال قبل

سلام.این کد برای بوت استرپ ۳ اجرا میشه اما برای ۴ نسخه بتا خیر.ممنون میشم کدش رو قرار بدید چون فکر میکنم کلاس ها فرق کرده در این نسخه

سمیرا
سمیرا
4 سال قبل

با سلام و ادب

من منوی دراپ دان ریسپانسیو نوشتم اما زیر منوی منوهای دراپ دانم نمایش داده نمیشه ؟

کسی میتونه راهنماییم کنه ؟