Bootstrap Mega Menu

booster 发布于2019-08-21 17:19 / 736人阅读

摘要：完整的代码放在。鼠标事件组件通过点击打开菜单，不符合大菜单场景，需要修改成，鼠标移入时打开菜单，鼠标移出时关闭菜单。鼠标移入时，显示菜单。自适应屏幕宽度当屏幕尺寸小于像素时，菜单会自动折叠，恢复默认行为，通过点击来打开菜单。

完整的代码放在 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 组件通过点击打开菜单，不符合大菜单场景，需要修改成，鼠标移入时打开菜单，鼠标移出时关闭菜单。

鼠标移入时，显示菜单。

鼠标移出时，隐藏菜单。

鼠标点击菜单中的链接时，隐藏菜单。

$(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 。

参考资料：

Immediately-Invoked-Function-Expression vs. Self-Executing Anonymous Function

Closures explained with JavaScript

Mouse Over vs. Mouse Enter

服务器托管云服务器 Mega mega 云存储 mega云存储 Menu

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89381.html

Bootstrap 之 Metronic 模板的学习之路 - （1）总览

摘要：写在前面的模板非常多，上有着各种各样的免费及付费模板。概述是一个基于设计的自适应多用途的管理后台模板。下一篇之模板的学习之路源码分析之部分写在前面 bootstrap 的模板非常多，Envato 上有着各种各样的免费及付费模板。Metronic 是我最喜欢的模板之一（看一眼就喜欢上的那种），当前售价 $28 ，觉得赞的，不妨支持一下作者。觉得贵的，想必不用我说，你也会找到途径。:b ...

stackfing 2019-08-29 11:08 评论0 收藏0
Bootstrap 之 Metronic 模板的学习之路 - （1）总览

摘要：写在前面的模板非常多，上有着各种各样的免费及付费模板。概述是一个基于设计的自适应多用途的管理后台模板。下一篇之模板的学习之路源码分析之部分写在前面 bootstrap 的模板非常多，Envato 上有着各种各样的免费及付费模板。Metronic 是我最喜欢的模板之一（看一眼就喜欢上的那种），当前售价 $28 ，觉得赞的，不妨支持一下作者。觉得贵的，想必不用我说，你也会找到途径。:b ...

zhangxiangliang 2019-08-05 10:04 评论0 收藏0
认识一下 Material Design Lite 容器组件。

摘要：可选在手机环境下隐藏该单元格。这是单元格的默认值在垂直方向单元格顶部对齐。使用样式类将外层元素声明为卡片组件，使用等样式类将内层元素声明为标题媒体动作等容器卡片组件默认为宽，最小高，是一个主轴为竖向的容器。一、单行页脚/Mini footerMDL的单行页脚/Mini footer组件以单行水平方式组织所有的信息： showImg(https://segmentfault.com/i...

Astrian 2019-08-02 18:17 评论0 收藏0
认识一下 Material Design Lite 的容器组件。

摘要：可选在手机环境下隐藏该单元格。这是单元格的默认值在垂直方向单元格顶部对齐。使用样式类将外层元素声明为卡片组件，使用等样式类将内层元素声明为标题媒体动作等容器卡片组件默认为宽，最小高，是一个主轴为竖向的容器。一、单行页脚/Mini footer MDL的单行页脚/Mini footer组件以单行水平方式组织所有的信息： showImg(https://segmentfault.com/...

stormzhang 2019-08-02 18:17 评论0 收藏0
【面向对象的PHP】之模式：工厂方法

摘要：工厂方法模式面向对象的设计强调抽象类高于实践，尽可能的将代码设计的一般化，而非特殊化也就是降低耦合，提升标准性。于是，前辈们便设计了特定类处理实例化的工厂方法。实现这个时候我们引入工厂方法模式，设置类创造者，类产品，。面向对象设计模式目录工厂方法模式面向对象的设计强调抽象类高于实践，尽可能的将代码设计的一般化，而非特殊化——也就是降低耦合，提升标准性。于是，前辈们便设计了特定类处理...

xingpingz 2019-06-27 15:47 评论0 收藏0