CODEWITHSUNDEEP
javascripthtmlcss
Sophie Minke
Sophie Minke

Reputation: 13

Sidebar open/close

I'm trying to make a website and I want one button to close and open the sidebar instead of the two arrows I have currently. Hopefully someone can edit my snippet and help me out with it. Please note that I'm a beginner to JS and I don't really know how it works that well. Thank you in advance!

This is what I got for the arrows: 

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>

Upvotes: 2

Views: 7339

Answers (4)

seunggabi
seunggabi

Reputation: 1820

I use one button and toggle. You can do this.

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>

Upvotes: 2

Luca Kiebel
Luca Kiebel

Reputation: 10096

Simply give the open button a 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;
}

and then change what button has display:none and display:block depending on whether the sidebar is open or not:

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

You should probably also give the buttons a user-select: none; to prevent them selecting the button like text.

Full code:

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>

Upvotes: 3

Kwright02
Kwright02

Reputation: 777

Here's everything that I did to your snippet:

  • Created a var that keeps track of if the sidebar is toggled or not
  • Created a toggle method that opens or closes the sidebar depending on navtoggled var
  • Changed CSS class to toggle-button and toggle-button:hover
  • Changed icon in the upper left to a trigram

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>

Upvotes: 1

toom501
toom501

Reputation: 354

If I understood the question, you can try something like this:

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>

Upvotes: 2

Related Questions