如何使導航欄從右幻燈片滑動

Question

 function openNav() { document.getElementsByClassName("menu-overlay").style.width = "50%"; } function closeNav() { document.getElementsByClassName("menu-overlay").style.width = "0"; } 

 .menu-overlay { display: none; top: 0; height: 100%; width: 0%; position: absolute; z-index: 1; right: 0; background-color: #ef4f50; overflow-x: hidden; transition: 0.5s; } .menu-body{ position: fixed; top: 0; z-index: 99999; right: 0; height: 100%; background-color: #ef4f51; width: 35%; float: right; } span.closer { font-size: 50px; float: right; color: white; padding: 30px; } .menu-pan{ width: 100%; float: left; padding: 0 80px; } .menu-pan li { padding: 10px 0; } .menu-pan li a { color: white; text-decoration: none; font-size: 32px; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <div class="header-top clearfix"> <a href="https://www.google.co.in/" target="_blank" class="pull-right btn btn-danger btn-round">DONATE NOW</a> <a class="l-right toggle-menu" href="#" onclick="openNav()"> <span class="icon-menu"></span> </a> </div> <div class="menu-overlay"> <div class="menu-body"> <a href="#"><span class="closer"><i class="icon-close icons" onclick="closeNav()"></i></span></a> <ul class="menu-pan"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Our Purpose</a></li> <li><a href="#">HOME</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </header> 

你好，這是我的菜單條形碼。當我從右側單擊帶有轉變（平滑）效果的漢堡包圖標時，我的導航欄將打開，寬度為50％，其余部分將被覆蓋。 “ https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay ”此鏈接具有相同的效果，但從左到右。

Answer 1

getElementsByClassName函數返回一個數組，因此使用getElementsByClassName("menu-overlay").style將不正確。 而是像這樣使用它：

function openNav() {
     document.getElementsByClassName("menu-overlay")[0].style.width = "50%";
}
function closeNav() {
     document.getElementsByClassName("menu-overlay")[0].style.width = "0";
}