导航栏、菜单栏

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>

猜你喜欢