点击链接后关闭下拉菜单

我有一个下拉菜单，几乎只包含一个我无法解决的错误/问题。我的导航链接到主页上的不同区域。因此，在主页上，用户可以点击导航链接，这将立即将他们带到页面上所需的位置。

我的问题出现在用户点击导航链接时，他们会被带到该位置，但下拉菜单不会关闭

除此之外，我还想从上到下为我的菜单设置动画，这样它看起来更优雅。我尝试了很多方法，但似乎都做不到。。希望你能帮我！

.toggle, [id^=drop] {
display: none;
}
nav {
margin:0;
padding: 0;
float: center;
position: absolute;
z-index: 400;
border: solid 0px;
}
nav ul {
float: center;
position: relative;
width: 100vw;
}
.menu{
background: rgb(233, 233, 233);
background: linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%);
background: -webkit-linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%);
}
nav ul li {
text-align: center;
position: relative;
margin: 0px;
display:left;
}
nav a {
font-family: 'OggR';
color: black;
font-size:14px;
text-decoration:none;
position: relative;
text-align: center;
transition: 0.3s;
}
.toggle + a, .menu {
display: none;
}
.toggle {
position: fixed;
display: block;
padding:4px 20px;
color: rgb(233, 233, 233);
font-size:20px;
text-decoration:none;
width: 20px;
height: 30px;
z-index: 9999999999999999999;
}

<nav>
<label for="drop" class="toggle">&#x2630;</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>
<li><a href="#abstract">ABSTRACT</a></li>
<li><a href="#introduction">INTRODUCTION</a></li>
<li><a href="#chapterI">I. <br>THE MEANING OF NOSTALGIA IN CULTURAL HISTORY</a></li>
<li><a href="#chapterII">II. <br>CONTEMPORARY NOSTALGIA</a></li>
<li><a href="#chapterIII">III. <br>THE TWO FACES OF NOSTALGIA</a></li>
<li><a href="#conclusion">CONCLUSION</a></li>
<li><a href="#bibliography">BIBLIOGRAPHY</a></li>
</ul>
</nav>

不需要javascript，只需将其添加到您的css中即可：

#drop:checked + .menu {
display: block;
}

代码笔：https://codepen.io/manaskhandelwal1/pen/poExqJv

html。我添加了ids:

<nav>
<label for="drop" class="toggle" id="toggle">&#x2630;</label>
<input type="checkbox" id="drop" />
<ul class="menu" id="menu">
<li>
<li><a class="navLink" href="#abstract">ABSTRACT</a></li>
<li><a class="navLink" href="#introduction">INTRODUCTION</a></li>
<li><a class="navLink" href="#chapterI">I. <br>THE MEANING OF NOSTALGIA IN CULTURAL HISTORY</a></li>
<li><a class="navLink" href="#chapterII">II. <br>CONTEMPORARY NOSTALGIA</a></li>
<li><a class="navLink" href="#chapterIII">III. <br>THE TWO FACES OF NOSTALGIA</a></li>
<li><a class="navLink" href="#conclusion">CONCLUSION</a></li>
<li><a class="navLink" href="#bibliography">BIBLIOGRAPHY</a></li>
</ul>
</nav>

css：我给了菜单绝对位置，我添加了顶部：-100%，使其成为"dissapear"；，我删除了nav的位置，我添加了class.menu.open来处理打开，我为动画添加了transition到.menu。

.toggle,
[id^=drop] {
display: none;
}
nav {
margin:0;
padding: 0;
float: center;
z-index: 400;
border: solid 0px;
}
nav ul {
float: center;
position: relative;
width: 100vw;
}
.menu{
position:absolute;
top:-100%;
background: rgb(233, 233, 233);
background: linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%);
background: -webkit-linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%);
transition: 0.3s ease-in;
}
.menu.open{
top:30px;
}
nav ul li {
text-align: center;
position: relative;
margin: 0px;
display:left;
}
nav a {
font-family: 'OggR';
color: black;
font-size:14px;
text-decoration:none;
position: relative;
text-align: center;
transition: 0.3s;
}

.toggle {
cursor:pointer;
position: fixed;
display: block;
padding:4px 20px;
color:black;
font-size:20px;
text-decoration:none;
width: 20px;
height: 30px;
z-index: 9999999999999999999;
}

这是js:

//adding the click event to the toggle
let menu = document.getElementById('menu')
let toggle = document.getElementById('toggle')
let links = document.getElementsByClassName('link')
for(let i = 0; i < links.length; i++){
links[i].addEventListener('click', () => {
menu.classList.remove('open')
toggle.innerHTML = '&#x2630'
})
}

document.getElementById('toggle').addEventListener('click', () => {

if(menu.classList.contains('open')){
menu.classList.remove('open')
toggle.innerHTML = '&#x2630'
} else {
menu.classList.add('open')
toggle.innerHTML = 'X'
}
})

编辑：我将类添加到中，并循环浏览它们，并在单击每个链接时给出事件，这样当您单击时，它将关闭导航。

现在检查代码笔https://codepen.io/Elnatan/pen/PoGyXwx你可以在这里看到

要在您的页面中实现它：

添加到每个<a class="navLink">(检查上面的HTML(
将id添加到manu元素并切换元素<ul class="menu" id="menu">和<label for="drop" class="toggle" id="toggle">☰</label>
添加到您的css.menu.open {display:block}
创建navHandler.js文件并将其添加到HTML中```5.复制此代码并将其传递到navHandler.js文件中：

let menu = document.getElementById('menu')
let toggle = document.getElementById('toggle')
let links = document.getElementsByClassName('navLink')
for(let i = 0; i < links.length; i++){
links[i].addEventListener('click', () => {
menu.classList.remove('open')
})
}

如果你正确地遵循这些步骤，它应该可以工作

相关内容

最新更新

热门标签：