css实现左侧可伸缩多级菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现左侧可伸缩多级菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,800" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> body { font-family: 'Work Sans', sans-serif; margin: 0; background-color: #eee; } /* Layout */ #container { padding: 0; margin: 0; background-color: #fff; } #main { padding: 4% 1.5em; max-width: 55em; margin: 0 auto; } #header { padding: 1.5em; margin: 0 0 1em 0; background-color: #eee; } #footer { padding: 1.5em; margin: 2em 0 0 0; background-color: #eee; } /* Menu Styles */ .primary-nav { position: fixed; z-index: 999; } .menu { position: relative; } .menu ul { margin: 0; padding: 0; list-style: none; } .open-panel { border: none; background-color:#fff; padding: 0; } .hamburger { background: #fff; position: relative; display: block; text-align: center; padding: 13px 0; width: 50px; height: 73px; left: 0; top: 0; z-index: 1000; cursor: pointer; } .hamburger:before { content:"\2630"; /* hamburger icon */ display: block; color: #000; line-height: 32px; font-size: 16px; } .openNav .hamburger:before { content:"\2715"; /* close icon */ display: block; color: #000; line-height: 32px; font-size: 16px; } .hamburger:hover:before { color: #777; } .primary-nav .menu li { position: relative; } .menu .icon { position: absolute; top: 12px; right: 10px; pointer-events: none; width: 24px; height: 24px; color: #fff; } .menu, .menu a, .menu a:visited { color: #aaa; text-decoration: none!important; position: relative; } .menu a { display: block; white-space: nowrap; padding: 1em; font-size: 14px; } .menu a:hover { color: #fff; } .menu { margin-bottom: 3em; } .menu-dropdown li .icon { color: #777; } .menu-dropdown li:hover .icon { color: #fff; } .menu label { margin-bottom: 0; display: block; } .menu label:hover { cursor: pointer; } .menu input[type="checkbox"] { display: none; } input#menu[type="checkbox"] { display: none; } .sub-menu-dropdown { display: none; } .new-wrapper { position: absolute; left: 50px; width: calc(100% - 50px); transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1); } #menu:checked + ul.menu-dropdown { left: 0; -webkit-animation: all .45s cubic-bezier(0.77, 0, 0.175, 1); animation: all .45s cubic-bezier(0.77, 0, 0.175, 1); } .sub-menu-checkbox:checked + ul.sub-menu-dropdown { display: block!important; -webkit-animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1); animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1); } .openNav .new-wrapper { position: absolute; transform: translate3d(200px, 0, 0); width: calc(100% - 250px); transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1); } .downarrow { background: transparent; position: absolute; right: 50px; top: 12px; color: #777; width: 24px; height: 24px; text-align: center; display: block; } .downarrow:hover { color: #fff; } .menu { position: absolute; display: block; left: -200px; top: 0; width: 250px; transition: all 0.45s cubic-bezier(0.77, 0, 0.175, 1); background-color: #000; z-index: 999; } .menu-dropdown { top: 0; overflow-y: auto; } .overflow-container { position: relative; height: calc(100vh - 73px)!important; overflow-y: auto; border-top: 73px solid #fff; z-index: -1; display:block; } .menu a.logotype { position: absolute!important; top: 11px; left: 55px; display: block; font-family: 'Work Sans', sans-serif; text-transform: uppercase; font-weight: 800; color: #000; font-size: 21px; padding: 10px; } .menu a.logotype span { font-weight: 400; } .menu a.logotype:hover { color: #777; } .sub-menu-dropdown { background-color: #333; } .menu:hover { position: absolute; left: 0; top: 0; } .openNav .menu:hover { position: absolute; left: -200px; top 73px; } .openNav .menu { top 73px; transform: translate3d(200px, 0, 0); transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1); } /* label.hamburger { display: none; } */ /* look and feel only, not needed for core menu*/ @-webkit-keyframes grow { 0% { display: none; opacity: 0; } 50% { display: block; opacity: 0.5; } 100% { opacity: 1; } } @keyframes grow { 0% { display: none; opacity: 0; } 50% { display: block; opacity: 0.5; } 100% { opacity: 1 } } /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* Resposive Typography */ body, button, input, select, optgroup, textarea { color: #000; font-size: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0