css - 为什么我的菜单项在桌面大小时不显示?
问题描述
我按照本教程创建了一个响应式汉堡菜单。但我不明白为什么当我的屏幕是桌面大小时菜单项不显示。
当屏幕为移动尺寸时,我可以单击汉堡菜单并出现项目。如果我在菜单“打开”时将屏幕放大到桌面大小,它们确实会以我想要的方式出现(因为我的媒体查询)。但是当我刷新页面时(当我的屏幕是桌面大小时)我的菜单项不会出现。我似乎无法弄清楚,如果你看到我的错误,请帮助。谢谢!
body {
margin: 0;
background-color: #fff;
}
.header {
background-color: #fff;
position: fixed;
width: 100%;
z-index: 3;
.menu-btn {
display: none;
&:checked ~ .menu {
max-height: 240px;
}
&:checked ~ .menu-icon .nav-icon {
background: transparent;
&:before {
transform: rotate(-45deg);
top: 0;
}
&:after {
transform: rotate(45deg);
top: 0;
}
}
}
.menu-icon {
padding: 28px 20px;
position: relative;
float: right;
cursor: pointer;
.nav-icon {
background: #333;
display: block;
height: 2px;
width: 18px;
position: relative;
transition:background .2s ease-out;
&:before {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: 5px;
}
&:after {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: -5px;
}
}
}
.menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
color: #403e3f;
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
li {
a {
display: block;
padding: 20px;
border-right: 1px solid #aaa;
text-decoration: none;
}
}
}
}
@media (min-width: 48em) {
li {
float: left;
a {
padding: 20px 30px;
}
}
.menu {
clear: none;
float: right;
max-height: none;
}
.menu-icon {
display: none;
}
}
<header class="header">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li><a href="#">oplossingen</a></li>
<li><a href="#forget">product</a></li>
<li><a href="#forget">about</a></li>
</header>
解决方案
您需要在媒体查询中的菜单上删除max-height: 0;
并max-height:250px
设置 a以使菜单显示在桌面上。height: auto;
更新我已经修改了代码片段,它现在可以工作了。
body {
margin: 0;
background-color: #fff;
}
.header {
background-color: #fff;
position: fixed;
width: 100%;
z-index: 3;
}
.menu-btn {
display: none;
}
.menu-btn:checked ~
.menu {
height: auto;
}
.menu-btn:checked ~ .menu-icon .nav-icon {
background: transparent;
}
.menu-btn:checked ~ .menu-icon .nav-icon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked ~ .menu-icon .nav-icon:after {
transform: rotate(45deg);
top: 0;
}
.menu-icon {
padding: 28px 20px;
position: relative;
float: right;
cursor: pointer;
}
.nav-icon {
background: #333;
display: block;
height: 2px;
width: 18px;
position: relative;
transition: background .2s ease-out;
}
.nav-icon:before {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: 5px;
}
.nav-icon:after {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: -5px;
}
.menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
color: #403e3f;
clear: both;
height: 0;
transition: height .2s ease-out;
}
.menu a {
display: block;
padding: 20px;
text-decoration: none;
}
@media screen and (min-width: 48em) {
.menu-icon {
display: none;
}
.menu {
float: right;
height: auto;
}
.menu li {
display: inline-block;
}
}
<header class="header">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li><a href="#">oplossingen</a></li>
<li><a href="#forget">product</a></li>
<li><a href="#forget">about</a></li>
</header>
推荐阅读
- ios - 在 Swift 中解压缩在 PHP 中压缩的 .gz 文件会给我一个 invalidData 错误
- vue.js - 这是在 sfc vue 方法中未定义的
- swift - 在 UIViewControllerRepresentable 中设置 ViewController 的属性
- jenkins - 如何使用 ZAPI 通过检查 zephyr 测试 ID 将 jenkins 测试结果自动更新到 zephyr
- ios - 选择器选项未动态更新 SwiftUI
- c - Posix“访问”系统调用是否考虑了 ACL?
- java - OpcUa 客户端如何获取有关服务器配置的信息?像 max-pending-publish-requests 等
- php - 谷歌安全应用
- kotlin - Kotlin 继承问题。看 [Q.] 部分
- javascript - 是否可以在 Twilio Functions 中使用 Axios?如果是这样,怎么做?