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; } ..........完整代码请登录后点击上方下载按钮下载查看
网友评论0