Bootstrap導航條鼠標懸停下拉菜單

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

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

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

效果圖：

CSS修改：

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

實例源碼：

<!DOCTYPE html> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 <title>Bootstrap導航條鼠標懸停下拉菜單</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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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