jquery实现左侧层叠式菜单导航弹出效果代码
代码语言:html
所属分类:菜单导航
代码描述:jquery实现左侧层叠式菜单导航弹出效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); body { margin: 0; background: #fff; overflow-x: hidden; font-family: "Montserrat", sans-serif; } body.active .body { background: #222; } body.active .menu { left: 0%; transition: all 200ms linear; } body.active .menu .menu_content { width: calc(100% - 40px); height: calc(100% - 20px); left: 0; top: 0; transition: all 600ms; } body.active .content { border: 2px solid #fff; left: 20%; transform: rotateY(-50deg); transition: all 200ms linear; } .menu { position: fixed; top: 0; left: -100%; z-index: 9; background: #000; height: 100vh; width: 40%; -webkit-box-shadow: 13px 6px 22px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 13px 6px 22px 0px rgba(0, 0, 0, 0.75); box-shadow: 13px 6px 22px 0px rgba(0, 0, 0, 0.75); } .menu .menu_content { width: 20%; transition: all 200ms; height: 50%; left: -100%; top: 100%; padding: 10px 20px; display: flex; transition: all 400ms linear; flex-direction: column; align-items: center; justify-content: center; } .menu .menu_content .listTile { margin: 10px 0; font-size: 30px; line-height: 35px; cursor: pointer; user-select: none; color: #fff; } .menu .menu_content .listTile a { color: #fff; text-decoration: none; } .body { position: relative; top: 0; left: 0; width: 100%; height: auto; color: #000; transition: all 1000ms; min-height: 100vh; perspective: 4000px; -webkit-perspective: 4000px; -webkit-box-shadow: -8px 6px 22px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: -8px 6px 22px 0px rgba(0, 0, 0, 0.75); box-shadow: -8px 6px 22px 0px rgba(0, 0, 0, 0.75); transform: rotateY(0deg); left: 0%; transform-origin: center right; } .body .content { position: absolute; width: 100%; top: 0; font-family: "Jomolhari", serif; left: 0; background: #fff; color: #000; height: 100%; display: flex; transition: all 300ms linear; flex-direction: column; align-items: center; justify-content: center; } .hamburger { margin-right: 50px; } .hamburger.first { width: 48px; height: 48px; cursor: pointer; user-select: none; position: relative; background: transparent; } .hamburger.first .lines div { transition: all 500ms; } .hamburger.first .lines div:nth-child(2) { transition: all 220ms; } .hamburger.first .lines.close div { background: #d60c0c !important; } .hamburger.first .lines.close div:nth-child(2) { opacity: 0; } .hamburger.first .lines.close div:nth-child(1) { transform: rotate(45deg); left: calc(24px - 16.9705627484px + 2.5px); top: calc(24px - 16.9705627484px + 0px); transform-origin: left top; } .hamburger.first .lines.close div:nth-child(3) { transform: rotate(-45deg); left: calc(-24px + 16.9705627484px); top: calc(24px - 16.9705627484px + 0px); transform-origin: right top; } .hamburger.first .lines div:nth-child(1) { width: 100%; height: 5px; top: calc((33.33%) - 2.5px - 0px); position: absolute; background: #fff; } .hamburger.first .lines div:nth-child(2) { width: 100%; height: 5px; top: calc((66.66%) - 2.5px - 5.5px); position: absolute; background: #fff; } .hamburger.first .lines div:nth-child(3) { width: 100%; height: 5px; top: calc((99.99%) - 2.5px - 11px); position: absolute; background: #fff; } .hamburger.second { width: 64px; height: 64px; cursor: pointer; user-select: none; position: relative; background: transparent; } .hamburger.second .lines div { transition: all 500ms; } .hamburger.second .lines div:nth-child(2) { transition: all 220ms; } .hamburger.second .lines.close div { background: #d60c0c !i.........完整代码请登录后点击上方下载按钮下载查看
网友评论0