javascript - 如何用我的导航栏解决这个问题？
问题描述
我有这段代码（下面）在移动设备上制作一个汉堡包图标，当用户单击它时，会出现一个波浪并覆盖屏幕上的所有内容。但我有一个问题是波无法覆盖输入
我的问题是如何使输入在波浪下消失？
这是 HTML：
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel=”stylesheet” href=”css/bootstrap-responsive.css”>
<link rel="stylesheet" href="css.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<nav id="nav-bar">
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<h3 id="brand">BRAND</h3>
<ul class="nav-links">
<li class="menu"><a class="items" href="#">Home</a></li>
<li class="menu"><a class="items" href="#">Contact</a></li>
<li class="menu"><a class="items" href="#">Create Account</a></li>
<li class="menu"><a class="items" href="#">Login</a></li>
</ul>
</nav>
<section class="s1">
<header class="shorten">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in wow zoomIn" data-wow-delay="0.3s">Hello world</div>
<div class="intro-heading wow pulse" data-wow-delay="2.0s">Hello world</div>
<div class="row wow rotateInUpLeft" data-wow-delay="0.3s">
<div class="col-sm-8 col-sm-offset-2">
<form method="post" accept-charset="utf-8" id="shorten" class="form-inline"><div style="display:none;"><input type="hidden" name="_method" value="POST" /><input type="hidden" name="_csrfToken" autocomplete="off"/></div>
<div class="form-group">
<input type="text" name="url" placeholder="Your URL Here" required="required" class="form-control input-lg" id="url" />
<input type="hidden" name="ad_type" value="2" />
<button class="btn-captcha" id="invisibleCaptchaShort" type="submit"><img src="Right-Arrow.png" alt="" /></button></div>
<div style="display:none;"><input type="hidden" name="_Token[fields]" autocomplete="off" /></div>
</form>
<div class="shorten add-link-result"></div>
</div>
</div>
</div>
</div>
</header>
/section>
这是CSS代码：
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* THIS CSS CODE FOR THE NavBar */
#nav-bar {
display: flex;
justify-content: space-between;
height: 9vh;
background: #ffd000;
padding-top: 1rem;
}
#brand{
padding-top: 0.5rem;
padding-left: 4rem;
}
.nav-links {
display: flex;
list-style: none;
width: 35%;
height: 100%;
justify-content: space-around;
align-items: center;
margin-left: auto;
margin-right: 2rem;
}
.items {
color: white;
text-decoration: none;
font-size: 16px;
font-family: 'Roboto', sans-serif;
}
@media screen and (max-width: 950px) {
.line {
width: 30px;
height: 3px;
background: white;
margin: 5px;
}
.nav-links{
position: absolute;
}
#brand{
padding-top: 0.5rem;
padding-left: 0;
}
#nav-bar {
position: relative;
padding-top: 0;
}
.hamburger {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
}
.nav-links {
background: #5b78c7;
height: 94.8vh;
width: 100%;
margin-right: 0;
flex-direction: column;
clip-path: circle(100px at 100% -18%);
-webkit-clip-path: circle(100px at 100% -18%);
transition: all 2s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
pointer-events: all;
}
.menu {
opacity: 0;
}
.items {
font-size: 20px;
}
.menu:nth-child(1) {
transition: all 0.5s ease 0.3s;
}
.menu:nth-child(2) {
transition: all 0.5s ease 0.5s;
}
.menu:nth-child(3) {
transition: all 0.5s ease 0.7s;
}
.menu:nth-child(4) {
transition: all 0.5s ease 0.9s;
}
.menu:nth-child(5) {
transition: all 0.5s ease 1.1s;
}
.menu.fade {
opacity: 1;
}
}
/* THIS CSS CODE FOR THE FORM */
.s1 {
height: 90vh;
width: 100%;
background: #ffd000;
overflow: hidden;
}
@media (min-width: 768px){
header .intro-text {
padding-top: 200px;
padding-bottom: 200px;
}
}
header .intro-text {
text-align: center;
padding-top: 100px;
padding-bottom: 50px;
}
@media (min-width: 768px){
header .intro-text .intro-lead-in {
font-size: 23px;
line-height: 23px;
margin-bottom: 25px;
}
}
header .intro-text .intro-lead-in {
font-family: Montserrat,sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 27px;
line-height: 22px;
margin-bottom: 25px;
}
header .intro-text .intro-heading {
font-size: 60px;
line-height: 60px;
margin-bottom: 40px;
}
@media (min-width: 768px){
.col-sm-offset-2 {
margin-left: 16.66666667%;
}
}
@media (min-width: 768px){
.col-sm-8 {
width: 66.66666667%;
}
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
input {
line-height: normal;
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0;
}
.shorten #shorten .form-group {
position: relative;
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 768px){
.form-inline .form-group {
margin-bottom: 0;
vertical-align: middle;
}
}
.form-group {
margin-bottom: 15px;
}
@media (min-width: 992px){
.shorten #shorten input.input-lg {
width: 555px;
}
}
@media (min-width: 768px){
.shorten #shorten input.input-lg {
width: 470px;
}
}
.shorten #shorten input.input-lg {
background-color: rgba(255,255,255,.35);
color: #fff;
border: none;
border-radius: 19px;
height: 53px;
padding-right: 60px;
}
@media (min-width: 768px){
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
}
@media (min-width: 576px){
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
margin-left: auto;
}
}
.input-lg {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
.form-control {
display: block;
width: 60vh;
height: 60px;
padding: 6px 12px;
font-size: 17px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
}
.shorten #shorten button {
background-color: transparent;
border: none;
padding: 0;
position: absolute;
right: 7px;
top: 6px;
}
这是 JavaScript 代码：
const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
hamburger.addEventListener("click", () => {
navLinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle("fade");
});
});
解决方案
您应该只在“.nav-links.open”中添加“z-index: 1”样式
像下面这样编辑你的 CSS：
.nav-links.open {
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
pointer-events: all;
z-index: 1; //Add this line
}推荐阅读
- javascript - 先决条件，使用 fetch()，html 脚本
- chart.js - 为什么 Chart.js 呈现时髦？
- python - 使用 unittest 修补 python 测试方法
- pine-script - 向第 3 方发送事件
- javascript - 如何将 3 个值插入一个按钮，然后在 onClick 中分别恢复
- django - TypeError: on_delete 必须是可调用的。（'on_delete 必须是可调用的。'）
- r - 如何在 R 中使用 Xtable 赋予重要性
- sqlite - 无法使用 DB Browser 读取 SQLite db 文件中的数据 - React Native
- r - 将美元添加到数值而不转换为字符
- javascript - JavaScript 返回所有警报而不是一个。我该如何解决？