zoukankan      html  css  js  c++  java
  • 顶部下拉菜单制作笔记

    HTML <body>部分代码部分:

    <div class="wrap0">
        <div class="top w1260 " id="top">
            <div class="top-right fr">
                <ul class="menu">
                    <li class="call">
                        <div class="text">
                            电话
                            <span></span>
                        </div>
                        <div class="details">嘿嘿</div>
                    </li>
                    <li class="team">
                        <div class="text">合作伙伴
                        <span></span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    第一步,初识样式:

    wrap0 -> 设置100%宽度,28高度,背景颜色:#fafafa,1px的下边框颜色#eee

    ul.menu>li -> 设置左浮动,位置相对定位

    ul.menu>li.call -> 设置不同子元素的宽度

    ul.menu>li.team ->设置不同子元素的宽度

    ul.menu>li div.text用来放置默认显示的菜单内容

    ul.menu>li div.text -> 设置文字居中,行高28px,颜色,字体14px

    ul.menu>li div.text span ->设置下拉箭头的样式

    ul.menu>li div.text span{ width:10px; height:5px; background:url(style/top_bg.png) -15px -5px; display:block; position:absolute; right:0; top:13px;}

    第二步:

    ul.menu>li.call div.details{ width:200px; height:100px; background:#fff; position:absolute; right:0; top:28px; box-shadow:0 0 5px 0 #ccc;}

    给li元素内,最后添加一个div(用来放置下拉的内容),父元素li设置相对定位,div.details设置绝对定位,右边0,上面高度=wrap0的高度。

    第三步:

    手工控制ul.menu>li:hover div.details显示为block,原来的元素设置为none

    ul.menu>li.hover div.text{ background:#fff;}
    ul.menu>li.hover div.text span{ background-position:-15px 0;}

    手工设置鼠标放上div.text背景变为白色,span的图标显示为下拉样式

    给hover的details和text添加阴影效果box-shadow:0 0 5px 0 #ccc;

    给text添加after,添加遮挡。

    ul.menu>li.hover div.text:after{
        content:"";
        display:block;
        width:100%;
        height:10px;
        background:#fff;
        position:absolute;
        right:0;
        top:22px;
        z-index:2;
        }

    JavaScript代码来控制效果

    <script type="text/javascript">
    $(function(){
        $('ul.menu>li').hover(function(){
            $(this).toggleClass('hover').children('.details').finish().slideToggle();
            });
    })
        
    </script>

    也可以通过:hover直接添加效果,暂时不确定这样能不能添加动画效果。

    有个疑问:ul.menu>li.hover div.details不能设置display;block,设置后动画效果不对。需要找原因。不加的时候动画效果正常。

  • 相关阅读:
    VBA值列选取与复制,赋值
    Processing的条件式
    VBA之四给程序自动加行号
    自上而下的语法分析
    Processing绘制四边形
    Processing的代码编写流程
    Processing编程语言简介
    follow集的求解
    Processing函数与循环
    在UBUNTU下用ruby求得网卡地址IP地址和用户名
  • 原文地址:https://www.cnblogs.com/seeding/p/11870930.html
Copyright © 2011-2022 走看看