您的位置:首页 > Web前端 > JQuery

jquery二级菜单动画效果的实现代码

2013-10-02 09:53 891 查看
jquery二级菜单,有动画显示效果。

例子:

 

复制代码[/u]代码示例:
<div class="menu">

<ul class="nav">

<li style=" padding-left:20px;"><a href="index.aspx"   >首   页</a></li>

<li><a href="imglist.aspx?id=123"  >11111111</a></li>

<li><a href="list.aspx?id=217" >22222</a></li>

<li><a href="list.aspx?id=301" >3333333</a></li>

<li class="li" id="menu1"><a href="fenlei.aspx?id=2">部门导航</a>

       <ul class="nav2">

        <li><a target=_blank href="fenlei.aspx?id=2">单位</a></li>

        <li><a target=_blank href="fenlei.aspx?id=4" >单位2</a></li>

        <li><a target=_blank href="fenlei.aspx?id=3" >单位3</a></li>

        <li><a target=_blank href="fenlei.aspx?id=1" >单位4</a></li>

        </ul>

</li>

<li><a href="list.aspx?id=296"   >999</a></li>

<li class="menumain"><a href="liuyan.aspx"   >555</a></li>

</ul>

</div>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  

        <script type="text/javascript" language="javascript">

            $(document).ready(function () {

                $(".li").each(function () {

                    $(this).mouseover(function () {

                        $(this).children(".nav2").slideDown("1500");//.css("display", "block");

                    })

                    $(this).mouseleave(function () {

                        $(this).children(".nav2").slideUp("1500");//.css("display", "none");

                    })

                });

            });  

    </script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: