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="#">首页</a></li> 9 <li><a href="#">商品</a></li> 10 <li><a href="#">博客</a></li> 11 <li><a href="#">服务</a></li> 12 <li><a href="#">联系我们</a></li> 13 <li><a href="#">关于我们</a></li> 14 <li><a href="#">评论</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>