css+js实现左侧图标菜单点击伸缩效果代码
代码语言:html
所属分类:菜单导航
代码描述:css+js实现左侧图标菜单点击伸缩效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'> <style> :root { --purple: #2E348A; --purple-light: #3E46B2; --purple-dark: #222768; --yellow: #F9C916; --white: #F6F6F4; --black: #272826; } .sidebar { padding-top: 1rem; padding-left: 2.1875rem; height: calc(100vh - 1rem); width: 100%; max-width: calc(250px - 2.1875rem); transition: 0.2s ease; background: var(--purple); } .sidebar h3 { margin-bottom: 1.25rem; font-weight: bold; text-transform: uppercase; } .sidebar h3:last-of-type { margin-top: 3.75rem; } .sidebar h3, .sidebar a { color: var(--white); } .sidebar li:not(:last-child) { margin-bottom: 7px; } .sidebar a { display: block; margin-left: -0.5rem; padding-left: 0.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; text-decoration: none; transition: 0.2s ease; } .sidebar a span { display: inline-block; vertical-align: middle; } .sidebar a:hover { background: var(--purple-light); border-radius: 2rem 0 0 2rem; } .sidebar .material-icons { margin-right: 1.25rem; font-size: 19px; vertical-align: middle; } .sidebar.collapsed { max-width: 60px; padding-left: 0; padding-right: 0; text-align: center; } .sidebar.collapsed a { margin-left: 0; padding-left: 0; } .sidebar.collapsed a span { max-height: 0; max-width: 0; opacity: 0; overflow: hidden; } .sidebar.collapsed a span::before { content: ""; position: absolute; top: calc(50% - 6px); left: -20px; border: 1px solid; border-color: transparent var(--purple) transparent transparent; border-width: 6px 10px; opacity: 0; transition: 0.35s ease; transition-delay: 0.15s; transform: translateX(100%); } .sidebar.collapsed a:hover { border-radius: 0; position: relative; } .sidebar.collapsed a:hover span { position: absolute; height: 100%; top: 0; left: 100%; max-height: 60px; max-width: 250px; padding-left: 1.5rem; padding-right: 1.5rem; display: flex; align-items: center; background: var(--purple); border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; opacity: 1; overflow: initial; white-space: nowrap; transition: opacity 0.25s ease-in, max-width 0.3s ease-in; } .sidebar.collapsed a:hover span::before { opacity: 1; transfo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0