顶部下拉菜单制作笔记

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，设置后动画效果不对。需要找原因。不加的时候动画效果正常。

 

 

posted @ 2019-11-16 11:16  无风何其浪  阅读(187)  评论(0)  编辑  收藏  举报