zoukankan      html  css  js  c++  java
  • 实现流动式菜单栏

    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>

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

  • 相关阅读:
    字符串函数---atof()函数具体解释及实现(完整版)
    curl的简单使用
    [7] 算法之路
    springMVC3.0(文件上传,@RequestMapping加參数,@SessionAttributes,@ModelAttribute,转发,重定向,数值获取,传參,ajax,拦截器)
    hdu 1754 I Hate It 线段树 点改动
    经典的7种排序算法 原理C++实现
    自己定义View实现水平滚动控件
    centos编译ffmpeg x264
    工作脚本处理文本
    A*寻路算法
  • 原文地址:https://www.cnblogs.com/cl1006/p/4175941.html
Copyright © 2011-2022 走看看