gpt4 book ai didi

css - 当我将屏幕缩小到 768 像素以下时,切换图标菜单不显示。只显示 'Website title'

转载 作者:太空宇宙 更新时间:2023-11-04 06:28:15 25 4
gpt4 key购买 nike

当我将屏幕缩小到 768 像素以下时,切换图标菜单不显示。我只能看到“网站标题”。有任何想法吗?谢谢。

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Flexbox Dropdown Menu</title>

<style>
.Navbar {
background-color: #46ACC2;
display: flex;
padding: 16px;
font-family: sans-serif;
color: white;
}

.Navbar__Link {
padding-right: 8px;
}

.Navbar__Items {
display: flex;
}

.Navbar__Items--right {
margin-left: auto;
}

.Navbar__Link-toggle {
display: none;
}

@media only screen and (max-width: 768px) {
.Navbar__Items,
.Navbar {
flex-direction: column;
}
.Navbar__Items {
display: none;
}
.Navbar__Items--right {
margin-left: 0;
}
.Navbar__ToggleShow {
display: flex;
}
.Navbar__Link-toggle {
align-self: flex-end;
display: initial;
position: absolute;
cursor: pointer;
}
}
</style>
</head>
<body>
<div class="Navbar">
<div class="Navbar__Link Navbar__Link-brand">
Website title
</div>
<div class="Navbar__Link Navbar__Link-toggle">
<i class="fas fa-bars"></i>
</div>
<nav class="Navbar__Items">
<div class="Navbar__Link">
Longer Link
</div>
<div class="Navbar__Link">
Longer Link
</div>
<div class="Navbar__Link">
Link
</div>
</nav>
<nav class="Navbar__Items Navbar__Items--right">
<div class="Navbar__Link">
Link
</div>
<div class="Navbar__Link">
Link
</div>
</nav>
</div>


</body>

<script>
function classToggle() {
const navs = document.querySelectorAll('.Navbar__Items')

navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
}
document.querySelector('.Navbar__Link-toggle')
.addEventListener('click', classToggle);
</script>

最佳答案

你还应该定义.Navbar__Link-toggle在媒体查询中你想显示这样的切换图标

@media only screen and (max-width: 768px) {
.Navbar__Link-toggle {
display: block;
}
}

和包含在 <head> 中标签 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

关于css - 当我将屏幕缩小到 768 像素以下时,切换图标菜单不显示。只显示 'Website title',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54901526/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com