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>