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"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> @charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,700|Shrikhand"); * { box-sizing: border-box; } body { font-family: "Open Sans", sans-serif; font-size: 1rem; line-height: 1.4; background-image: url(//repo.bfw.wiki/bfwrepo/image/60987bfc5afa0.png); background-size: cover; } @media (min-width: 450px) { body { font-size: 1.25rem; } } .page-header { display: flex; flex-wrap: wrap; justify-content: space-between; position: fixed; top: 0; right: 0; left: 0; overflow: visible; padding: 1rem; z-index: 200; } .page-content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; min-height: 100vh; text-align: center; color: white; } .page-tagline { font-size: 0.75rem; font-weight: 700; z-index: 100; } .page-tagline a { color: #123965; text-decoration: none; } .page-title { margin-bottom: 1.5rem; font-family: "Shrikhand", serif; font-size: 2rem; line-height: 1.2; } @media (min-width: 450px) { .page-title { font-size: 3rem; } } nav { display: flex; position: absolute; top: 0; left: 0; padding: 3rem 1rem 1rem; width: 100vw; min-height: 100vh; text-align: center; background-color: white; opacity: 0; transform: translateY(-100%); transition: opacity 0.45s 0.45s ease, transform 0s 1.2s; } .menu ol { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; width: 100%; } @media (min-width: 820px) { .menu ol { grid-template-columns: repeat(4, 1fr); } } .menu ol li { display: grid; grid-column: span 1; grid-gap: 1rem; overflow: hidden; } .menu ol a { display: flex; align-items: center; justify-content: center; padding: 1rem; width: 100%; height: 100%; font-size: 1.25rem; text-decoration: none; color: #2269BB; background-color: #2269BB; border-radius: 2px; } @media (min-width: 450px) { .menu ol a { font-size: 1.75rem; } } .menu > ol > li:nth-child(n+3) { grid-column: span 2; } .menu .sub-menu { padding: 0; grid-template-columns: repeat(2, 1fr); } @media (min-width: 500px) { .menu .sub-menu { grid-template-columns: repeat(3, 1fr); } } .menu .sub-menu li a { font-size: 0.85rem; color: #16457a; background-color: #16457a; } @media (min-width: 450px) { .menu .sub-menu li a { font-size: 1rem; } } .menu .sub-menu li:nth-child(3n) { grid-column: span 2; } @media (min-width: 500px) { .menu .sub-menu li:nth-child(3n) { grid-column: span 1; } } .menu-toggle { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 2px; position: relative; cursor: pointer; width: 28px; height: 22px; z-index: 100; } .menu-toggle:before { content: "×"; position: absolute; top: 0; left: 0; font-size: 2.4rem; line-height: 0.4; color: #123965; z-index: 2; opacity: 0; transition: opacity 0.3s ease; } .menu-toggle span { display: block; position: relative; width: 100%; height: 2px; background-color: #123965; border-radius: 2px; transition: transform 0.3s ease; transform-origin: 100% 100%; } .menu-toggle span:nth-child(1) { transition-delay: 0.35s; } .menu-toggle span:nth-child(2) { transition-delay: 0.4s; } .menu-toggle span:nth-child(3) { transition-delay: 0.45s; } .menu-toggle span:nth-child(4) { transition-delay: 0.5s; } .menu-toggle span:nth-child(5) { transition-delay: 0.55s; } .menu-toggle span:nth-child(6) { transition-delay: 0.6s; } .menu-toggle span:nth-child(1), .menu-toggle span:nth-child(2) { grid-column: span 3; } .menu-toggle span:nth-child(3), .menu-toggle span:nth-child(6) { grid-column: span 2; } .menu-toggle span:nth-child(4), .menu-toggle span:nth-child(5) { grid-column: span 4; } #menu-toggle-input { display: none; } #menu-toggle-input:checked ~ .menu-toggle span { transform: scaleX(0); } #menu-toggle-input:checked ~ .menu-toggle span:nth-child(1) { transition-delay: 0.05s; } #menu-toggle-input:checked ~ .menu-toggle span:nth-child(2) { transition-delay: 0.1s; } #menu-toggle-input:checked ~ .menu-toggle span:nth-child(3) { transition-delay: 0.15s; } #menu-toggle-input:checked ~ .menu-toggle span:nth-child(4) { transition-delay: 0.2s; } #menu-toggle-input:checked ~ .menu-toggle span:nth-child(5) { transition-delay: 0.25s; } #menu-toggle-input:checked ~ .menu-toggle span:nth-child(6) { transition-delay: 0.3s; } #menu-toggle-input:checked ~ .menu-toggle:before { opacity: 1; transition-delay: 0.75s; } #menu-toggle-input:checked ~ nav { opacity: 1; transform: translateY(0); transiti.........完整代码请登录后点击上方下载按钮下载查看
网友评论0