html - 汉堡菜单的问题
问题描述
我正在玩一个简单的汉堡包菜单，但不知何故我做错了。这个想法。
- 在更大的屏幕上，页面应该看起来像这样：
- 在较小的屏幕上，我们将看到一个汉堡菜单，如下所示：
- 汉堡可能会在点击时展开，如下所示：
到目前为止，一切都很好。这是我的主要想法如何构建它：
<div class="home-navbar">
<div class="home-navbar-logo-hamburger">
<!-- LOGO -->
<h1 class="logo">
<span class="text-primary"><i class="fas fa-book-open"></i> eL</span>Bi
</h1>
<!-- EO: LOGO -->
<!-- Hamburger menu -->
<div class="hamburger">
<i id="hamburger" class="fa-2x fas fa-bars"></i>
</div>
<!-- EO: Hamburger menu -->
</div>
<!-- Menus-->
<ul class="home-navbar-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
</ul>
<!-- EO: Menus -->
</div>
</div>
简而言之，在更大的屏幕上：
- 汉堡菜单图标被隐藏
- 标志和真正的菜单是可见的，在 flex 布局中（flex 方向是行）
在较小的屏幕上：
汉堡图标可见
徽标也可见
真正的菜单尚不可见，但具有弹性布局（弹性方向为列）
当我们单击汉堡包时，使用以下 jquery 代码显示菜单：
$(document).ready(function () { $("#hamburger").click(function () { var visible = $(".home-navbar-menu").is(":visible"); if (!visible) { $(".home-navbar-menu").show(); } else { $(".home-navbar-menu").hide(); } }); })
问题：
- 展开屏幕并显示更大屏幕的菜单
- 缩短浏览器并移动到移动版本
- 打开和关闭移动菜单
- 展开画面
大屏幕的菜单不再可见......片段：
$(document).ready(function () {
$("#hamburger").click(function () {
var visible = $(".home-navbar-menu").is(":visible");
if (!visible) {
$(".home-navbar-menu").show();
} else {
$(".home-navbar-menu").hide();
}
});
})@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Open Sans', sans-serif;
background: #fff;
color: #333;
line-height: 1.6;
}
.btn {
cursor: pointer;
display: inline-block;
margin-top: 20px;
padding: 10px 30px;
color: #fff;
background-color: #28a745;
border: none;
border-radius: 5px;
}
.home-header {
background: url('https://source.unsplash.com/1600x900/?nightsky') no-repeat center center/cover;
height: 100vh;
position: relative;
color: #fff;
}
.home-header .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
padding: 20px 20px
}
.home-header .content h1 {
font-size: 3rem;
}
.home-footer {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: right;
color: #fff;
z-index: 10;
position: fixed;
bottom: 0;
left: 0;
padding: 0 20px
}
.home-navbar {
position: fixed;
top: 0;
left: 0;
min-height: 70px;
z-index: 10;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
color: #fff;
background: black;
}
.home-navbar-menu a {
color: #fff;
padding: 10px 20px;
margin: 0 5px;
text-decoration: none;
}
.home-navbar-menu li {
display: flex;
align-items: center;
}
.home-navbar-menu a:hover {
border-bottom: #28a745 2px solid;
}
/* Text colors */
.text-primary {
color: #28a745;
}
.hamburger {
display: none;
}
.home-navbar-logo-hamburger {
display: flex;
align-items: center;
}
.logo
{
margin-left: 20px;
}
.hamburger
{
margin-right: 20px;
}
.home-navbar-menu {
font-size: 1.2rem;
list-style: none;
display: flex;
flex-direction: row;
}
@media screen and (max-width: 724px) {
.hamburger {
display: block;
}
.home-navbar-logo-hamburger {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.home-navbar {
display: flex;
flex-direction: column;
}
.home-navbar-menu {
display: flex;
flex-direction: column;
justify-content: center;
display: none;
}
.home-navbar-menu a:hover {
border-bottom: none;
}
.home-navbar-menu li {
margin: 10px 20px;
padding-left: 10px;
text-align: center;
border-bottom: #28a745 2px solid;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/bdb2495b74.js" crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin="anonymous"></script>
</head>
<body>
<div class="home-navbar">
<div class="home-navbar-logo-hamburger">
<!-- LOGO -->
<h1 class="logo">
<span class="text-primary"><i class="fas fa-book-open"></i> dA</span>Ba
</h1>
<!-- EO: LOGO -->
<!-- Hamburger menu -->
<div class="hamburger">
<i id="hamburger" class="fa-2x fas fa-bars"></i>
</div>
<!-- EO: Hamburger menu -->
</div>
<!-- Menus-->
<ul class="home-navbar-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
</ul>
<!-- EO: Menus -->
</div>
<!-- Content -->
<header class="home-header">
<div class="content">
<h1>Test!</h1>
<h2>Test test test</h2>
</div>
</header>
<!-- EO: Content -->
<!-- Footer -->
<footer class="home-footer">
<div>© Acme 2021</div>
</footer>
<!-- EO: Footer -->
</body>
</html>任何关于如何构建菜单的建议都值得赞赏。
解决方案
这是你media query加上你jQuery造成的问题。
添加这将解决它：
@media screen and (min-width: 724px) {
.home-navbar-menu {
display: flex!important;
}
}
你的js/ jQuery：
$(document).ready(function () {
$("#hamburger").click(function () {
var visible = $(".home-navbar-menu").is(":visible");
if (!visible) {
$(".home-navbar-menu").show();
} else {
$(".home-navbar-menu").hide();
}
});
})
当您的页面折叠到较小/移动视图时，它会通过您的css. 当您想再次显示菜单时，您正在使用汉堡菜单切换，因此jQuery发挥作用；这是show/ hide（在您的情况下显示 flex/display none（理想情况下））。
当您将菜单设置为隐藏在较小的屏幕上时，您实际所做的是将其设置为display:none. 因此，当返回到更大尺寸的屏幕时，它仍然是隐藏的。
这个答案的media query顶部迫使它重新展示自己，覆盖jQuery hide.
您也可以通过将js/jQuery更改为此来简化它：
完成品：
$(document).ready(function () {
$("#hamburger").click(function () {
$(".home-navbar-menu").toggle();
});
})@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Open Sans', sans-serif;
background: #fff;
color: #333;
line-height: 1.6;
}
.btn {
cursor: pointer;
display: inline-block;
margin-top: 20px;
padding: 10px 30px;
color: #fff;
background-color: #28a745;
border: none;
border-radius: 5px;
}
.home-header {
background: url('https://source.unsplash.com/1600x900/?nightsky') no-repeat center center/cover;
height: 100vh;
position: relative;
color: #fff;
}
.home-header .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
padding: 20px 20px
}
.home-header .content h1 {
font-size: 3rem;
}
.home-footer {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: right;
color: #fff;
z-index: 10;
position: fixed;
bottom: 0;
left: 0;
padding: 0 20px
}
.home-navbar {
position: fixed;
top: 0;
left: 0;
min-height: 70px;
z-index: 10;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
color: #fff;
background: black;
}
.home-navbar-menu a {
color: #fff;
padding: 10px 20px;
margin: 0 5px;
text-decoration: none;
}
.home-navbar-menu li {
display: flex;
align-items: center;
}
.home-navbar-menu a:hover {
border-bottom: #28a745 2px solid;
}
/* Text colors */
.text-primary {
color: #28a745;
}
.hamburger {
display: none;
}
.home-navbar-logo-hamburger {
display: flex;
align-items: center;
}
.logo
{
margin-left: 20px;
}
.hamburger
{
margin-right: 20px;
}
.home-navbar-menu {
font-size: 1.2rem;
list-style: none;
display: flex;
flex-direction: row;
}
@media screen and (min-width: 724px) {
.home-navbar-menu {
display: flex!important;
}
}
@media screen and (max-width: 724px) {
.hamburger {
display: block;
}
.home-navbar-logo-hamburger {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.home-navbar {
display: flex;
flex-direction: column;
}
.home-navbar-menu {
display: flex;
flex-direction: column;
justify-content: center;
display: none;
}
.home-navbar-menu a:hover {
border-bottom: none;
}
.home-navbar-menu li {
margin: 10px 20px;
padding-left: 10px;
text-align: center;
border-bottom: #28a745 2px solid;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/bdb2495b74.js" crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin="anonymous"></script>
</head>
<body>
<div class="home-navbar">
<div class="home-navbar-logo-hamburger">
<!-- LOGO -->
<h1 class="logo">
<span class="text-primary"><i class="fas fa-book-open"></i> dA</span>Ba
</h1>
<!-- EO: LOGO -->
<!-- Hamburger menu -->
<div class="hamburger">
<i id="hamburger" class="fa-2x fas fa-bars"></i>
</div>
<!-- EO: Hamburger menu -->
</div>
<!-- Menus-->
<ul class="home-navbar-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
</ul>
<!-- EO: Menus -->
</div>
<!-- Content -->
<header class="home-header">
<div class="content">
<h1>Test!</h1>
<h2>Test test test</h2>
</div>
</header>
<!-- EO: Content -->
<!-- Footer -->
<footer class="home-footer">
<div>© Acme 2021</div>
</footer>
<!-- EO: Footer -->
</body>
</html>推荐阅读
- c++ - 使用 CPLEX 的多目标二进制整数问题的动态权重更新
- matlab - 使用 Matlab 从一张图中的许多 polyfitted 曲线中获取最大值
- amazon-web-services - 如何使用 CodeBuild 将生成的文件夹内容上传到 S3？
- python-3.x - 如何将尾随零添加到熊猫数据框列？
- spring-boot - mapstruct 中的自定义方法
- c++ - 为什么自动删除返回值中的引用？
- java - TreeCellRenderer 中的标签宽度不正确
- javascript - 在浏览器（vuex + axios）加载时，带有多个 JSON 文件的模拟数据似乎被覆盖
- ruby-on-rails - Rails 6.0.0 TypeError - 没有将 nil 隐式转换为字符串：
- redirect - 如何在 HAProxy 中进行内部重定向？