Bootstrap 3多級(jí)下拉菜單實(shí)例
Bootstrap 雖好,但對(duì)于復(fù)雜的界面,還是有N多組件需要自己擴(kuò)展,并且要往簡(jiǎn)潔、大氣的Bootstrap界面上靠,著實(shí)要費(fèi)一些功夫。下面分享一個(gè)Bootstrap 3的多級(jí)下拉菜單,無(wú)需第三方Js腳本,復(fù)制后直接可用。
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Bootstrap 3 的多級(jí)下拉菜單示例</title> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <link rel="stylesheet" /> <script type="text/javascript" src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.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多級(jí)下拉菜單</h2> <hr> <div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="javascript:;"> 下拉多級(jí)菜單 <span class="caret"></span> </a> <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> <li><a href="javascript:;">一級(jí)菜單</a></li> <li><a href="javascript:;">一級(jí)菜單</a></li> <li class="divider"></li> <li class="dropdown-submenu"> <a tabindex="-1" href="javascript:;">一級(jí)菜單</a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="javascript:;">二級(jí)菜單</a></li> <li class="divider"></li> <li class="dropdown-submenu"> <a href="javascript:;">二級(jí)菜單</a> <ul class="dropdown-menu"> <li><a href="javascript:;">三級(jí)菜單</a></li> </ul> </li> </ul> </li> </ul> </div> </div> </div> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Bootstrap每天必學(xué)之下拉菜單
- Bootstrap每天必學(xué)之級(jí)聯(lián)下拉菜單
- Bootstrap 中下拉菜單修改成鼠標(biāo)懸停直接顯示
- Bootstrap中的Dropdown下拉菜單更改為懸停(hover)觸發(fā)
- Bootstrap導(dǎo)航條可點(diǎn)擊和鼠標(biāo)懸停顯示下拉菜單
- Bootstrap實(shí)現(xiàn)下拉菜單效果
- BootStrap日期控件在模態(tài)框中選擇時(shí)間下拉菜單無(wú)效的原因及解決辦法(火狐下不能點(diǎn)擊)
- Bootstrap3多級(jí)下拉菜單
- JS組件Bootstrap實(shí)現(xiàn)下拉菜單效果代碼
- Bootstrap按鈕下拉菜單組件詳解
相關(guān)文章
webpack學(xué)習(xí)教程之前端性能優(yōu)化總結(jié)
webpack是近期最火的一款模塊加載器兼打包工具,它能把各種資源,例如JS(含JSX)、coffee、樣式(含less/sass)、圖片等都作為模塊來(lái)使用和處理。這篇文章主要給大家總結(jié)介紹了關(guān)于webpack學(xué)習(xí)教程之前端性能優(yōu)化的相關(guān)資料,需要的朋友可以參考下。2017-12-12理解與使用JavaScript中的回調(diào)函數(shù)
這篇文章主要介紹了JavaScript中的回調(diào)函數(shù),想詳細(xì)了解回調(diào)函數(shù)的同學(xué),一定要看一下2021-04-04移動(dòng)端觸摸滑動(dòng)插件swiper使用方法詳解
這篇文章主要為大家詳細(xì)介紹了移動(dòng)端觸摸滑動(dòng)插件swiper的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08JS生態(tài)系統(tǒng)加速探索Draft-js?emoji插件功能及使用探索
這篇文章主要介紹了JS生態(tài)系統(tǒng)加速探索Draft-js?emoji插件功能使用探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01webpack開(kāi)發(fā)跨域問(wèn)題解決辦法
本篇文章主要介紹了webpack開(kāi)發(fā)跨域問(wèn)題解決辦法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08JavaScript實(shí)現(xiàn)99乘法表及隔行變色實(shí)例代碼
最近做了個(gè)項(xiàng)目是要求實(shí)現(xiàn)99乘法表隔行變色,本文給大家分享通過(guò)多種方式實(shí)現(xiàn)js 99 乘法表,感興趣的朋友一起看看吧2016-02-02為什么JavaScript中0.1 + 0.2 != 0.3
這篇文章主要給大家介紹了關(guān)于為什么JavaScript中0.1 + 0.2 != 0.3的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12微信小程序小組件 基于Canvas實(shí)現(xiàn)直播點(diǎn)贊氣泡效果
這篇文章主要為大家詳細(xì)介紹了微信小程序小組件,基于Canvas實(shí)現(xiàn)直播點(diǎn)贊氣泡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02