jquery抽屉式全屏菜单弹出效果代码
代码语言:html
所属分类:菜单导航
代码描述:jquery抽屉式全屏菜单弹出效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* Primary Style */ h1, h2 { font-family: 'Roboto', sans-serif; font-weight: 700; } p { font-family: 'Raleway', sans-serif; font-weight: 500; } body { font-size: 1.6em; background-color: #D7DADB; /* Prevent horizontal Scrolling */ height: 100vh; margin: 0; } a { color: #2C3E50; text-decoration: none; } ul { list-style: none; padding-left: 0; } /* Main Stuff */ div.main { position: relative; z-index: 2; height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 200px 5%; background-color: #D7DADB; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.7s; -moz-transition: -moz-transform 0.7s; transition: transform 0.7s; -webkit-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99); -moz-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99); transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99); } div.main > h1, div.main > p { text-align: center; } div.main > h1 { font-size: 2.6rem; margin-bottom: 1em; } div.main > p { max-width: 450px; margin: 0 auto; line-height: 1.6; } .navigation-is-open div.main { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .navi-trigger { position: fixed; z-index: 3; left: 5%; top: 20px; height: 54px; width: 54px; background-color: #6DBCDB; border-radius: 50%; overflow: hidden; text-indent: 100%; white-space: nowrap; -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; } .navi-trigger .navi-icon { /* Nav icon created in CSS */ position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 22px; height: 2px; background-color: #FFF; } .navi-trigger .navi-icon::before, .navi-trigger .navi-icon:after { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: #FFF; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.5s, width 0.5s, top 0.3s; -moz-transition: -moz-transform 0.5s, width 0.5s, top 0.3s; transition: transform 0.5s, width 0.5s, top 0.3s; } .navi-trigger .navi-icon::before { -webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; -o-transform-origin: right top; transform-origin: right top; -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); -ms-transform: translateY(-6px); -o-transform: translateY(-6px); transform: translateY(-6px); } .navi-trigger .navi-icon::after { -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translateY(6px); -moz-transform: translateY(6px); -ms-transform: translateY(6px); -o-transform: translateY(6px); transform: translateY(6px); } .no-touch .navi-trigger:hover .navi-icon::after { top: 2px; } .no-touch .navi-trigger:hover .navi-icon::before { top: -2px; } .navi-trigger svg { position: absolute; top: 0; left: 0; } .navigation-is-open .navi-trigger { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .navigation-is-open .navi-trigger .navi-icon::after, .navigation-is-open .navi-trigger .navi-icon::before { /* fFrom Hamburger to Arrow */ width: 50%; -webkit-transition: -webkit-transform 0.5s, width 0.5s; -moz-transition: -moz-transform 0.5s, width 0.5s; transition: transform 0.5s, width 0.5s; } .navigation-is-open .navi-trigger .navi-icon::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .navigation-is-open .navi-trigger .navi-icon::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .no-touch .navigation-is-open .navi-trigger:hover .navi-icon::after, .no-touch .navigation-is-open .navi-trigger:hover .navi-icon::before { top: 0; } .navi { position: fixed; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; background-color: #6DBCDB; visibility: hidden; -webkit-transition: visibility 0s 0.7s; -moz-transition: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0