快捷導(dǎo)航

Bootstrap導(dǎo)航條鼠標(biāo)懸停下拉菜單

更新時(shí)間：2017年01月04日 11:58:27 作者：東成熙就

這篇文章主要為大家詳細(xì)介紹了Bootstrap導(dǎo)航條鼠標(biāo)懸停下拉菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Bootstrap的導(dǎo)航條下拉菜單為了適應(yīng)移動(dòng)設(shè)備沒有鼠標(biāo)hover的狀態(tài)，都是點(diǎn)擊彈出下拉菜單，為了適應(yīng)一般網(wǎng)站使用，我稍作了一些修改，鼠標(biāo)hover時(shí)就彈出二級(jí)菜單。

效果圖：

CSS修改：

<style type="text/css"> 
 .navbar .nav > li .dropdown-menu { 
 margin: 0; 
 } 
 .navbar .nav > li:hover .dropdown-menu { 
 display: block; 
 } 
</style>

實(shí)例源碼：

<!DOCTYPE html> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 <title>Bootstrap導(dǎo)航條鼠標(biāo)懸停下拉菜單</title> 
 <link id="bootstrap_221" rel="stylesheet" type="text/css" class="library" > 
 <script id="jquery_172" type="text/javascript" class="library" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> 
 <script id="bootstrap_221" type="text/javascript" class="library" src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 <style type="text/css"> 
 .navbar .nav > li .dropdown-menu { 
 margin: 0; 
 } 
 .navbar .nav > li:hover .dropdown-menu { 
 display: block; 
 } 
 </style> 
</head> 
<body> 
 <div class="container"> 
 <div class="navbar"> 
 <div class="navbar-inner"> 
 <ul class="nav nav-pills"> 
  <li class="active"><a href="#">Home</a></li> 
  <li class="dropdown"><a href="#">SVN<span class="caret"></span></a> 
  <ul class="dropdown-menu"> 
  <li><a href="#">sub SVN1</a></li> 
  <li><a href="#">sub SVN2</a></li> 
  </ul> 
  </li> 
  <li><a href="#">iOS</a></li> 
  <li><a href="#">VB.Net</a></li> 
  <li class="dropdown"><a href="#">Java<span class="caret"></span></a> 
  <ul class="dropdown-menu"> 
  <li><a href="#">sub Java1</a></li> 
  <li><a href="#">sub Java2</a></li> 
  </ul> 
  </li> 
  <li><a href="#">PHP</a></li> 
 </ul> 
 </div> 
 </div> 
 </div> 
</body> 
</html>

Find it more from：http://runjs.cn/detail/k4ahmcgc

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript textarea光標(biāo)定位方法(兼容IE和FF)
主要是實(shí)現(xiàn)textarea中光標(biāo)的定位方法，考慮到多瀏覽器的兼容性，需要的朋友可以參考下。
2011-03-03
js常用系統(tǒng)函數(shù)用法實(shí)例分析
這篇文章主要介紹了js常用系統(tǒng)函數(shù)用法,實(shí)例分析了escape、parseInt、parseFloat、isNaN、isFinite等函數(shù)的用法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-01-01
js實(shí)現(xiàn)截圖保存圖片功能的代碼示例
本篇文章主要介紹了js實(shí)現(xiàn)截圖功能的代碼示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-02-02
BootStrap表單驗(yàn)證實(shí)例代碼
這篇文章主要介紹了bootstrap表單驗(yàn)證的實(shí)例代碼，代碼中包括引入的js文件，具體實(shí)現(xiàn)方法，大家參考本文
2017-01-01
實(shí)現(xiàn)在?Chrome?中執(zhí)行?JavaScript?代碼
這篇文章主要介紹了實(shí)現(xiàn)在?Chrome?中執(zhí)行?JavaScript?代碼，下面來(lái)介紹如何在?Chrome?中打開開發(fā)者工具，以及如何在開發(fā)者工具中運(yùn)行調(diào)試?JavaScript?代碼，具有一的的參考價(jià)值,需要的朋友可以參考一下
2022-03-03
Javascript中return的使用與閉包詳解
Javascript中return與閉包對(duì)大家來(lái)說(shuō)應(yīng)該都不陌生，下面本文就給大家介紹了Javascript中return的使用與閉包。文中給出了詳細(xì)的示例代碼，對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值，感興趣的朋友們下面來(lái)一起看看吧。
2017-01-01
微信小程序之拖拽排序（代碼分享）
本篇文章主要分享了微信小程序拖拽排序的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
使用PDFJS遇到的坑及解決辦法記錄
PDF.js是由Mozilla支持的基于HTML5的PDF查看器,可以在web上解析和呈現(xiàn)PDF文件,它支持內(nèi)容檢索、頁(yè)面跳轉(zhuǎn)、文件打印等功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-09-09
jQuery $.data()方法使用注意細(xì)節(jié)
前段時(shí)間同事在群里對(duì)jQuery里的.data()方法接下來(lái)介紹jQuery $.data()方法使用注意細(xì)節(jié),需要了解的朋友可以參考下
2012-12-12
JavaScript函數(shù)的特性與應(yīng)用實(shí)踐深入詳解
這篇文章主要介紹了JavaScript函數(shù)的特性與應(yīng)用實(shí)踐,結(jié)合實(shí)例形式較為深入的分析了javascript函數(shù)相關(guān)概念、特性、用法及操作注意事項(xiàng),需要的朋友可以參考下
2018-12-12