Bootstrap Mega Menu

IMDZ發表於2017-10-28
boot

完整的程式碼放在 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 。

參考資料：

相關文章