css实现炫酷折叠手风琴菜单展开效果代码-html代码-BFW代码库

css实现炫酷折叠手风琴菜单展开效果代码

代码语言：html

代码描述：css实现炫酷折叠手风琴菜单展开效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
        margin:0;
        padding:0;
        font-family:'lato';
        list-style:none;
        text-decoration:none;
}
body {
        background-color:#fcdc29;
}
.wrapper {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
}
.mainMenu {
        width:250px;
        display:block;
        border-radius:10px;
        overflow:hidden;
}
.item {
        border-top:1px solid #ef584a;
        overflow:hidden;
}
.btn {
        display:block;
        padding:15px 20px;
        background-color:#ff6f61;
        color:#fff;
        position:relative;
}
.btn:before {
        content:'';
        position:absolute;
        width:0;
        height:0;
        border-left:8px solid transparent;
        border-right:8px solid transparent;
        border-top:10px solid #ff6f61;
        right:15px;
        bottom:-10px;
        z-index:9;
}
.btn i {
        margin-right:10px;
}
.subMenu {
        background:#273057;
        overflow:hidden;
        transition:max-height 0.7s;
        max-height:0;
}
.subMenu a {
        display:block;
        padding:15px 20px;
        color:#fff;
        font-size:14px;
        border-bottom:1px solid #394c7f;
        position:relative;
}
.subMenu a:before {
        content:'';
        opacity:0;
        transition:opacity 0.3s;
}
.subMenu a:hover:before {
        content:'';
        position:absolute;
        height:0;
        width:6px;
        left:0;
        top:0;
        opacity:1;
        /* background-color:#d8d824;
        */    border-top:24px solid transparent;
        border-left:11px solid #fcdc29;
        border-bottom:24px solid transparent;
}
.subMenu a:after {
        content:'.........完整代码请登录后点击上方下载按钮下载查看