日期:2014-05-16  浏览次数:20378 次

jquery插件学习之二——N级导航栏
先上图:


调用方法:

 <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 <script src="jquery.simpleNavigation.js"></script>
 <link href="simpleNavigation.css" rel="stylesheet" />
 <script>
$(document).ready(function() {
$("#div").simpleNavigation();
}) 
 </script>


html结构:

     <div id="div" class="simpleNavigation">
         <div class="menu">
             <ul>
                 <li><a href="#sub01">主页</a></li>
                    <li><a href="#sub02">公司介绍</a></li>
                    <li><a href="#sub03">获得荣誉</a></li>
                    <li><a href="#sub04">联系我们</a></li>
                </ul>
            </div>
            <!--一级子菜单-->
            <div class="sub1">
             <ul id="sub01">
                 <li><a href="#sub0101">主页1</a></li>
                    <li><a href="#sub0102">主页2</a></li>
                    <li><a href="#">主页3</a></li>
                </ul>
                <ul id="sub02">
                 <li><a href="#sub0201">公司介绍1</a></li>
                    <li><a href="#">公司介绍2</a></li>
                    <li><a href="#sub0203">介绍3</a></li>
                </ul>
                <ul id="sub03">
                 <li><a href="#">荣誉1</a></li>
                &