css实现自适应metro风格菜单弹出效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现自适应metro风格菜单弹出效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <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/5fc1a9b3bd22e.png); background-size: cover; } @media (min-width: 450px) { body { font-size: 1.25rem; } } .page-header { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; position: fixed; top: 0; right: 0; left: 0; overflow: visible; padding: 1rem; z-index: 200; } .page-content { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; -webkit-box-pack: 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: -webkit-box; 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; -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: opacity 0.45s 0.45s ease, -webkit-transform 0s 1.2s; transition: opacity 0.45s 0.45s ease, -webkit-transform 0s 1.2s; transition: opacity 0.45s 0.45s ease, transform 0s 1.2s; transition: opacity 0.45s 0.45s ease, transform 0s 1.2s, -webkit-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: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: 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; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .menu-toggle span { display: block; position: relative; width: 100%; height: 2px; background-color: #123965; border-radius: 2px; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } .menu-toggle span:nth-child(1) { -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } .menu-toggle span:nth-child(2) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .menu-toggle span:nth-child(3) { -webkit-transition-delay: 0.45s; transition-delay: 0.45s; } .menu-toggle span:nth-child(4) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .menu-toggle span:nth-child(5) { -webkit-transition-delay: 0.55s; transition-delay: 0.55s; } .menu-toggle span:nth-child(6) { -webkit-transition-delay: 0.6s; 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 { -webkit-transform: scaleX(0); transform: scaleX(0); } #menu-toggle-input:checked ~ .menu-toggle span:nth-child(1) { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } #menu-toggle-input:checked ~ .menu-toggle span:nth-child(2) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } #menu-toggle-input:checked ~ .menu-toggle span:nth-child(3) { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } #menu-toggle-input:checked ~ .menu-toggle span:nth-child(4) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } #menu-toggle-input:checked ~ .menu-toggle span:nth-child(5) { -webkit-transition-delay: 0.25s; transition-delay: 0.25s; } #menu-toggle-input:checked ~ .menu-toggle span:nth-child(6) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } #menu-toggle-input:checked ~ .menu-toggle:before { opacity: 1; -webkit-transition-delay: 0.75s; transition-delay: 0.75s; } #menu-toggle-input:checked ~ nav { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 0s; transition-delay: 0s; } #menu-toggle-input:checked ~ nav a { color: white; -webkit-transform: translate(0, 0); transform: translate(0, 0); } #menu-toggle-input:checked ~ nav > ol > li:nth-child(1) > a { -webkit-transition: color 0.3s 0.825s, -webkit-transform 0.3s 0.35s ease; transition: color 0.3s 0.825s, -webkit-transform 0.3s 0.35s ease; transition: color 0.3s 0.825s, transform 0.3s 0.35s ease; transition: color 0.3s 0.825s, transform 0.3s 0.35s ease, -webkit-transform 0.3s 0.35s ease; } #menu-toggle-input:checked ~ nav .sub-menu > li:nth-child(1) > a { -webkit-transition: color 0.3s 0.825s, -webkit-transform 0.3s 0.5s ease; transition: color 0.3s 0.825s, -webkit-transform 0.3s 0.5s ease; transition: color 0.3s 0.825s, transform 0.3s 0.5s ease; transition: color 0.3s 0.825s, transform 0.3s 0.5s ease, -webkit-transform 0.3s 0.5s ease; } #menu-toggle-input:checked ~ nav > ol > li:nth-child(2) > a { -webkit-transition: color 0.3s 0.825s, -webkit-transform 0.3s 0.4s ease; transition: color 0.3s 0.825s, -webkit-transform 0.3s 0.4s ease; transition: color 0.3s 0.825s, transform 0.3s 0.4s ease; transition: color 0.3s 0.825s, transform 0.3s 0.4s ease, -webkit-transform 0.3s 0.4s ease; } #menu-toggle-input:checked ~ nav .sub-menu > li:nth-child(2) > a { -webkit-transition: color 0.3s 0.825s, -webkit-transform 0.3s 0.55s ease; transition: color 0.3s 0.825s, -webkit-transform 0.3s 0.55s ease; transition: color 0.3s 0.825s, transform 0.3s 0.55s ease; transition: color 0.3s 0.825s, transform 0.3s 0.55s ease, -webkit-transform 0.3s 0.55s ease; } #menu-toggle-input:checked ~ nav > ol > li:nth-child(3) > a { -webkit-transition: color 0.3s 0.825s, -webkit-transform 0.3s 0.45s ease; transition: color 0.3s 0.825s, -webkit-transform 0.3s 0.45s ease; transition: color 0.3s 0.825s, transform 0.3s 0.45s ease; transition: color 0.3s 0.825s, transfo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0