Bootstrop多級下拉選單

阿新 • • 發佈：2019-01-01

原地址找不到了，只為學習，如有侵權，盡情諒解

效果圖
- 需要引用bootstrap.min.css和bootstrap.min.css.js
- 程式碼如下

<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 的多級下拉選單示例</title>
    <link rel="stylesheet" href="~/Content/bootstrap.min.css" />
    <script type="text/javascript" src="~/Content/bootstrap.min.css.js" 
></script>
    <style type="text/css">
        .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;
            }

            .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;
                }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <h2>Bootstrap 3多級下拉選單</h2>
            <hr>
            <div class="dropdown">
                <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-default" data-target="#" href="javascript:;">
                    下拉多級選單 <span class="caret"></span>
                </a>
                <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
                    <li class="dropdown-submenu">
                        <a tabindex="-1" href="javascript:;">總經理</a>
                        <ul class="dropdown-menu">
                            <li><a tabindex="-1" href="javascript:;">經理1</a></li>
                            <li><a tabindex="-1" href="javascript:;">經理2</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-submenu">
                        <a tabindex="-1" href="javascript:;">研發部</a>
                        <ul class="dropdown-menu">
                            <li><a tabindex="-1" href="javascript:;">主管</a></li>
                            <li class="divider"></li>
                            <li class="dropdown-submenu">
                                <a href="javascript:;">員工</a>
                                <ul class="dropdown-menu">
                                    <li><a href="javascript:;">互&nbsp;&nbsp;&nbsp;&nbsp;評</a></li>
                                    <li><a href="javascript:;">不互評</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

第二個，除了字型圖示外未使用bootstrap

<ul class="nav">  
   <li>
      <a class="a-btn"><span id="deptBtn">123465789</span>
           <span class="glyphicon glyphicon-plus"></span>
       </a>
       <ul>
           <li><a class="a-btn">456421<span class="glyphicon glyphicon-plus"></span></a></li>
           <li><a class="a-btn">456421<span class="glyphicon glyphicon-plus"></span></a></li>
           <li><a class="a-btn">456421<span class="glyphicon glyphicon-plus"></span></a></li>
           <li><a class="a-btn">456421<span class="glyphicon glyphicon-plus"></span></a></li>
       </ul>
   </li>
</ul>

css程式碼

*{   
    padding: 0;   
    margin: 0;         
}   
ul{   
    list-style-type:none;   
}   
.triangle{   

    font-size: 1em;   
    color: white;    
}  
/*一級導航*/  
ul.nav{ 
    margin-left:30px; 
    border:1px solid gray; 
    border-radius: 4px;   
    position: fixed;   
}   
ul.nav li{   
    float: left;   
    width: 9em;   
    background-color:#428bca; 
    padding-left:0;
} 
ul.nav li:hover,
ul.nav li:focus,
ul.nav li:active,
ul.nav li.active
{
    color:#fff;
    background-color:#428bca;
    border-color:#285e8e
}  
.a-btn{  
    width:125px;
    display: block;   
    color: white;   
    line-height: 1.5em;   
    border-right: 1px solid white;   
    border-left: 1px solid white;   
    padding: 5px; 
    text-align: center;   
    font-weight: bold;  
    text-decoration : none;
    background:none;border:none;
    /*margin-left:-20px;*/
}   

ul.nav .a-btn:hover,   
ul.nav .a-btn:focus{   
    color: white;   
    background-color: #428bca;   
    opacity: 0.5;   
}   
ul.nav li:first-child .a-btn{   
    border-left: 0;   
    border-bottom: 0;   
}   
ul.nav li:last-child .a-btn{   
    border-right: 0;   
    border-bottom: 0;   
}   
/*二級導航*/  
ul.nav li ul{   
    width: 10em;           
    position: absolute;   
    left: -1000em;   
}   

ul.nav li:hover ul{   
    width: 10em;   
    left:auto;   
}   

ul.nav li ul .a-btn{   
    border-top: 1px solid white;   
    border-bottom: 1px solid white;   
    border-left: 0;   
    border-right: 0;   

}   
/*三級導航*/  
ul.nav li:hover ul li ul{   
    width: 10em;   
    position: absolute;   
    left: -1000em;   

}   

ul.nav li:hover ul li:hover ul{   
    left: auto;   
    margin-left: 9.1em;   
    margin-top: -2.1em;   
}   
ul.nav li:hover ul li:hover ul.nav1{   
    left: auto;   
    margin-left: -9.1em;   
    margin-top: -2.1em;   
}

Bootstrop多級下拉選單

原地址找不到了，只為學習，如有侵權，盡情諒解 - 需要引用bootstrap.min.css和bootstrap.min.css.js - 程式碼如下 <head> <meta charset="UTF-8">

JS--jQuery實現的多級下拉選單效果程式碼

這篇文章主要介紹了jQuery實現的多級下拉選單效果程式碼,涉及jquery滑鼠事件及頁面元素的顯示與隱藏效果實現技巧,非常具有實用價值,需要的朋友可以參考下: 本文例項講述了jQuery實現的多級下拉選單效果程式碼。供大家參考。具體如下：這是一款jQuery多級下拉選單，在支援html5

Excel多級下拉選單聯動自動匹配內容

4.一級下選單引用的是第一行的資料，我們對一級下拉選單進行定義。選中第一行的資料，點選選單欄中的【定義名稱】，在輸入區域名稱這裡輸入名稱，例如“首行”，然後點選確定。可以看到在名稱管理器裡多了一個名稱“首行”。

iOS 多級下拉選單

前言 App 常用控制元件 -- 多級下拉選單, 如團購類, 房屋類, 對資料進行篩選. 有一級, 二級, 三級, 再多就不會以這種樣式,呈現給使用者了. 作者就簡單聊一下多級下拉選單二級下拉篩選選單.png 一目標預設顯示一個 TableView,

bootstrap多級下拉選單

<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Bootstrap 3 的多級下拉選單示例</

Bootstrap 3的多級下拉選單示例

Bootstrap 雖好，但對於複雜的介面，還是有N多元件需要自己擴充套件，並且要往簡潔、大氣的Bootstrap介面上靠，著實要費一些功夫。下面分享一個Bootstrap 3的多級下拉選單，無需第三方Js指令碼，複製後直接可用。 <!DOCTYPE HTML>

Ajax動態訪問資料庫設計html多級select下拉選單的方法

getArea(0,$('<select>'));//呼叫方法，第一個引數是要查詢專案的id，根據資料庫來就好，第二個引數是一個select物件，可以是現有的，也可以生成一個新的在頁面重新

Bootstrap 下拉選單多級聯動

直接上乾貨 <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Bootstrap 3 的多級下拉選單示

EXCEL如何實現多級聯動下拉選單

首先來說一下我們要實現的效果，就是我們選擇1級選單後，2級選單裡就有對應1級選單的內容，我們選擇2級選單的項的時候，3級選單會產生對應2級選單項的內容，以此類推，來說一下我實現這種功能的原理，就是為不同的列的內容設定了名稱，而這個名稱恰好就是上一級選單裡的選擇項。這樣的情況下，在資料有效性中的函式讀取的其實

Bootstrap元件---下拉選單，多級選單 ,按鈕

下拉選單選單： ,dropdown（.dropup改變這個是上顯示） data-toggle="dropdown" (啟用文字處) .dropdown-menu .pull-left .pull-right 按鈕組：.btn

用jquery製作一個二級導航下拉選單

大體流程： 1使用$(function(){...})獲取到想要作用的HTML元素。 2通過使用children()方法尋找子元素。 &

多級下拉列表預設觸發下拉事件載入資料

jQuery.get("./getProvinceList",{},function(data){ console.log(); var list = data.data.list; var html = "<option value='0

純css製作導航下拉選單

轉載文章，覺得作者思路很好 <nav> <ul>

CSS實戰心得筆記——常用下拉選單

寫作目的花了一個月左右的時間，學完了HTML5和CSS的基礎知識，主要通過W3school、菜鳥教程和網易雲課堂的網課。學習過程中CSDN的很多部落格給了我幫助和啟發，效果要比生硬的教程好得多。因此，開始實戰練習的過程中，把每個案例的實現及其思路記錄在這裡，作為總結。常用下拉選單

JavaWeb專案練習--支付模組、後臺部分模組（手風琴下拉選單、上傳技術）

易寶支付線上支付的兩種形式： 1. 電商與銀行直連！安全不收手續費不與小電商合作！ 2. 第三臺支付平臺支付寶易寶財富通好處：不安全收手續費（1%）小電商可以與其合作！需要在第三方註冊賬戶需要認證！我

經典的 div + css 滑鼠 hover 下拉選單

經典的 div + css 滑鼠 hover 下拉選單效果圖：原始碼： <html> <head> <meta charset="utf-8"> <style type="text/css"> nav {

用position來寫導航的下拉選單

今天來用position來寫下拉選單，話不多說，直接上程式碼， <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo

CSS的下拉選單被擋住，修改Z-INDEX也不成功

CSS的下拉選單被擋住，修改Z-INDEX也不成功做了一個滑鼠放上去就出現的下拉選單，但是這個下拉的內容被擋住了。 Z-INDEX 是設定不同塊的層次的，我修改了問題還是有。後來發現是必須要把該便籤的父標籤的 position 屬性設定為 absolute 具體原

js獲取selece下拉選單選中的值

第一種方式(原生js) var obj = document.getElementByIdx_x(”testSelect”); //定位id var index = obj.selectedIndex; // 選中索引 var text = obj.options[index].text;

小程式：下拉選單

1. wxml部分  <view class="page">  <view class="nav">  &l

Bootstrop多級下拉選單

相關推薦