侧边栏导航切换与单个按钮

2018-06-26 19:35:09

我已经将下面的侧边栏导航实现为一个简单的管理员。我有它的工作和移动到右侧。我希望使用单个按钮而不是单独的关闭和打开按钮显示并消失。我尝试使用onToggle函数修改JS，如果isOpen为null，它将打开面板，然后将isOpen设置为true，然后在下次运行时删除isOpen。我对JS非常陌生，而且失败了，所以我想我会在这里问。我怎样才能让这只小狗出现并随着一个按钮消失？

http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav

非常感谢你。

<!DOCTYPE html>
<html>
<style>
body {
    font-family: "Lato", sans-serif;
}

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

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px !important;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
<body>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<div id="mySidenav" class="sidenav">
  <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>

<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>


<script>
function openNav() {
    var e = document.getElementById("mySidenav");
    if (e.style.width == '250px')
    {
        e.style.width = '0px';
    }
    else 
    {
        e.style.width = '250px';
    }
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
</script>

</body>
</html>

这是在openNav（）方法中几乎没有修改的代码 。要使用按钮触发sideNavbar，需要在触发sideNavBar之前和之后才可见。所以我已经将视图按钮移动到顶部，并且我修改了sidenav的top属性，即使激活后仍然可以看到触发器按钮

你可以在这里看到这个：https://jsfiddle.net/ngohrvk1/

这段代码会帮助你，我已经创建了一个函数并在元素上保存了data-isshown属性，以确定元素是否显示，我们可以根据宽度来决定它，但这是更通用的方法

function toggleNav() {
  var element = document.getElementById("mySidenav")
  var shown = element.getAttribute("data-isshown");
  if (shown == "true") {
    element.setAttribute("data-isshown", "false");
    element.style.width = "0";

  } else {
    element.setAttribute("data-isshown", "true");
    element.style.width = "250px";
  }
}

整个代码看起来像这样

function toggleNav() {
  var element = document.getElementById("mySidenav")
  var shown = element.getAttribute("data-isshown");
  if (shown == "true") {
    element.setAttribute("data-isshown", "false");
    element.style.width = "0";

  } else {
    element.setAttribute("data-isshown", "true");
    element.style.width = "250px";
  }
}

body {
  font-family: "Lato", sans-serif;
}
.sidenav {
  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;
}
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s
}
.sidenav a:hover,
.offcanvas a:focus {
  color: #f1f1f1;
}
.closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px !important;
  margin-left: 50px;
}
@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="toggleNav()">×</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="toggleNav()">☰ open</span>

我知道这个问题是用JavaScript标记的，你可能不想更改标记或添加新的元素。但是，如果可以的话，这是一个纯粹的CSS解决方案。

body {
  margin: 0;
}
.sidebar-toggle {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  padding: 10px;
  background: red;
  color: white;
}
#sidebar-toggle-input {
  display: none;
}
#sidebar-toggle-input+label:before {
  content: "➡️";
}
#sidebar-toggle-input:checked + label:before {
  content: "❌"
}
.sidebar {
  position: fixed;
  width: 200px;
  transition: 0.3s;
  background: blue;
  height: 100vh;
  top: 0;
  left: 0;
  transform: translateX(-100%);
}
#sidebar-toggle-input:checked ~ .sidebar {
  transform: none;
}

<input type="checkbox" id="sidebar-toggle-input" />
<label class="sidebar-toggle" for="sidebar-toggle-input"></label>
<div class="sidebar"></div>

链接地址: http://www.djcxy.com/p/74995.html

上一篇: Sidebar navigation toggle with single button

下一篇: Reset Timeout of the same timer in a for loop in Javascript