css实现带右侧弹出框的顶部菜单栏效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现带右侧弹出框的顶部菜单栏效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" type='text/css' > <style> :root { --white: #FFF; --gray: #F3F3F3; --gray-mid: #d6d6d6; --gray-dark: #3e3e3e; --button-hover: #ECE8F9; --body-background: #f3f1f9; } body { font-family: 'Poppins', sans-serif; margin: 0; display: flex; height: 100vh; background-color: var( --body-background ); } * { box-sizing: border-box; } button { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: center; } button:focus { outline: revert } html { scroll-behavior: smooth; } header { height: 5rem; padding: 0 1rem; background-color: var(--white); width: 100%; display: flex; align-items: center; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; } .navigation__group { display: flex; align-items: center; width: 100%; gap: 0.4rem; } .navigation__group .icon { width: 3rem; height: 3rem; padding: 0.4rem; transition: all 0.2s ease-in-out; border-radius: 50%; } .navigation__group > button:nth-child(1) { margin-right: auto; } .navigation__group button:hover, .navigation__group button:focus { background-color: var(--button-hover); border-radius: 50%; } .profile { display: block; width: 2.6rem; height: 2.6rem; cursor: pointer; border-radius: 50%; } .quick-settings { background-color: var( --white ); height: 100vh; display: flex; flex-direction: column; max-width: 22rem; width: 100%; padding: 1rem 1.5rem; right: 0; position: fixed; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; animation: fadeInAnimation ease-in-out 0.5s forwards; } .quick-settings__content { display: flex; flex-direction: column; gap: 0.5rem; } .quick-settings--headline { display: flex; width: 100%; justify-content: space-between; } .none { display: none; } .hide { opacity: 0; visibility: hidden; animation: fadeOutAnimation ease-in-out 0.5s forwards; } @keyframes fadeInAnimation { 0% { opacity: 0; visibility: hidden; width: 0; } 100% { opacity: 1; visibility: visible; width: 22rem; } } @keyframes fadeOutAnimation { 0% { opacity: 1; visibility: visible; width: 22rem; } 100% { opacity: 0; width: 0; visibility: hidden; } } /* Switch button */ .switch-wrapper { width: 100%; display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; } .switch__label { white-space: nowrap; } .switch { position: relative; display: inline-block; width: 3.75rem; height: 2.125rem; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; inset: 0; background-color: var( --body-background ); transition: .4s; } .slider:before { position: absolute; content: ""; height: 1.7rem; width: 1.7rem; left: 0.25rem; bottom: 0.25rem; background-color: white; transition: .4s; } .switch input:checked + .slider { background-color: var( --gray-dark ); } .switch input:checked + .slider:before { transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 2.125rem; } .slider.round:before { border-radius: 50%; } /* inspired by https://www.w3schools.com/howto/howto_css_switch.asp */ </style> </head> <body> <header> <nav class="navigation__group"> <button type="button"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M4 6l16 0"></path> <path d="M4 12l16 0"></path> <path d="M4 18l16 0"></path> </svg> </button> <button type="button"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-grid-dots" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M5 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path> <path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path> <path d="M19 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path> <path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path> <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path> <path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path> <path d="M5 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path> <path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path> <path d="M19 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0">.........完整代码请登录后点击上方下载按钮下载查看
网友评论0