<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .navbar{ height:50px; background: #e0e0e0; } .navbar-brand{ font-size: 1.5em; font-weight: bold; line-height: 50px; } a{ color:#000; text-decoration: none; } .navbar-toggle{ float:right; line-height:50px; border:1px solid #aaa; padding:8px; } .navbar-collapse{ background: #fff; margin: 0; display: none; } .icon-bar{ display: block;/*将行内块元素span表现成块级元素,使允许修改其尺寸*/ width: 22px; height: 2px; background: #888; border-radius: 1px; box-sizing: border-box; margin:5px 0px; } </style> </head> <body> <h1>仿写Bootstrap中的响应式导航条</h1> <div class="navbar"> <div class="navbar-header"> <a class="navbar-brand" href="#">TARENA</a> <a class="navbar-toggle" href="#"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> </div> <div class="navbar-collapse"> <ul class="navbar-nav"> <li><a href="#">组件</a></li> <li><a href="#">插件</a></li> <li><a href="#">JS</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </div> </div> <script src="js/jquery-1.11.3.js"></script> <script> $('.navbar-toggle').click(function(e){ e.preventDefault(); $(this).parent().siblings('.navbar-collapse').slideToggle(300); }); </script> </body> </html>
仿写Bootstrap中的响应式导航条
最新推荐文章于 2021-07-24 23:28:29 发布