实现流动式菜单栏

slidedown 通过调整高度显示所匹配的元素

slideUp     通过调整高度隐藏所匹配的元素

 

html 代码：
    <div id="container">
        <h1>流式导航栏</h1>
        <div id="menuBarHolder">
            <ul id="menuBar">
                <li class="firstchild"><a href="JavaScript:#">首页</a><div class="menuInfo">这是首页的连接</div></li>
                <li><a href="JavaScript:#">公司简介</a><div class="menuInfo">公司简介的信息</div></li>
                <li><a href="JavaScript:#">公司产品</a><div class="menuInfo">公司产品信息</div></li>
                <li><a href="JavaScript:#">个性化服务</a><div class="menuInfo">我的服务，你放心</div></li>
                <li><a href="JavaScript:#">关于</a><div class="menuInfo">没有关于的连接</div></li>
                <li><a href="JavaScript:#">联系我们</a><div class="menuInfo">来吧，加入我们吧，游林</div></li>
            </ul>
        </div>
    </div>

--------------------------------------------------------------------------

css 代码：

<style type="text/css">
        #menuBarHolder{ width:730px; height:45px; background-color:#000; color:#fff; font-family:Arial; font-size:14px; margin-top:20px;}
        #menuBarHolder ul{ list-style-type:none; display:block;}
        .firstchild{ border-left:1px solid #ccc;}
        #container{ margin-top:10px;}
        #menuBar li { float:left; padding:15px; height:16px; width:75px; border-right:1px solid #ccc}
        .menuInfo{ cursor:hand; background-color:#000; color:#fff;
                   width:75px; font-size:11px; height:100px; padding:3px; display:none; position:absolute;
                   margin-left:15px; margin-top:10px; }
</style>

-----------------------------------------------------------------

jquery 代码：

 <script type="text/javascript">
        $(function () {
            $("#menuBar li").click(function () {
                var url = $(this).find("a").attr("href");
                document.location.href = url;
            });
             $("#menuBar li").hover(function () {
            $(this).find(".menuInfo").slideDown();
            }, function () {
                $(this).find(".menuInfo").slideUp();
            })
        })

</script>

--------------------------------------

 

转载于:https://www.cnblogs.com/cl1006/p/4175941.html