jquery+css点击弹出手风琴折叠菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述: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(1) { transform: translateY(9px) rotate(135deg); } #menu-wrapper #hamburger-menu.open span:nth-child(2) { opacity: 0; transform: translateX(-60px); } #menu-wrapper #hamburger-menu.open span:nth-child(3) { transform: translateY(-9px) rotate(-135deg); } #menu-container .menu-list .menu-submenu { padding-top: 20px; padding-bottom: 20px; } #menu-container .menu-list { padding-left: 0; display: block; position: absolute; width: 100%; max-width: 450px; background: white; box-shadow: rgba(100,100,100,0.2) 6px 2px 10px; z-index: 999; overflow-y: auto; overflow-x: hidden; left: -100%; } #menu-container .menu-list li.accordion-toggle, #menu-container .menu-list .menu-login { font-size: 16px; padding: 20px; text-transform: uppercase; border-top: 1px solid #dbdcd2; } #menu-container .menu-list li:first-of-type { border-top: 0; } .accordion-toggle, .accordion-content { cursor: pointer; font-size: 16px; position: relative; letter-spacing: 1px; } .accordion-content { display: none; } .accordion-toggle a:before, .accordion-toggle a:after { content: ''; display: block; position: absolute; top: 50%; right: 30px; width: 15px; height: 2px; margin-top: -1px; background-color: #5a5858; transform-origin: 50% 50%; transition: all 0.3s ease-out; } .accordion-toggle a:before { transform: rotate(-90deg); opacity: 1; z-index: 2; } .accordion-toggle.active-tab { background: yellowgreen; transition: all 0.3s ease; } .accordion-toggle a.active:before { transform: rotate(0deg); background: #fff !important; } .accordion-toggle a.active:after { transform: rotate(180deg); background: #fff !important; opacity: 0; } </style> </head> <body> <div id="menu-container"> <div id="menu-wrapper"> <div id="hamburger-menu"><span></span><span></span>&l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0