0
سبد خرید من 0 دوره
سبد خرید شما خالیست :(
پرسش

چطور میتونم منوی dropdown ( دراپ‌ داون ) یا همون منوی کشویی در bootstrap ( بوت‌استرپ ) رو با هاور کردن نمایش بدم به جای اینکه با کلیک کردن این کار انجام بشه ؟

how to make twitter bootstrap menu dropdown on hover rather than click

سلام من از بوت‌ استرپ استفاده می‌کنم و یه مشکلی دارم. وقتی روی آیتم‌ های منوی navbar کلیک می‌کنم منوی کشویی نمایش داده میشه ولی من میخوام که این منو به جای کلیک با هاور کردن موس نمایش داده بشه چطوری میشه اینکارو انجام داد ؟

1403/05/30
پاسخ
سلام برای اینکه بتونی منوی دراپ‌ داون بوت‌ رو با هاور کردن نمایش بدی  باید از ترکیب CSS و JavaScript استفاده کنی
 در مرحله اول باید استایلاشو بنویسی
.navbar-nav > .dropdown:hover > .dropdown-menu {
  display: block;
  visibility: visible;
  opacity: 1;
}
.navbar-nav > .dropdown > .dropdown-menu {
  display: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.2s, opacity 0.2s linear;
}

بعدش کد JavaScript (اگر نیاز بود) برای نسخه ۴ به پایین بوت استرپ منظورمه چون برای نسخه‌ های جدید بوت‌ استرپ (از نسخه 5 به بالا) فقط کافیه از CSS استفاده کنی و نیازی به JavaScript نیست اما اگه هنوز داری از نسخه 4 استفاده می‌کنی می‌تونی از این کد استفاده کنی:

document.querySelectorAll('.navbar .dropdown').forEach(function(dropdown){
  dropdown.addEventListener('mouseenter', function(){
  let dropdownMenu = this.querySelector('.dropdown-menu');
  dropdownMenu.classList.add('show');
});
dropdown.addEventListener('mouseleave', function(){
  let dropdownMenu = this.querySelector('.dropdown-menu');
  dropdownMenu.classList.remove('show');
});
});
با این روش، وقتی موس روی آیتم منو میره، منوی دراپ‌ داون نمایش داده میشه و وقتی موس رو برداری، منو دوباره پنهان میشه.
این روش به خوبی کار می‌کنه و تو می‌تونی راحت تر از منوهای کشویی استفاده کنی
پاسخ: 1403/05/30
آخرین آپدیت: 1403/07/14