Bootstrap 在預設中最多只有二個層級，對於架構比較大型專案中比較不能滿足。
使用 Bootstrp 框架也段時間了，久久一段時間下來都覺得只能將 Nav 做到二級，實在是真的有點弱，其實中心對網頁設計還是有很多問號，但也這些問題看到自已的不足，也在一次的機緣中決定要將 Nav 處理到可多級，符合較大型的專案開發，期中光是 CSS 的架構處理起來不只多，而產生的問題自然也就多，還好發現原來可以用 jQuery-bootstrap-submenu來處理，雖然純 CSS 的問題都處理到定位了，但還是用現成的套件比較快速，不過原理還是要好好的記清楚，這對之後的版型與功能開發自然可以更快速調整了。
1-Bootstrap 純 CSS 的三級nav-hover選單
Multi level dropdown menu in Bootstrap 3 是直接使用 CSS 彈出來的滑入選單，在行動裝置來說 Hover 行為也是點按的一個步驟，在點按 a 標籤的感應也是有作用的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | .dropdown-submenu { position: relative; } .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } @media (min-width:768px) { .dropdown-submenu:hover>.dropdown-menu { display: block; } } .dropdown-submenu>a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover>a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <div class="container"> <div class="row"> <h2>Multi level dropdown menu in Bootstrap 3</h2> <hr> <div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> <li><a href="#">Some action</a></li> <li><a href="#">Some other action</a></li> <li class="divider"></li> <li class="dropdown-submenu"> <a tabindex="-1" href="#">Hover me for more options</a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">Second level</a></li> <li class="dropdown-submenu"> <a href="#">Even More..</a> <ul class="dropdown-menu"> <li><a href="#">3rd level</a></li> <li><a href="#">3rd level</a></li> </ul> </li> <li><a href="#">Second level</a></li> <li><a href="#">Second level</a></li> </ul> </li> </ul> </div> </div> </div> |
jQuery 版本：jquery-1.11.0
See the Pen Bootstrap 純 CSS 的三級nav-hover選單 by Jimmy_Wu (@Jimmy_Wu) on CodePen.light
在安卓手機上發現到 BUG ，點次次選單要展開後不只沒有展開，而是連次選單都快速收起，而 IOS 系統完全沒有這方面的問題，測了一下主要是 css hover .dropdown-submenu:hover>.dropdown-menu 所影響，在 Bootstrap 中有開合 nav (漢寶圖)是在 @media (min-width:768px) 做分界，在行動裝置的樣式中 display: block; 是要空值才會使 hover 沒作用，之後可以使用 jQuery 的 .click() 事件來控制，在專案除錯老實說也懶了…滿怕在處理 JS 的過程又發生不可控制的問題，也因此轉向找套件來處理。
2-bootstrap-submenu-jQuery-Plugin
1 2 | https://cdnjs.cloudflare.com/ajax/libs/bootstrap-submenu/2.0.4/js/bootstrap-submenu.min.js https://cdnjs.cloudflare.com/ajax/libs/bootstrap-submenu/2.0.4/css/bootstrap-submenu.css |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <ul class="nav navbar-nav"> <li><a href="#">連結</a></li> <li><a href="#">連結</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-submenu>下拉選單 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">第二層連結</a></li> <li class="dropdown-submenu"> <a href="#">第二層連結有子選單</a> <ul class="dropdown-menu"> <li><a href="#">第三層連結</a></li> <li><a href="#">第三層連結</a></li> <li class="dropdown-submenu"> <a href="#">第三層連結有子選單</a> <ul class="dropdown-menu"> <li><a href="#">第四層連結</a></li> <li class="dropdown-submenu"> <a href="#">第四層連結有子選單</a> <ul class="dropdown-menu"> <li><a href="#">第五層連結</a></li> <li><a href="#">第五層連結</a></li> <li><a href="#">第五層連結</a></li> <li role="separator" class="divider"></li> <li><a href="#">第五層連結</a></li> <li role="separator" class="divider"></li> <li><a href="#">第五層連結</a></li> </ul> </li> <li><a href="#">第四層連結</a></li> <li role="separator" class="divider"></li> <li><a href="#">第四層連結</a></li> <li role="separator" class="divider"></li> <li><a href="#">第四層連結</a></li> </ul> </li> <li role="separator" class="divider"></li> <li><a href="#">第三層連結</a></li> <li role="separator" class="divider"></li> <li><a href="#">第三層連結</a></li> </ul> </li> <li><a href="#">第二層連結</a></li> <li role="separator" class="divider"></li> <li><a href="#">第二層連結</a></li> <li role="separator" class="divider"></li> <li><a href="#">第二層連結</a></li> </ul> </li> </ul> |
1 2 3 | $(function() { $('[data-submenu]').submenupicker(); }); |
See the Pen Bootstrap-submenu-多層開合(下拉)選單 by Jimmy_Wu (@Jimmy_Wu) on CodePen.light
在第一層下拉選單的 <a> 標籤加上 data-submenu，有子選單的 <li> 標籤加上 class="dropdown-submenu"
.dropdown-submenu 在點按後會變成 .dropdown-submenu.open，確定 .open>.dropdown-menu (比較上方純 CSS .dropdown-submenu:hover>.dropdown-menu) 內所有的層疊樣式，在 Bootstrap 裡的 .open>.dropdown-menu display: block; 會於 block 與空值間切換，這樣就可以換成除錯，另外在 jQuery 也可以寫 if 的系統判斷式，讓行動裝直帶有 data-submenu 這樣就算是安卓系統用到像 Bootstrp nav 大於 @media (min-width:768px) 的 CSS hover 也不怕出現點按的問題。
資料來源：
Multi level dropdown menu in Bootstrap 3
讓你的Bootstrap下拉選單可以支援多層選單
github-bootstrap-submenu
Comments are closed.