首页 > bootstrap> 详细内容
bootstrap导航栏鼠标滑过显示下拉菜单
日期:2018-11-28 

bootstrap默认是鼠标点击才显示二级下拉菜单,这个和我们的习惯不符,所以改进一下,加个javascript函数,让鼠标划过就自动显示下拉菜单

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="">
    <meta name="keywords" content="">

    <title>Theme Template for Bootstrap</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="js/ie-emulation-modes-warning.js"></script>
<script src="js/ie10-viewport-bug-workaround.js"></script>
    <!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
   <script src="js/jquery.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
/*导航栏*/
.navbar-default {
  background-color: rgb(0, 104, 183);
  border-color: rgb(0, 104, 183); 
  margin: 0px auto; max-width: 1070px;/*导航栏固定宽度*/
  margin-bottom:15px;
}
.navbar-default .navbar-brand {
  color: #ffffff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ffffff;
}
.navbar-default .navbar-text {
  color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
  color: #ffffff;font-size: 16px; font-family:"宋体"
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffffff;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
  background-color: rgb(0, 104, 183);
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
  background: none;  color: rgb(255, 255, 255); line-height: 2; font-size: 14px;font-family:"宋体"
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
  color:#CCCCCC;
  background-color: rgb(0, 104, 183);
}
.navbar-default .navbar-nav > li > .dropdown-menu > li.divider {
  background-color: rgb(0, 104, 183);
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #ffffff;
  background-color: rgb(0, 104, 183);
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #ffffff;
  background-color: rgb(0, 104, 183);
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #ffffff;
  background-color: rgb(0, 104, 183);
}
.navbar-default .navbar-toggle {
  border-color: #ffffff;/*三横线边框颜色*/
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: rgb(0, 104, 183);
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ffffff;/*三横线颜色*/
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  /*border-color:  #ffffff;*/

}
.navbar-default .navbar-link {
  color: #ffffff;
}
.navbar-default .navbar-link:hover {
  color: #ffffff;
}
.dropdown-menu {
  border: 0px solid #ccc;
  border: 0px solid rgba(0, 0, 0, .15);
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: rgb(0, 104, 183);/*搜索框边框*/
}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: rgb(0, 104, 183);
  }
  
}
/*导航栏结束*/
</style>

  </head>
  <body>
  <br>
      <NAV class="navbar navbar-static-top navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display --> 
<DIV class="container">

<DIV class="navbar-header">

<BUTTON class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#menu_nav">
<SPAN class="sr-only">Toggle navigation</SPAN> 
<SPAN class="icon-bar"></SPAN>
<SPAN class="icon-bar"></SPAN>
<SPAN class="icon-bar"></SPAN>
</BUTTON> 

</DIV><!-- Collect the nav links, forms, and other content for toggling --> 



<DIV id="menu_nav" class="collapse navbar-collapse">
<UL class="nav navbar-nav" >
  <LI><A class="menu1" href="index.php" target="">首页</A></LI>
  <LI><A href="view/list.php?classid=1">网站优化</a></LI>
<LI class="dropdown"><A id="xlnenu1" class="dropdown-toggle" role="button"  href="view/list.php?classid=2">网页技术<SPAN class="caret"></SPAN></a><ul class="dropdown-menu"><li><a href="view/list.php?classid=5">asp技术</a></li><li><a href="view/list.php?classid=6">css技术</a></li><li><a href="view/list.php?classid=11">php技术</a></li></ul></LI>
<LI><A href="view/list.php?classid=3">sql语句</a></LI>
<LI><A href="view/list.php?classid=4">网络技术</a></LI>
 
  
  </UL></DIV><!-- /.navbar-collapse --> 
  
</DIV><!-- /.container-fluid --> 
</NAV>
      
<SCRIPT type="text/javascript">
var isMobile = /applewebkit.*mobile.*/.test(window.navigator.userAgent.toLowerCase());
if (isMobile){
for(i=1;i<=1;i++){  
document.getElementById('xlnenu'+i).setAttribute('data-toggle', 'dropdown');
}
}
if (!isMobile){
$(function () {
    $(".dropdown").mouseover(function () {
        $(this).addClass("open");
    });

    $(".dropdown").mouseleave(function(){
        $(this).removeClass("open");
    })

})

}
</script>
 
  
  
  </body>
</html>