Bootstrap~多級導航(級聯(lián)導航)的實現(xiàn)效果【附代碼】
在bootstrap官方來說，導航最多就是兩級，兩級以上是無法實現(xiàn)的，大叔找了一些第三方的資料，終于找到一個不錯的插件，使用上和效果上都還不錯，現(xiàn)在和大家分享一下
插件地址：http://vsn4ik.github.io/bootstrap-submenu/
先看一下，在大叔后臺系統(tǒng)上的顯示效果
下面說一下實現(xiàn)的方式
１ 引用三個JS插件和一個CSS類庫
<script src="~/Content/bootstraps/JS/bootstrap-submenu.js"></script>
<script src="~/Content/bootstraps/JS/highlight.min.js"></script>
<script src="~/Content/bootstraps/JS/docs.js"></script>
<link href="~/Content/bootstraps/CSS/bootstrap-submenu.css" rel="stylesheet" />
２ 插入對應(yīng)的HTML代碼塊,本例子沒有使用遞歸生成代碼，使用了靜態(tài)的三級結(jié)構(gòu)，這樣看著更清晰，真正的生產(chǎn)環(huán)境建議使用遞歸去生產(chǎn)菜單
<ul class="nav nav-pills">
@foreach (var item in Model)
{
if (item.Sons != null && item.Sons.Count > 0)
{
<li class="dropdown">
<a data-submenu="" data-toggle="dropdown" tabindex="0">@item.MenuName<span class="caret"></span></a>
<ul class="dropdown-menu">
@foreach (var sub in item.Sons)
{
if (sub.Sons != null && item.Sons.Count > 0)
{
<li class="dropdown-submenu">
<a tabindex="0">@sub.MenuName</a>
<ul class="dropdown-menu">
@foreach (var inner in sub.Sons)
{
<li>
<a href="@inner.LinkUrl">@inner.MenuName</a>
</li>
}
</ul>
</li>
<li class="divider"></li>
}
else
{
<li><a href="@sub.LinkUrl">@sub.MenuName</a></li>
}
}
</ul>
</li>
}
else
{
<li><a href="@item.LinkUrl">@item.MenuName</a></li>
}
}
</ul>
最后的效果就是第一個圖了，值得注意的是，如果希望每個菜單之間使用分割線，可以添加 <li class="divider"></li>這行代碼。
感謝各位的閱讀！文章來源 張占嶺
相關(guān)文章
使用javascript實現(xiàn)頁面定時跳轉(zhuǎn)總結(jié)篇
下面對使用JavaScript實現(xiàn)頁面定時跳轉(zhuǎn)做一下總結(jié)，各種定時跳轉(zhuǎn)代碼記錄如下，希望對大家有所幫助2013-09-09
這篇文章主要介紹了JavaScript的回調(diào)函數(shù)，幫助大家正確理解和使用 JavaScript中的回調(diào)函數(shù)，感興趣的小伙伴們可以參考一下2015-11-11
js對象實例詳解(JavaScript對象深度剖析,深度理解js對象)
下面小編就為大家?guī)硪黄猨s對象實例詳解(JavaScript對象深度剖析,深度理解js對象)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
在前端項目中,常用的?JavaScript?處理數(shù)據(jù)的方法有很多,本文為大家整理了一些常用的方法,感興趣的小伙伴可以跟隨小編一起學習一下2024-11-11
本文主要介紹了js實現(xiàn)簡單手風琴效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
最近在使用layui前端框架,在使用單選按鈕、下拉菜單select、checkbox等控件的時候,往往遇到一些初始化的東西,下面這篇文章主要給大家介紹了關(guān)于layui動態(tài)設(shè)置單選按鈕選中效果的相關(guān)資料,需要的朋友可以參考下2023-06-06
今天小編就為大家分享一篇關(guān)于Javascript讀寫cookie的實例源碼，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-03-03
注意一下：在chrome瀏覽器下，為了數(shù)據(jù)安全，隱藏的input：file不能trigger “click” 事件。 所以要設(shè)置input：file的透明度達到隱藏的效果2013-11-11
這篇文章主要為大家詳細介紹了javascript實現(xiàn)點擊小圖顯示大圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了詳解JavaScript之Array.reduce源碼解讀，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11