Question

我正在尝试从屏幕右侧写一个简单的导航栏，我有以下代码。

＆＃13;

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;
}

＆＃13;

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;
}

＆＃13;

<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()">&times;</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>

＆＃13;

左侧工作正常。我尝试更改左边距并将float: right属性添加到css，但仍然没有从右侧拉出导航栏。它总是显示在左侧。这有什么不对？

编辑：

无论哪种方式，我都能让滑块从特定的div开始吗？

<div id="Slider_Should_begin_From_This_Point_of_screen"></div>

例如：我希望滑块仅从此div开始滑入和滑出。

Answer 1

你需要做两件事。

1）在函数＆＃34; openNav＆＃34;

中将marginLeft更改为marginRight

document.getElementById("main").style.marginRight = "250px";

2）.newsnav css有一个属性＆＃34; left＆＃34;设置为0，您必须将其更改为右：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;
}

这就是你所要做的一切。

Answer 2

根据您更新的请求，它现在从span元素的右侧和下方滑动：

var isOpen = false;

function openNav() {
  if(isOpen == false) {
    document.getElementById("myNewsNav").style.width = "250px";
    //document.getElementById("main").style.marginRight = "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.marginRight = "0";
  //document.body.style.backgroundColor = "white";
  isOpen=false;
}

body {
  font-family: "Lato", sans-serif;
  transition: background-color .5s;
}

.newsnav {
  /*height: 100%;*/
  width: 0;
  position: relative; /* modified */
  z-index: 999; /* changed to a higher number */
  background-color: #111;
  overflow-x: hidden;
  transition: .5s;
  padding-top: 60px;
}

.wrapper {
  position: absolute; /* taken out of the document flow so that it doesn't affect other elements placed below */
  right: 0; /* positioned at the right side of the screen */
  z-index: 999; /* just in case */
}

.newsnav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: .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;
}

<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 class="wrapper">
    <div id="myNewsNav" class="newsnav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Clients</a>
      <a href="#">Contact</a>
    </div>
  </div>
  <p>Lorem ... so that you can see that this element isn't affected ...</p>
</div>

值得注意的变化：

由于文档流程的原因，将#myNewsNav div移到span元素下方。
使用其他#myNewsNav

div

注释掉不必要的东西

Answer 3

你的位置固定为左：0将保持在左侧。

function closeNav() {
    document.getElementById("myNewsNav").style.width = "0";
    document.getElementById("main").style.marginRight= "0";
    document.body.style.backgroundColor = "white";
    isOpen=false;
}

var isOpen = false;
function openNav() {
    if(false == isOpen) {
        document.getElementById("myNewsNav").style.width = "250px";
        document.getElementById("main").style.marginRight = "250px";
        //document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
        isOpen=true;
    }else{
        closeNav();
    }
}

body {
    font-family: "Lato", sans-serif;
    transition: background-color .5s;
}

.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;
}

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<div id="myNewsNav" class="newsnav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</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>

<script>


</script>

</body>
</html>

Answer 4

兄弟 - 右：0：）

.newsnav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0; // !here should right:0
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

在openNav（）和closeNav（）函数中将marginLeft替换为marginRight：

document.getElementById("main").style.marginLeft = "250px";

导航栏向右

4 个答案: