feather-icons多级菜单效果
代码语言:html
所属分类:菜单导航
代码描述:feather-icons多级菜单效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> *, *:after, *:before { box-sizing: border-box; } :root { --color-bg-primary: #d0d6df; --color-bg-primary-offset: #f1f3f7; --color-bg-secondary: #fff; --color-text-primary: #3a3c42; --color-text-primary-offset: #898c94; --color-orange: #dc9960; --color-green: #1eb8b1; --color-purple: #657cc4; --color-black: var(--color-text-primary); --color-red: #d92027; } body { font-family: "Inter", sans-serif; background-color: var(--color-bg-primary); color: var(--color-text-primary); } .menu { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; background-color: var(--color-bg-secondary); border-radius: 10px; box-shadow: 0 10px 20px rgba(64, 64, 64, 0.15); } .menu-list { margin: 0; display: block; width: 100%; padding: 8px; } .menu-list + .menu-list { border-top: 1px solid #ddd; } .menu-sub-list { display: none; padding: 8px; background-color: var(--color-bg-secondary); border-radius: 10px; box-shadow: 0 10px 20px rgba(64, 64, 64, 0.15); position: absolute; left: 100%; right: 0; z-index: 100; width: 100%; top: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; } .menu-sub-list:hover { display: -webkit-box; display: flex; } .menu-item { position: relative; } .menu-button { font: inherit; border: 0; padding: 8px 8px; padding-right: 36px; width: 100%; border-radius: 8px; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; position: relative; background-color: var(--color-bg-secondary); } .menu-button:hover { background-color: var(--color-bg-primary-offset); } .menu-button:hover + .menu-sub-list { display: -webkit-box; display: flex; } .menu-button:hover svg { stroke: var(--color-text-primary); } .menu-button svg { width: 20px; height: 20px; margin-right: 10px; stroke: var(--color-text-primary-offset); } .menu-button svg:nth-of-type(2) { margin-right: 0; position: absolute; right: 8px; } .menu-button--delete:hover { color: var(--color-red); } .menu-button--delete:hover svg:first-of-type { stroke: var(--color-red); } .menu-button--orange svg:first-of-type { stroke: var(--color-orange); } .menu-button--green svg:first-of-type { stroke: var(--color-green); } .menu-button--purple svg:first-of-type { stroke: var(--color-purple); } .menu-button--black svg:first-of-type { stroke: var(--color-black); } .menu-button--checked svg:nth-of-type(2) { stroke: var(--color-purple); } .container { position: absolute; top: 0; left: 0; right: 0; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0