我正在尝试使用CSS Grid和Flexbox来创建我的网页。
对于标题，我已经成功实现了徽标，以便与大于800px的屏幕（例如大小写）一起导航，当屏幕尺寸缩小时，导航链接消失，并出现汉堡包图标。大！只是，当我打开汉堡菜单时，我无法重新出现链接。我通过选择ul标签的类名和id以及显示它们的不同变体（即flex，block，inline-block等）尝试了抓取链接块的不同变体，但没有任何效果。
<div class="container">
<header class="header">
<div class="logo">
<a href="index.html">WEBSITE LOGO</a>
</div>
<label class="hamburger hamburger--squeeze" aria-label="Open navigation menu" for="menu-toggle">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</label>
<input type="checkbox" id="menu-toggle" />
<nav class="nav">
<ul class="main-nav" id="navigation">
<li><a href="index.html">VISIT</a></li>
<li><a href="about-us.html">ABOUT US</a></li>
<li><a href="connect.html">CONNECT</a></li>
<li><a href="resources.html">RESOURCES</a></li>
<li><a href="get-the-app.html">GET THE APP</a></li>
</ul>
</nav>
</header>
</div>
html {
/* border-box box model allows us to add padding and border to our elements without increasing their size */
box-sizing: border-box;
/* A system font stack so things load nice and quick! */
font-family: Georgia, serif;
font-size: 14px;
color: var(--darkBlue);
}
/*
We inherit box-sizing: border-box; from our <html> selector
Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
*/
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background: var(--white);
min-height: calc(100vh - 100px);
margin: 0;
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header";
}
/* ------- GRID AREAS ------- */
.header {
grid-area: header;
display: grid;
grid-template-columns: 1fr 2fr 2fr;
grid-template-areas:
"logo nav nav";
align-items: center;
}
.logo {
grid-area: logo;
}
.logo a {
color: #008CE2;
text-decoration: none;
}
.hamburger {
display: grid;
grid-area: menu-icon;
justify-content: flex-end;
}
.nav {
grid-area: nav;
display: flex;
justify-content: flex-end;
}
/* ------- NAVIGATION ------- */
.main-nav {
display: flex;
flex-direction: row;
justify-content: flex-end;
padding: 0;
}
.main-nav li {
list-style-type: none;
text-align: center;
display: grid;
}
.main-nav a {
color: #008CE2;
margin: 0px 2px;
text-decoration: none;
display: inline-block;
padding: 0 10px;
}
.logo a:hover,.main-nav a:hover {
color: #ff6600;
transition: 0.2s ease;
}
.hamburger {
display: none;
}
#menu-toggle {
display: none;
}
#menu-toggle:checked + #navigation {
display: flex;
}
/* ------- Media Queries ------- */
@media(max-width: 800px){
.header {
grid-area: header;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"logo menu-icon";
}
.hamburger {
display: flex;
justify-content: flex-end;
}
.nav {
position: relative;
display: block;
}
.main-nav {
display: none;
}
.main-nav li {
display: block;
}
#menu-toggle:checked + .main-nav {
display: block;
}
}
// Look for .hamburger
var hamburger = document.querySelector(".hamburger");
// On click
hamburger.addEventListener("click", function() {
// Toggle class "is-active"
hamburger.classList.toggle("is-active");
});
这不显示的原因是什么？是否有更好的方法来显示/隐藏链接块？
弄清楚：由于.main-nav ul块有display: none;和需要撤消的东西，通过添加一个新的.is-open类，所以当它打开时我可以显示我的内容：
html {
/* border-box box model allows us to add padding and border to our elements without increasing their size */
box-sizing: border-box;
/* A system font stack so things load nice and quick! */
font-family: Georgia, serif;
font-size: 14px;
color: var(--darkBlue);
}
/*
We inherit box-sizing: border-box; from our <html> selector
Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
*/
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background: var(--white);
min-height: calc(100vh - 100px);
margin: 0;
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header";
}
/* ------- GRID AREAS ------- */
.header {
grid-area: header;
display: grid;
grid-template-columns: 1fr 2fr 2fr;
grid-template-areas:
"logo nav nav";
align-items: center;
}
.logo {
grid-area: logo;
}
.logo a {
color: #008CE2;
text-decoration: none;
}
.hamburger {
display: grid;
grid-area: menu-icon;
justify-content: flex-end;
}
.nav {
grid-area: nav;
display: flex;
justify-content: flex-end;
}
/* ------- NAVIGATION ------- */
.main-nav {
display: flex;
flex-direction: row;
justify-content: flex-end;
padding: 0;
}
.main-nav li {
list-style-type: none;
text-align: center;
display: grid;
}
.main-nav a {
color: #008CE2;
margin: 0px 2px;
text-decoration: none;
display: inline-block;
padding: 0 10px;
}
.logo a:hover,.main-nav a:hover {
color: #ff6600;
transition: 0.2s ease;
}
.hamburger {
display: none;
}
#menu-toggle {
display: none;
}
#menu-toggle:checked + #navigation {
display: flex;
}
/* ------- Media Queries ------- */
@media(max-width: 800px){
.header {
grid-area: header;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"logo menu-icon";
}
.hamburger {
display: flex;
justify-content: flex-end;
}
.nav {
position: relative;
display: block;
}
.main-nav {
display: none;
}
.main-nav.is-open{
display:block;
}
.main-nav li {
display: block;
}
#menu-toggle:checked + .main-nav {
display: block;
}
}
// Look for .hamburger
var hamburger = document.querySelector(".hamburger");
var mainNav = document.querySelector(".main-nav");
// On click
hamburger.addEventListener("click", function() {
// Toggle class "is-active"
hamburger.classList.toggle("is-active");
mainNav.classList.toggle("is-open");
});