如何防止水平滚动，故意将元素放在屏幕外？

Question

单击按钮时，我有一个从右侧滑入的菜单。我目前设置为

body, html {
     overflow-x: hidden;
}    
nav {
     position: absolute;
     top: 0px;
     right: -300px;
     width: 300px;
}

单击按钮时，应该将正确的位置设置为right: 0px;。 由于我使用了这个位置，当我使用overflow-x: hidden;时它不起作用。我能做些什么来解决这个问题？