我正在尝试编写一个从屏幕右侧拉出的简单导航栏，并且我有以下代码。
var isOpen = false;
function openNav() {
if (false == isOpen) {
document.getElementById("myNewsNav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
//document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
isOpen = true;
} else {
closeNav();
}
}
function closeNav() {
document.getElementById("myNewsNav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
isOpen = false;
}body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.newsnav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.newsnav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.newsnav a:hover {
color: #f1f1f1;
}
.newsnav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="myNewsNav" class="newsnav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()"> open</span>
</div>
</body>它在左侧工作正常。我尝试更改左侧边距并向 CSS 添加 float: right 属性，但它仍然没有从右侧拉动导航栏。它始终显示在左侧。这里出了什么问题？
编辑:
有什么方法可以让 slider 仅从特定的 div 开始吗？
<div id="Slider_Should_begin_From_This_Point_of_screen"></div>
例如:我希望 slider 仅从该 div 开始滑入和滑出。
最佳答案
您只需要做两件事。
1)在函数“openNav”中将marginLeft更改为marginRight
document.getElementById("main").style.marginRight = "250px";
2) .newsnav css 有一个属性“left”设置为 0，您必须将其更改为 right:0；
.newsnav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
这就是你所要做的。
关于javascript - 导航栏位于右侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48262961/