[英]I would like to open/close a menu with one button, I want to use only Javascript
function openNav() { document.getElementById("myNav").style.height = "100%"; } function closeNav() { document.getElementById("myNav").style.height = "0%"; }
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">☰</a>
You have to explain it better but I think I understand what you want.你必须更好地解释它,但我想我明白你想要什么。
Just use display block.只需使用显示块。
Something like this :像这样的事情:
function openNav() {
var menu = document.getElementById("myNav").style.display;
If (menu == "block") {
menu="none";
}else{
menu="block";
}}
// Open and close div
<a href="javascript:void(0)" class="closebtn" onclick="openNav()">☰</a>
I'm not sure if the syntax is right because I'm writing this from my phone.我不确定语法是否正确,因为我是用手机写的。
But I think it's works.但我认为这是有效的。
Lets me know.让我知道。
it should be toggle function应该是切换功能
function toggleNav(){ var myNav = document.getElementById("myNav"); if(!myNav) return; myNav.style.display = myNav.style.display.toLowerCase() != 'none'? 'none' : 'block'; }
<a href="javascript:void(0)" class="closebtn" onclick="toggleNav()">☰</a> <div id="myNav" style="width: 100px; height: 100px; background: #ff0000; display:none;"></div>
<div href="javascript:void(0)" class="closebtn" onclick="toggleNav()">☰</div>
<div id="myNav" class="overlay">
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<style>
html, body{
margin: 0;
}
.overlay {
height: 0%;
width: 100%;
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
}
.overlay-content {
position: relative;
text-align: center;
margin-top: 50px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.closebtn{
position: absolute;
float: right;
right: 15px;
top: 10px;
font-size: 30px;
cursor: default;
color: #eee
}
</style>
<script>
function toggleNav(){
var myNav = document.getElementById("myNav");
if(!myNav) return;
myNav.style.display = myNav.style.display.toLowerCase() != 'none'? 'none' : 'block';
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.