侧边栏打开/关闭

时间：2018-09-02 14:06:46

标签： javascript html css

我正在尝试建立一个网站，我希望一个按钮关闭并打开侧边栏，而不是我当前拥有的两个箭头。希望有人可以编辑我的摘录并帮助我解决它。请注意，我是JS的初学者，我真的不知道它的工作原理。预先谢谢你！

这就是我得到的箭头：

function openNav() {
  document.getElementById("sidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("sidenav").style.width = "0";
}
body {
  background-color: #fcfcfc;
  font-family: Roboto, Arial, sans-serif;
}

.header {
  width: 100%;
  height: 70px;
  top: 0;
  left: 0;
  position: fixed;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.toggle {
  width: 250px;
  height: 70px;
  border-right: 1px solid #eee;
  position: fixed;
  top: 0;
  left: 0;
}

.sidenav {
  height: 100%;
  width: 250px;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 1;
  overflow-x: hidden;
  transition: 0.3s;
  margin-top: 71px;
  background-color: #fff;
  border-right: 1px solid #eee;
  line-height: 80px;
  overflow: hidden;
}

.close-button {
  line-height: 70px;
  color: #eee;
  font-size: 25px;
  margin-left: 20px;
  cursor: pointer
}

.close-button:hover {
  color: #b9b9b9;
}

.sidebar-videos {
  font-size: 18px;
  text-align: center;
}

.uploadvideo {
  color: #707070;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  width: 250px;
  height: 80px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}

.thumbnail {
  border: 1px solid #eee;
  height: 120px;
  width: 200px;
  margin-left: 22px;
  cursor: pointer;
  margin-bottom: 15px;
}

.thumbnail:hover {
  border: 1px solid #b9b9b9;
}

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
  cursor: pointer;
  border: 1px solid #eee;
  background-color: #8BC34A;
  padding: 13px 15px;
  color: #fff;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.search {
  float: right;
  width: 250px;
  height: 70px;
  border-left: 1px solid #eee;
}
<!DOCTYPE html>
<html>

<head>
  <title>Video CMS</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="js/sidebar.js"></script>
</head>

<body>
  <div class="header">
    <div class="search"></div>
  </div>
  <div class="toggle">
    <div class="group-buttons"></div>
    <span class="close-button" onclick="closeNav()">&#8592;</span>
    <span class="close-button" onclick="openNav()">&#8594;</span>
  </div>
  <div id="sidenav" class="sidenav">
    <div class="uploadvideo">
      <div class="upload-btn-wrapper">
        <button class="btn">Video Uploaden</button>
        <input type="file" name="myfile" />
      </div>
    </div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
  </div>
</body>

</html>

4 个答案:

答案 0 :(得分：3)

只需给打开按钮一个display:none：

.sidebar-button {
  line-height: 70px; 
  color: #eee; 
  font-size: 25px; 
  margin-left: 20px;
  cursor:pointer
}

.sidebar-button:hover {
     color: #b9b9b9;
}

/** The open button isn't visible by default, since the sidebar is already open **/

#open-button {
  display:none;
}

，然后根据侧边栏是否打开来更改具有display:none和display:block的按钮：

function openNav() {
  document.getElementById("sidenav").style.width = "250px";
  document.getElementById("close-button").style.display = "block";
  document.getElementById("open-button").style.display = "none";
}

function closeNav() {
  document.getElementById("sidenav").style.width = "0";
  document.getElementById("close-button").style.display = "none";
  document.getElementById("open-button").style.display = "block";
}

您可能还应该给按钮一个user-select: none;，以防止它们选择文本按钮。

完整代码：

function openNav() {
  document.getElementById("sidenav").style.width = "250px";
  document.getElementById("close-button").style.display = "block";
  document.getElementById("open-button").style.display = "none";
}

function closeNav() {
  document.getElementById("sidenav").style.width = "0";
  document.getElementById("close-button").style.display = "none";
  document.getElementById("open-button").style.display = "block";
}
body {
  background-color: #fcfcfc;
  font-family: Roboto, Arial, sans-serif;
}

.sidebar-button {
  line-height: 70px;
  color: #eee;
  font-size: 25px;
  margin-left: 20px;
  cursor: pointer;
  user-select: none;
}

.sidebar-button:hover {
  color: #b9b9b9;
}


/** The open button isn't visible by default, since the sidebar is already open **/

#open-button {
  display: none;
}

.header {
  width: 100%;
  height: 70px;
  top: 0;
  left: 0;
  position: fixed;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.toggle {
  width: 250px;
  height: 70px;
  border-right: 1px solid #eee;
  position: fixed;
  top: 0;
  left: 0;
}

.sidenav {
  height: 100%;
  width: 250px;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 1;
  overflow-x: hidden;
  transition: 0.3s;
  margin-top: 71px;
  background-color: #fff;
  border-right: 1px solid #eee;
  line-height: 80px;
  overflow: hidden;
}

.sidebar-videos {
  font-size: 18px;
  text-align: center;
}

.uploadvideo {
  color: #707070;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  width: 250px;
  height: 80px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}

.thumbnail {
  border: 1px solid #eee;
  height: 120px;
  width: 200px;
  margin-left: 22px;
  cursor: pointer;
  margin-bottom: 15px;
}

.thumbnail:hover {
  border: 1px solid #b9b9b9;
}

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
  cursor: pointer;
  border: 1px solid #eee;
  background-color: #8BC34A;
  padding: 13px 15px;
  color: #fff;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.search {
  float: right;
  width: 250px;
  height: 70px;
  border-left: 1px solid #eee;
}
<!DOCTYPE html>
<html>

<head>
  <title>Video CMS</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="js/sidebar.js"></script>
</head>

<body>
  <div class="header">

    <div class="search"></div>
  </div>
  <div class="toggle">
    <div class="group-buttons"></div>
    <span class="sidebar-button" id="close-button" onclick="closeNav()">&#8592;</span>
    <span class="sidebar-button" id="open-button" onclick="openNav()">&#8594;</span>
  </div>
  <div id="sidenav" class="sidenav">
    <div class="uploadvideo">
      <div class="upload-btn-wrapper">
        <button class="btn">Video Uploaden</button>
        <input type="file" name="myfile" />
      </div>
    </div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
  </div>
</body>

</html>

答案 1 :(得分：2)

如果我理解了这个问题，可以尝试以下操作：

function openCloseNav() {
    console.log(document.getElementById("sidenav").style.width)
    if (document.getElementById("sidenav").style.width == '0px') {
        document.getElementById("sidenav").style.width = "250px";
    } else {
       document.getElementById("sidenav").style.width = '0px'
    }
}
body {
  background-color: #fcfcfc;
  font-family: Roboto, Arial, sans-serif;
}

.header {
  width: 100%;
  height: 70px;
  top: 0;
  left: 0;
  position: fixed;
  background-color: #fff;
  border-bottom: 1px solid #eee;

}

.toggle {
     width: 250px;
     height: 70px;
     border-right: 1px solid #eee;
     position: fixed;
     top: 0;
     left: 0;
}

.sidenav {
    height: 100%;
    width: 250px;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 1;
    overflow-x: hidden;
    transition: 0.3s;
    margin-top: 71px;
    background-color: #fff;
    border-right: 1px solid #eee;
    line-height: 80px;
    overflow: hidden;
}


.close-button {
  line-height: 70px; 
  color: #eee; 
  font-size: 25px; 
  margin-left: 20px;
  cursor:pointer
}

.close-button:hover {
     color: #b9b9b9;
}

.sidebar-videos {
    font-size: 18px;
  text-align: center;
}

.uploadvideo {
  color: #707070;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  width: 250px;
  height: 80px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}

.thumbnail {
  border: 1px solid #eee;
  height: 120px;
  width: 200px;
  margin-left: 22px;
  cursor: pointer;
  margin-bottom: 15px;
}

.thumbnail:hover {
  border: 1px solid #b9b9b9;
}

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
  cursor: pointer;
  border: 1px solid #eee;
  background-color: #8BC34A;
  padding: 13px 15px;
  color: #fff;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.search {
  float: right;
  width: 250px;
  height: 70px;
  border-left: 1px solid #eee;
}
<!DOCTYPE html>
<html>
<head>
	<title>Video CMS</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="js/sidebar.js"></script>
</head>
<body>
	 <div class="header">

	 <div class="search"></div>
	 </div>
	 <div class="toggle">
	 <div class="group-buttons"></div>
	 <span class="close-button" onclick="openCloseNav()">&#8592;</span>
	</div>
	 <div id="sidenav" class="sidenav">
	 <div class="uploadvideo">
	 <div class="upload-btn-wrapper">
  <button class="btn">Video Uploaden</button>
  <input type="file" name="myfile" />
</div>
	 </div>
	 <div class="thumbnail"></div>
	 <div class="thumbnail"></div>
	 <div class="thumbnail"></div>
	 <div class="thumbnail"></div>
	 </div>
</body>
</html>

答案 2 :(得分：2)

我使用一个按钮进行切换。 你可以做到的。

function toggleNav() {
  var isClose = document.getElementById("sidenav").style.width === "0px";
  document.getElementById("sidenav").style.width = isClose ? "250px" : "0px";
  document.getElementById("close-button").innerHTML = isClose ? "&#8592;" : "&#8594;";
}
body {
  background-color: #fcfcfc;
  font-family: Roboto, Arial, sans-serif;
}

.header {
  width: 100%;
  height: 70px;
  top: 0;
  left: 0;
  position: fixed;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.toggle {
  width: 250px;
  height: 70px;
  border-right: 1px solid #eee;
  position: fixed;
  top: 0;
  left: 0;
}

.sidenav {
  height: 100%;
  width: 250px;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 1;
  overflow-x: hidden;
  transition: 0.3s;
  margin-top: 71px;
  background-color: #fff;
  border-right: 1px solid #eee;
  line-height: 80px;
  overflow: hidden;
}

.close-button {
  line-height: 70px;
  color: #eee;
  font-size: 25px;
  margin-left: 20px;
  cursor: pointer
}

.close-button:hover {
  color: #b9b9b9;
}

.sidebar-videos {
  font-size: 18px;
  text-align: center;
}

.uploadvideo {
  color: #707070;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  width: 250px;
  height: 80px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}

.thumbnail {
  border: 1px solid #eee;
  height: 120px;
  width: 200px;
  margin-left: 22px;
  cursor: pointer;
  margin-bottom: 15px;
}

.thumbnail:hover {
  border: 1px solid #b9b9b9;
}

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
  cursor: pointer;
  border: 1px solid #eee;
  background-color: #8BC34A;
  padding: 13px 15px;
  color: #fff;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.search {
  float: right;
  width: 250px;
  height: 70px;
  border-left: 1px solid #eee;
}
<!DOCTYPE html>
<html>

<head>
  <title>Video CMS</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="js/sidebar.js"></script>
</head>

<body>
  <div class="header">
    <div class="search"></div>
  </div>
  <div class="toggle">
    <div class="group-buttons"></div>
    <span id="close-button" class="close-button" onclick="toggleNav()">&#8592;</span>
  </div>
  <div id="sidenav" class="sidenav">
    <div class="uploadvideo">
      <div class="upload-btn-wrapper">
        <button class="btn">Video Uploaden</button>
        <input type="file" name="myfile" />
      </div>
    </div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
  </div>
</body>

</html>

答案 3 :(得分：1)

这是我对您的摘要所做的一切：

  • 创建了一个变量，用于跟踪边栏是否已切换
  • 创建了一个切换方法，该方法可以根据navtoggled var打开或关闭侧边栏
  • 将CSS类更改为切换按钮和切换按钮：悬停
  • 将左上方的图标更改为三字母组合

var navToggled = false;

function toggleNav() {
  if (navToggled) {
    openNav();
    navToggled = false;
  } else {
    closeNav();
    navToggled = true;
  }
}

function openNav() {
  document.getElementById("sidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("sidenav").style.width = "0";
}
body {
  background-color: #fcfcfc;
  font-family: Roboto, Arial, sans-serif;
}

.header {
  width: 100%;
  height: 70px;
  top: 0;
  left: 0;
  position: fixed;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.toggle {
  width: 250px;
  height: 70px;
  border-right: 1px solid #eee;
  position: fixed;
  top: 0;
  left: 0;
}

.sidenav {
  height: 100%;
  width: 250px;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 1;
  overflow-x: hidden;
  transition: 0.3s;
  margin-top: 71px;
  background-color: #fff;
  border-right: 1px solid #eee;
  line-height: 80px;
  overflow: hidden;
}

.toggle-button {
  line-height: 70px;
  color: #eee;
  font-size: 35px;
  margin-left: 20px;
  cursor: pointer
}

.toggle-button:hover {
  color: #b9b9b9;
}

.sidebar-videos {
  font-size: 18px;
  text-align: center;
}

.uploadvideo {
  color: #707070;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  width: 250px;
  height: 80px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}

.thumbnail {
  border: 1px solid #eee;
  height: 120px;
  width: 200px;
  margin-left: 22px;
  cursor: pointer;
  margin-bottom: 15px;
}

.thumbnail:hover {
  border: 1px solid #b9b9b9;
}

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
  cursor: pointer;
  border: 1px solid #eee;
  background-color: #8BC34A;
  padding: 13px 15px;
  color: #fff;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.search {
  float: right;
  width: 250px;
  height: 70px;
  border-left: 1px solid #eee;
}
<!DOCTYPE html>
<html>

<head>
  <title>Video CMS</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="js/sidebar.js"></script>
</head>

<body>
  <div class="header">
    <div class="search"></div>
  </div>
  <div class="toggle">
    <div class="group-buttons"></div>
    <span class="toggle-button" onclick="toggleNav()">&#x2630;</span>
  </div>
  <div id="sidenav" class="sidenav">
    <div class="uploadvideo">
      <div class="upload-btn-wrapper">
        <button class="btn">Video Uploaden</button>
        <input type="file" name="myfile" />
      </div>
    </div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
  </div>
</body>

</html>

相关问题
最新问题