用到了boostrap导航条组件,但并不使用其默认的样式,便于修改。
响应式导航条效果:
代码:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet"> <style> .main-navigation{ text-align: center; background: #ffffff; border-top: 1px solid #ebebeb; border-bottom: 3px solid #e1e1e1; margin-bottom: 35px; } .main-navigation .menu{ margin: 0; padding: 0; } .menu li{ list-style: none; display: inline-block; } .menu li a{ display: block; text-decoration: none; outline:none; color: #505050; line-height: 4em; padding: 0 21px; } .menu .active{ border-bottom: 3px solid #e67e22; margin-bottom: -2px; } .menu li a:hover{ color:#e67e22; } .logo img{ width: 200px; height: 56px; margin-right: -60px; margin-top: -10px; } .navbar-header span{ font-size: 1.5em; line-height: 56px; height: 56px; } #mynav{ float:left; } </style> </head> <body> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> //jQuery改变鼠标样式 $(function(){ $('.menu li a').hover(function(){ $(this).addClass('active'); },function(){ $(this).removeClass('active'); } ); }); </script> <nav class="main-navigation"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="navbar-header"> <a href="#" class="logo"> <img src="img/logo.jpg"> </a> <span>XXXX</span> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="mynav"> <ul class="menu"> <li class="active"><a href="#" > 首页</a></li> <li><a href="#"> 菜单1</a></li> <li><a href="#"> 菜单2</a></li> <li><a href="#"> 菜单3</a></li> <li><a href="#"> 菜单4</a></li> </ul> </div> </div> </div> </div> </nav> </body> </html>