如何使导航栏从右幻灯片滑动

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> 

hello this is my menu bar code.i want my navigation bar to be open when i click on the hamburger icon from right side with transition (smooth) effect with width 50% & remaining part will be overlay. " https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay " this link has the same effect but from left right.

Answer 1

getElementsByClassName function returns an array so using getElementsByClassName("menu-overlay").style would be incorrect. Instead use it like so:

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