右侧导航栏答案

【问题标题】：Nav bar to the right右侧导航栏
【发布时间】：2018-01-18 16:32:45
【问题描述】：

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

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

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

编辑：

任何方式，我可以让滑块只从特定的 div 开始吗？

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

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

【问题讨论】：

标签： javascript html css slider

【解决方案1】：

你只需要做两件事。

1) 在函数“openNav”中将marginLeft改为marginRight

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

2) .newsnav css 有一个属性“left”设置为 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;
}

这就是你所要做的。

【讨论】：

【解决方案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 元素下方。
用额外的div 包装了#myNewsNav div
注释掉不必要的东西

【讨论】：

【解决方案3】：

您的位置固定为 left: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>

【讨论】：

【解决方案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";

【讨论】：