jquery插件学习之二——N级导航栏

sliwey 2014-01-08 10:49:43

先上图：

调用方法：



 <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>

                    <li><a href="#">荣誉2</a></li>

                </ul>

                <ul id="sub04">

                	<li><a href="#">联系1</a></li>

                </ul>

            </div>

            <!--二级子菜单-->

            <div class="sub2">

            	<ul id="sub0101">

                	<li><a href="#sub010101">主页11</a></li>

                    <li><a href="#sub010102">主页11</a></li>

                    <li><a href="#">主页11</a></li>

                    <li><a href="#">主页11</a></li>

                </ul>

                <ul id="sub0102">

                	<li><a href="#">主页12</a></li>

                    <li><a href="#sub010202">主页12</a></li>

                    <li><a href="#">主页12</a></li>

                </ul>

                <ul id="sub0201">

                	<li><a href="#">公司介绍1</a></li>

                    <li><a href="#">公司介绍1</a></li>

                </ul>

                <ul id="sub0203">

                	<li><a href="#">公司介绍3</a></li>

                    <li><a href="#">公司介绍3</a></li>

                </ul>

            </div>

             <!--三级子菜单-->

            <div class="sub3">

            	<ul id="sub010101">

                	<li><a href="#">主页111</a></li>

                    <li><a href="#">主页111</a></li>

                    <li><a href="#">主页111</a></li>

                    <li><a href="#">主页111</a></li>

                </ul>

                <ul id="sub010102">

                	<li><a href="#">主页112</a></li>

                    <li><a href="#">主页112</a></li>

                    <li><a href="#">主页112</a></li>

                </ul>

                <ul id="sub010202">

                	<li><a href="#">主页122</a></li>

                    <li><a href="#">主页122</a></li>

                    <li><a href="#">主页122</a></li>

                </ul>

            </div>

        </div>