حل مشکل نمایش زیر منو های بوت استرپ
سلام عرض میکنم خدمت تمامی دوستان عزیز
افراد زیادی هستند که از فریم ورک دوست داشتنی 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 } }
توجه : کپی از این مطلب تنها با ذکر منبع مجاز میباشد
سلام ؛
سایت من فول ریسپانسیو هست ؛
و از بوت استرپ استفاده شده ،
اما منوش خیلی محدود و غیرقابل انعطافه ،
چطور میشه منوی اصلی بوت استرپ رو بهش اضافه کرد ؟
ممنونم از سایت خوب شما
سلام دوست من برای تبدیل منوی بوت استرپ به وردپرس از این آموزش استفاده کنید ، همه چیز مشخصه فقط کافیه که مراحل رو به درستی انجام بدید و کمی روی استایل های منو کار کنید
لینک آمورش: https://github.com/twittem/wp-bootstrap-navwalker
سلام:
منوی سایت من یه جاهایی تا ۴ نسل زیر شاخه داره
توی موبایل وقتی منو رو باز میکنی با همه زیر شاخه هاش باز میشه و وقتی یکی رو میبندی همش با هم بسته میشه
میخواستم ببینم مشکلش از کجاست و چجوری میتونم درستش کنم؟
http://www.fakoursanat.com
این ادرس سایت هست میتونید انلاین چک کنید
از قالب finance ورد پرس هم استفاده کردم
سلام پیشنهاد میکنم که سوالتون رو تو انجمن وردپرس مطرح کنید :
http://forum.wp-parsi.com
سلام امیر حسین عزیز سایتت فوق العادست ولی ممکنه بتونی اموزش طراحی وب رو از پایه اموزش بدی خیلی خوب میشه
سلام سهیل ممنونم لطف داری
تو فکر این هستم که یه دوره آموزش طراحی وب به صورت مقدماتی تهیه کنم اما وقتشو ندارم
ولی اگه وقت کنم حتما این دوره رو ضبط میکنم
سلام.این کد برای بوت استرپ ۳ اجرا میشه اما برای ۴ نسخه بتا خیر.ممنون میشم کدش رو قرار بدید چون فکر میکنم کلاس ها فرق کرده در این نسخه
سلام چشم برسی میکنم
با سلام و ادب
من منوی دراپ دان ریسپانسیو نوشتم اما زیر منوی منوهای دراپ دانم نمایش داده نمیشه ؟
کسی میتونه راهنماییم کنه ؟
سلام و درود
سورس های آماده زیاد هست توی گوگل عبارت DropDown Menu Css رو سرچ کنید . هم چنین میتونید از خود بوت استرپ مطابق با این آموزش پیش برید