Bootstrap Mega Menu

2024年5月21日 170次阅读 来源: IMDZ

完整的代码放在 jsFiddle Bootstrap Mega Menu 。

我们管 Mega Menu 叫做“大菜单”吧，“巨”、“超级”啥的，不足以彰显我们的草根贵气。

有道词典：

Mega Menu: 大数据量网页菜单；超级菜单式；巨型菜单；超级菜单。

基于Bootstrap Dropdown，实现一个大菜单，有三个问题要解决：

菜单容器的样式

复用 Yamm!3 的关键样式。

/** Copy from Yamm!3 http://geedmo.github.io/yamm3/ */
.mega .nav,
.mega .collapse,
.mega .dropup,
.mega .dropdown {
  position: static;
}

.mega .container {
  position: relative;
}

.mega .dropdown-menu {
  left: auto;
}

.mega .mega-content {
  padding: 20px 30px;
}

.mega .dropdown.mega-fw .dropdown-menu {
  left: 0;
  right: 0;
}

鼠标事件

Bootstrap Dropdown 组件通过点击打开菜单，不符合大菜单场景，需要修改成，鼠标移入时打开菜单，鼠标移出时关闭菜单。

  1. 鼠标移入时，显示菜单。
  2. 鼠标移出时，隐藏菜单。
  3. 鼠标点击菜单中的链接时，隐藏菜单。
$(function() {
  $('body')
    .on("mouseenter", "li.dropdown", function() {
      !$('li.dropdown').hasClass('hover') && $(this).addClass('hover');
    })
    .on("mouseleave", "li.dropdown", function() {
      $('li.dropdown').hasClass('hover') && $(this).removeClass('hover');
    })
    .on("click", "a.menu-link", function() {
      var $this = $(this);
      setTimeout(function() {
        $this.closest('li.dropdown').removeClass('hover');
      }, 100);
    });
});

自适应屏幕宽度

当屏幕尺寸小于768像素时，菜单会自动折叠，恢复Bootstrap默认行为，通过点击来打开菜单。

有个取巧的方法，我们使用一个只在屏幕大于768像素时生效的.hover类，这样一来，屏幕超过768像素，菜单是通过鼠标进入打开，而屏幕小于768像素时，使用Bootstrap Dropdown的默认行为，即通过点击来打开和关闭菜单。

@media (min-width: 768px) {
  /* disable dropping down on mouse click */
  ul.nav li.open > ul.dropdown-menu {
    display: none;
  }
  /* enable dropping down on mouse hover */
  ul.nav li.dropdown.hover > ul.dropdown-menu {
    display: block;
  }
  /* changing caret pointing direction on hover */
  .nav .dropdown.hover .caret {
    border-top: none;
    border-bottom: 4px dashed;
  }
}

完整的代码放在jsFiddle Bootstrap Mega Menu 。

参考资料：

    原文作者：IMDZ
    原文地址: https://segmentfault.com/a/1190000011761026
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞