آموزش فتوشاپ و طراحی وب

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


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

سلام عرض میکنم خدمت تمامی دوستان عزیز
افراد زیادی هستند که از فریم ورک دوست داشتنی 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
}
}

 

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

کانال تلگرام پیکسل بوی

مطالب مرتبط


امیرحسین

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

   بخش نظرات

  1. های شارژ گفت:

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

  2. abolfazl گفت:

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

  3. soheil گفت:

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

    • امیرحسین گفت:

      سلام سهیل ممنونم لطف داری
      تو فکر این هستم که یه دوره آموزش طراحی وب به صورت مقدماتی تهیه کنم اما وقتشو ندارم
      ولی اگه وقت کنم حتما این دوره رو ضبط میکنم

  4. saman گفت:

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




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