导航菜单特效-二级导航菜单 

<!DOCTYPE html>
<html>
    <head>
        <title>二级导航菜单</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script src="jquery.js"></script>
        <script type="text/javascript">
            //使用jquery的加载回调函数开始定义菜单的功能
            $(function(){
                var menus = $('.menu a');        //得到菜单下所有的链接
                for(var i=0;i<menus.length;i++){//遍历这些链接
                    var m = menus[i];            //得到当前的链接
                    $(m).mouseover(function(){    //为菜单链接定义onmouover事件
                        //得到当前鼠标移入的菜单项的下标
                        var index = $('.menu a').index(this);
                        $('.sub_menu').hide();    //把所有的二级菜单隐藏
                        $('.sub_menu').eq(index).show();//显示当前下标的菜单项
                        //并且计算出这个菜单项应该处于的定位位置
                        $('.sub_menu').eq(index).css('margin-left',(100*index)+'px');
                    });
                }
            });
        </script>    
        <style>
            .menu{
                list-style: none;
                width: 400px;
                margin: 10px auto 0;
                padding:0;
            }
            .menu li{
                float:left;
                width:98px;
                border:1px solid black;
            }
            .menu a{
                color:black;
                width:100%;
            }
            .menu a:hover{
                background-color:pink;
            }
            .clearfix:after {
                visibility: hidden;
                display: block;
                font-size: 0;
                content: " ";
                clear: both;
                height: 0;
            }
            .sub_menu{
                border:1px solid black;
                width: 100px;
                padding:0;
                display: none;
                margin:0;
            }
            .sub_div{
                width: 400px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body style="text-align:center">
        <ul class="menu clearfix">
            <li><a href="#">菜单</a></li>
            <li><a href="#">菜单</a></li>
            <li><a href="#">菜单</a></li>
            <li><a href="#">菜单</a></li>
        </ul>
        <div class="sub_div">
            <ul class="sub_menu">
                <li><a href="#">菜单</a></li>
            </ul>
            <ul class="sub_menu">
                <li><a href="#">菜单</a></li>
                <li><a href="#">菜单</a></li>
            </ul>
            <ul class="sub_menu">
                <li><a href="#">菜单</a></li>
            </ul>
            <ul class="sub_menu">
                <li><a href="#">菜单</a></li>
                <li><a href="#">菜单</a></li>
                <li><a href="#">菜单</a></li>
            </ul>
        </div>
    </body>
</html>

 

posted @ 2016-09-28 15:21  承载梦想-韩旭明  阅读(595)  评论(0)    收藏  举报