3.写一个简单的弹出菜单

效果图

3.写一个简单的弹出菜单_第1张图片3.写一个简单的弹出菜单_第2张图片

首先来看一下html结构,很简单

<div class="pop-con">
    hover
    <ul class="pop">
        <li><a href="#">公告a>li>
        <li><a href="#">投诉a>li>
        <li><a href="#">搜索a>li>
        <li><a href="#">绑定微信a>li>
        <li><a href="#">修改密码a>li>
        <li><a href="#">查看二维码a>li>
        <li><a href="#">退出登录a>li>
    ul>
div>

这是css

 

a{
    text-decoration: none;
}
li{
    list-style: none;
}
.pop-con{
    position: relative;
    width: 50px;
    height: 20px;
    margin: 0 auto;
    border: 1px solid #eee;
    padding: 10px;
}
.pop-con:hover>.pop{
    visibility: visible;
}
.pop{
    visibility: hidden;
    position: absolute;
    padding-left: 0;
    background: white;
    width: 110px;
    top: 0;
    left: -10px;
    margin-top: 44px;
    filter: drop-shadow(0px 3px 5px rgba(0,0,0,.32));
    border-radius: 4px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.pop::before{
    content: '';
    height: 0;
    width: 0;
    border: 10px solid transparent;
    border-color: transparent transparent white transparent;/*这是个三角形*/
    position: absolute;
    top: -20px;
    left: 10px;
                
}
.pop li{
    color: #333;
    text-align: center;
    padding-left: 0.25rem;
    height: 30px;
    line-height: 30px;
            
}
.pop li>a{
    display: inline-block;
    height: 32px;
    line-height: 30px;
    font-size: 15px;
    width: 100%;
    color: #333;            
}

想象一下,其实很多的菜单原理都是一样的,修改一下尺寸,修改一下定位就能购应用在很多场景,比如我模仿天猫写的的这个,当然下面这个需要结合js,相对复杂一些:

3.写一个简单的弹出菜单_第3张图片

 

转载于:https://www.cnblogs.com/famLiu/p/7201079.html

你可能感兴趣的:(3.写一个简单的弹出菜单)