javascript - 我希望我的导航栏在单击移动尺寸切换时与内容重叠
问题描述
我希望我的导航栏在单击移动尺寸切换时与内容重叠。展开导航栏时我不希望我的内容向下滚动以下是我网站的html和css代码以及js脚本如何编码
$(function() {
$(".toggle").on("click", function() {
if ($(".item").hasClass("active")) {
$(".item").removeClass("active");
$(this).find("a").html("<i class='fas fa-bars'></i>");
} else {
$(".item").addClass("active");
$(this).find("a").html("<i class='fas fa-times'></i>");
}
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#body {
margin-left: 10%;
margin-right: 10%;
}
/* nav */
nav {
padding-bottom: 30px;
padding-top: 85px;
}
ul {
list-style-type: none;
}
ul.menu {
padding-left: 0;
margin-bottom: 0;
}
li a {
text-decoration: none;
color: #1D1D1D;
padding-left: 1rem;
}
.menu li {
white-space: nowrap;
}
.toggle a {
font-size: 25px;
}
/* mobile menu*/
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.toggle {
order: 1;
}
.item {
width: 100%;
text-align: right;
order: 2;
display: none;
}
.item.active {
display: block;
}
/* table */
@media all and (min-width: 600px) {
.menu {
justify-content: center;
}
.logo {
flex: 1;
}
.toggle {
flex: 1;
text-align: right;
}
}
/* desktop */
@media all and (min-width: 900px) {
.item {
display: block;
width: auto;
}
.toggle {
display: none;
}
.logo {
order: 0;
}
.item {
order: 1;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<div id="body">
<!--navbar-->
<nav>
<ul class="menu ">
<li class="logo"><img src="...jpg" width="100" height="100" alt="" /></li>
<li class="item active"><a href="motion-graphics.html">Motion Graphics</a></li>
<li class="item active"><a href="advertising.html">Advertising</a></li>
<li class="item active"><a href="animation-banner.html">Animation banner</a></li>
<li class="item active"><a href="others.html">Others</a></li>
<li class="item active"><a href="about.html">About</a></li>
<li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js"></script>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an </p>
</div>
解决方案
这是您的固定代码HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<div id="body">
<!--navbar-->
<nav>
<ul class="menu">
<li class="logo"><img src="...jpg" width="100" height="100" alt="" /></li>
<li class="item"><a href="motion-graphics.html">Motion Graphics</a></li>
<li class="item"><a href="advertising.html">Advertising</a></li>
<li class="item"><a href="animation-banner.html">Animation banner</a></li>
<li class="item"><a href="others.html">Others</a></li>
<li class="item"><a href="about.html">About</a></li>
<li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js"></script>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an
</p>
</div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#body {
margin-left: 10%;
margin-right: 10%;
}
/* nav */
nav {
padding-top: 10px;
position: relative;
width: 100%;
height: 150px;
}
ul {
list-style-type: none;
}
ul.menu {
padding-left: 0;
margin-bottom: 0;
}
li a {
text-decoration: none;
color: #1D1D1D;
padding-left: 1rem;
}
.menu li {
white-space: nowrap;
}
.toggle a {
font-size: 25px;
}
/* mobile menu*/
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
position: absolute;
width: 100%;
background: #fff;
z-index: 2;
}
.toggle {
order: 1;
}
.item {
width: 100%;
text-align: right;
order: 2;
display: none;
}
.item.active {
display: block;
}
/* table */
@media all and (min-width: 600px) {
.menu {
justify-content: center;
}
.logo {
flex: 1;
}
.toggle {
flex: 1;
text-align: right;
}
}
/* desktop */
@media all and (min-width: 900px) {
.item {
display: block;
width: auto;
}
.toggle {
display: none;
}
.logo {
order: 0;
}
.item {
order: 1;
}
}
推荐阅读
- c# - 具有 TestCase() 属性的 C# 单元测试不清理数据库/缓存?
- c# - 在 wpf 中绑定 Combobox 的 SelectedItem
- java - groovy.lang.Binding 属性和变量的区别
- google-cloud-platform - BigQuery - 访问被拒绝和凭据问题
- laravel - 我需要解释一下这个更新代码是如何工作的(Laravel)
- symfony - 如何将 __toString 方法用于选择类型字段
- javascript - Angular 6过滤多个表列
- concurrency - 在 Erlang 中传递的消息不会打印到控制台
- c# - 如何将域上下文绑定到数据网格?Ria 服务 + Silverlight
- powershell - 尝试基于百分比实现 if 语句