• 实现流动式菜单栏


    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{ 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; 75px; border-right:1px solid #ccc}
            .menuInfo{ cursor:hand; background-color:#000; color:#fff;
                       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>

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

  • 相关阅读:
    面向对象基础之类与对象
    常用模块(一)
    re模块与正则表达式
    初识模块
    函数进阶篇
    Spring + Mybatis 读写分离
    java包的所有类生成class
    Oralce数据库的优化
    Java 搜索引擎
    JAVA分布式架构的演进
  • 原文地址:https://www.cnblogs.com/cl1006/p/4175941.html
Copyright © 2020-2023  润新知