js+css模拟手机app左侧抽屉式导航菜单弹出效果代码
代码语言:html
所属分类:菜单导航
代码描述:js+css模拟手机app左侧抽屉式导航菜单弹出效果代码
代码标签: js+css 模拟 手机 app 左侧 抽屉式 导航 菜单 弹出
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&family=Roboto:wght@300;400;500;700;900&display=swap"); *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } h1, h2, h3 { font: inherit; } :root { --light-gray-100: hsl(205, 5%, 98%); --light-gray-200: hsl(205, 7%, 90%); --light-gray-300: hsl(205, 12%, 83%); --bg--base: hsl(205, 20%, 93%); --bg-content: hsl(205, 10%, 98%); --text: hsl(205, 7%, 46%); --text-light: hsl(205, 7%, 60%); --blue--accent-1: hsl(203, 80%, 52%); --blue--accent-2: hsl(208, 77%, 43%); --font--base: "Poppins", sans-serif; --font--accent: "Roboto", sans-serif; } body { text-rendering: optimizeSpeed; font: 400 16px/1.3 var(--font--base); } .wrapper { display: grid; place-content: center; min-block-size: 100vh; background-color: var(--bg--base); padding: 1rem; } .layout-container { --width: 23.4375rem; --height: 41.6875rem; inline-size: var(--width); block-size: var(--height); background-color: var(--bg-content); contain: strict; position: relative; border-radius: 1.5rem; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; } .overlay-sidebar { inset: 0; width: inherit; height: inherit; position: fixed; z-index: 99; transition: background-color 266ms; } .active { background-color: #0004; transition: background-color 266ms ease-in; } nav { display: flex; block-size: var(--height); inline-size: calc(var(--width) * 0.8); } .toggle-button { margin: 1rem; position: absolute; display: inline-grid; padding: 0.25rem; border: 0; cursor: pointer; background-color: #0000; } .menu-icon-svg { fill: #333; width: 2.5ch; aspect-ratio: 1; } .toggle-button[aria-expanded="true"] { pointer-events: none; display: none; } .primary-navigation { flex-grow: 1; list-style: none; background-color: #fff; position: relative; } .primary-navigation::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; box-shadow: 3px 0 7px -1px #0003; } .primary-navigation[data-hidden="false"]::after { opacity: 1; transition: opacity 400ms 50ms; } .primary-navigation[data-hidden="true"] { transform: translateX(-100%); visibility: hidden; transition: transform 400ms, visibility 0ms 400ms; } .primary-navigation[data-hidden="false"] { transform: translateX(0%); visibility: visible; transition: transform 400ms, visibility 0ms; } .nav-item { display: grid; grid-template: "header" 10em "sub-nav" 1fr / auto; } .primary-navigation--header { grid-area: header; display: flex; flex-flow: column; justify-content: space-evenly; padding: 1rem; gap: 1rem; background-image: linear-gradient( 45deg, hsl(36deg 78% 59%), 30%, hsl(30deg 60% 88%) ); pointer-events: none; } .header__icon { display: inline-grid; place-content: center; aspect-ratio: 1; width: 2.5rem; } .header__icon i { border-radius: 50%; font-size: 2.25rem; color: white; } .user__info { display: flex; line-height: 1.4; flex-flow: column; color: var(--text); } .user__name { font-size: 17px; } .user__mail { font-size: 13px; font-weight: 600; } .sub__navigation--container { list-style: none; margin: 0.5rem 0; display: flex; flex-flow: column; gap: 0.25rem; } .sub__navigation--container:last-of-type { margin-block: 1rem; border-block-start: 2px solid var(--light-gray-200); } .nav__link:hover { background-color: var(--light-gray-200); } .sub__nav-item { height: 2.5rem; margin-inline: 0.5rem; } .nav__link { text-decoration: none; display: flex; align-items: center; gap: 0.75rem; height: 100%; padding-inline: 0.5rem; } .nav__link > i { font-size: 1.125rem; color: hsl(205, 87%, 45%); height: 2rem; justify-content: center; align-items: center; display: inline-flex; aspect-ratio: 1; } .text { font-size: 14px; font-weight: 500; color: var(--text); } .content { display: flex; flex-flow: column; height: 100%; position: relative; isolation: isolate; background-color: hsl(30 60% 88% / 0.7); } img { max-width: 100%; object-fit: cover; display: block; object-position: top; } .content--header { margin-top: 3em; height: 10em; display: flex; justify-content: center; } .primary--header { display: flex; z-index: 10; text-align: center; flex-direction: column; font-size: 2.825rem; font-family: var(--font--accent); font-weight: 700; line-height: 1.1; color: var(--blue--accent-1); text-shadow: -2px 3px 3px #0006; } </style> </head> <body> <!-- partial:index.partial.html --> <div class="wrapper"> <div class="layout-container"> <aside class="overlay-sidebar" aria-label="Sidebar"> <nav> <button class="toggle-button" aria-expanded="false" aria-controls="primary-navigation" title="Toggle Navigation"> <svg class="menu-icon-svg" viewBox="0 0 100 75"> <rect y="0" width="100" height="14" rx="6"></rect> <rect y="30" width="100" height="14" rx="6"></rect> <rect y="60" width="100" height="14" rx="6"></rect> </svg> </button> <ul id="primary-navigation" class="primary-navigation" data-hidden="true"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0