完整的代码放在 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 。
参考资料：