jquery+css点击弹出手风琴折叠菜单效果代码

代码语言:html

所属分类:菜单导航

代码描述:jquery+css点击弹出手风琴折叠菜单效果代码

代码标签: jquery css 折叠 手风琴 菜单

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        ul { list-style: none; }
        a { text-decoration: none; color: black;}
        body {
           font-family: 'Dosis', sans-serif;
           background: #FF5722;
        }
        #menu-wrapper {
            overflow: hidden;
            max-width: 100%;
            cursor: pointer;
        }
        
        
        #menu-wrapper #hamburger-menu {
            position: relative;
            width: 25px;
            height: 20px;
            margin: 15px;
        }
        
        #menu-wrapper #hamburger-menu span {
            opacity: 1;
            left: 0;
            display: block;
            width: 100%;
            height: 2px;
            border-radius: 10px;
            color: black;
            background-color: white;
            position: absolute;
            transform: rotate(0deg);
            transition: .4s ease-in-out;
        }
        
        #menu-wrapper #hamburger-menu span:nth-child(1) {
            top: 0;
        }
        #menu-wrapper #hamburger-menu span:nth-child(2) {
            top: 9px;
        }
        #menu-wrapper #hamburger-menu span:nth-child(3) {
            top: 18px;
        }
        #menu-wrapper #hamburger-menu.open span:nth-child(.........完整代码请登录后点击上方下载按钮下载查看

网友评论0