1.进入 https://github.com/VPenkov/okayNav 下载源代码
2.添加导航栏主体代码
1 <header id="header"> 2 <a class="site-logo" href="#"> 3 Logo 4 </a> 5 6 <nav role="navigation" id="nav-main" class="okayNav"> 7 <ul> 8 <li><a href="#">Home</a></li> 9 <li><a href="#">Shop</a></li> 10 <li><a href="#">Blog</a></li> 11 <li><a href="#">Services</a></li> 12 <li><a href="#">Contacts</a></li> 13 <li><a href="#">About us</a></li> 14 <li><a href="#">Testimonials</a></li> 15 </ul> 16 </nav> 17 </header><!-- /header -->
3.引入两个css样式
1 <link rel="stylesheet" href="css/common.min.css"> 2 <link rel="stylesheet" href="css/okayNav.min.css">
4.引入两个JS样式
1 <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 2 <script src="js/jquery.okayNav-min.js"></script
5.添加一段初始化代码
1 <script type="text/javascript"> 2 var navigation = $('#nav-main').okayNav(); 3 </script>
6.完整代码如下：
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>导航菜单</title> 5 <!--css样式--> 6 <link rel="stylesheet" href="css/common.min.css"> 7 <link rel="stylesheet" href="css/okayNav.min.css"> 8 </head> 9 <body> 10 11 <header id="header"> 12 <a class="site-logo" href="#"> 13 Study 14 </a> 15 16 <nav role="navigation" id="nav-main" class="okayNav"> 17 <ul> 18 <li><a href="#">主页</a></li> 19 <li><a href="#">小学</a></li> 20 <li><a href="#">初中</a></li> 21 <li><a href="#">高中</a></li> 22 <li><a href="#">大学</a></li> 23 </ul> 24 </nav> 25 </header> 26 <!-- js样式--> 27 <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 28 <script src="js/jquery.okayNav-min.js"></script> 29 <script type="text/javascript"> 30 var navigation = $('#nav-main').okayNav(); //关键代码 31 </script> 32 </body> 33 </html>