HTML Quantum Hyperloop Overflow

I had the following snippet inside my code:

<div id="mySidenav" class="sidenav"> <!-- The sidebar with links -->
<a class="sidebar" style="position:absolute; top:0;right: 25px;font-size: 36px; margin-left: 50px;" #href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <!-- The button which activates Javascript to close the nav bar -->
<br>
<a class="sidebar" href="#"><b class="spacedfont">DXLPHIN</b></a>
<br>

<a class="sidebar" onclick="toggleFurniture();" href="#"><span>Furniture <i id="furnitureArrow" class="fa fa-caret-down"></i><i id="furnitureArrowu" class="fa fa-caret-up"></i></span></a>

<p id="showFur" style="text-indent: 2vw;">
<a class="sidebar" href="#">Chairs</a>
<a class="sidebar" href="#">Lights</a>
<a class="sidebar" href="#">Tables</a>
</p>

<a class="sidebar" onclick="toggleAudio();" href="#"><span>Audio <i id="audioArrow" class="fa fa-caret-down"></i><i id="audioArrowu" class="fa fa-caret-up"></i></span></a>

<p id="showAud" style="text-indent: 2vw;">
<a class="sidebar" href="#">Speakers</a>
<a class="sidebar" href="#">Headphones</a>
<a class="sidebar" href="#">Microphones</a>
</p>

<a class="sidebar" href="#" onclick="toggleAccessories();"><span>Accessories <i id="accessoriesArrow" class="fa fa-caret-down"></i><i id="accessoriesArrowu" class="fa fa-caret-up"></i></span></a>

<p id="showAcc" style="text-indent: 2vw;">
<a class="sidebar" href="#">Phone Cases</a>
<a class="sidebar" href="#">Stationery</a>
<a class="sidebar" href="#">Watches</a>
</p>

<br>
<a class="sidebar" href="#">Account</a>
<a class="sidebar" href="#">About</a>
<a class="sidebar" href="#">Contact</a>
</div>

<div class="headera" style="color: #818181;">


<script>

function toggleFurniture(){
        var x1 = document.getElementById("showFur");
        var x1d = document.getElementById("furnitureArrow");
        var x1u = document.getElementById("furnitureArrowu");
    if (x1.style.display === "none") {
        x1.style.display = "block";
        x1u.style.display = "block";
        x1d.style.display = "none";
    } else {
        x1.style.display = "none";
        x1u.style.display = "none";
        x1d.style.display = "block";
    }
} 
</script>
<script>

function toggleAudio(){
        var x2 = document.getElementById("showAud");
        var x2d = document.getElementById("audioArrow");
        var x2u = document.getElementById("audioArrowu");
    if (x2.style.display === "none") {
        x2.style.display = "block";
        x2u.style.display = "block";
        x2d.style.display = "none";
    } else {
        x2.style.display = "none";
        x2u.style.display = "none";
        x2d.style.display = "block";
    }
} 
</script>
<script>
function toggleAccessories(){
        var x3 = document.getElementById("showAcc");
        var x3d = document.getElementById("accessoriesArrow");
        var x3u = document.getElementById("accessoriesArrowu");
    if (x3.style.display === "none") {
        x3.style.display = "block";
        x3u.style.display = "block";
        x3d.style.display = "none";
    } else {
        x3.style.display = "none";
        x3u.style.display = "none";
        x3d.style.display = "block";
    }
} 
document.getElementById("accessoriesArrowu").style.display = "none";
document.getElementById("audioArrowu").style.display = "none";
document.getElementById("furnitureArrowu").style.display = "none";
</script>
<script> <!-- This is the Javascript controlling the opening and closing of the side navigation bar!-->
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

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

With the following CSS:

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;

}

.sidebar {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
    white-space: nowrap;

}

.sidebar:hover {
    color: #f1f1f1;
}

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

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidebar {font-size: 18px;}
}

.spacedfont {
    letter-spacing:4px;
}

.headera {
  overflow: hidden;
  background-color: #111;
  padding: 10px 10px;
}

* {box-sizing: border-box}
body {margin:0; padding: 0;}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.slideshowtext {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

For those of you who don't understand, it's pretty much a side navigation bar that can be opened and closed etc. I was hoping to have the categories split into subcategories with the arrow icons going up and down. This worked, however, I had a problem keeping the arrow icons on the same line as the text it was supposed to appear next to after switching it from the starting position.

I'd like the icon to appear on the same line all the time if that's possible in any way?

Thanks,

P.S. Oh, and the title... Apparently it gets ignored under one that actually makes sense ;)

Images:

Start

Oneclick

Twoclick

1 answer

  • answered 2018-10-11 20:18 MichaelvE

    The problem seems to be that you were just running out of space that you allocated for the sidebar, 250px, because you had the 2 up and down icons side by side. In the example below, I've removed the second icon and toggled the up and down icon classes so it just remains one icon. I also added an event listener that shows the side menu when you hover over the header. There wasn't anything triggering the side menu before:

    function start() {
      document.getElementById("hdr").addEventListener("mouseover", openNav);
    }
    
    function toggleFurniture() {
      var x1 = document.getElementById("showFur");
      var x1d = document.getElementById("furnitureArrow");
      if (x1d.classList.contains("fa-caret-down")) {
        x1d.classList.remove("fa-caret-down");
        x1d.classList.add("fa-caret-up");
      } else {
        x1d.classList.remove("fa-caret-up");
        x1d.classList.add("fa-caret-down");
      }
      if (x1.style.display === "none") {
        x1.style.display = "block";
      } else {
        x1.style.display = "none";
      }
    }
    
    function toggleAudio() {
      var x2 = document.getElementById("showAud");
      var x2d = document.getElementById("audioArrow");
      if (x2d.classList.contains("fa-caret-down")) {
        x2d.classList.remove("fa-caret-down");
        x2d.classList.add("fa-caret-up");
      } else {
        x2d.classList.remove("fa-caret-up");
        x2d.classList.add("fa-caret-down");
      }
    
      if (x2.style.display === "none") {
        x2.style.display = "block";
      } else {
        x2.style.display = "none";
      }
    }
    
    function toggleAccessories() {
      var x3 = document.getElementById("showAcc");
      var x3d = document.getElementById("accessoriesArrow");
      //
      if (x3d.classList.contains("fa-caret-down")) {
        x3d.classList.remove("fa-caret-down");
        x3d.classList.add("fa-caret-up");
      } else {
        x3d.classList.remove("fa-caret-up");
        x3d.classList.add("fa-caret-down");
      }
      //
      if (x3.style.display === "none") {
        x3.style.display = "block";
      } else {
        x3.style.display = "none";
      }
    }
    //-- This is the Javascript controlling the opening and closing of the side navigation bar!-->
    function openNav() {
      document.getElementById("mySidenav").style.width = "250px";
    }
    
    function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
    }
    
    window.onload = start();
    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;
    }
    
    .sidebar {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s;
      white-space: nowrap;
    }
    
    .sidebar:hover {
      color: #f1f1f1;
    }
    
    .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }
    
    @media screen and (max-height: 450px) {
      .sidenav {
        padding-top: 15px;
      }
      .sidebar {
        font-size: 18px;
      }
    }
    
    .spacedfont {
      letter-spacing: 4px;
    }
    
    .headera {
      overflow: hidden;
      background-color: #111;
      padding: 20px 10px;
    }
    
    * {
      box-sizing: border-box
    }
    
    body {
      margin: 0;
      padding: 0;
    }
    
    .mySlides {
      display: none
    }
    
    img {
      vertical-align: middle;
    }
    
    
    /* Slideshow container */
    
    .slideshow-container {
      position: relative;
      margin: none;
    }
    
    
    /* Next & previous buttons */
    
    .prev,
    .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -22px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
    }
    
    
    /* Position the "next button" to the right */
    
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }
    
    
    /* On hover, add a black background color with a little bit see-through */
    
    .prev:hover,
    .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
    
    
    /* Caption text */
    
    .slideshowtext {
      color: #f2f2f2;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;
    }
    
    
    /* Number text (1/3 etc) */
    
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }
    
    
    /* The dots/bullets/indicators */
    
    .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }
    
    .active,
    .dot:hover {
      background-color: #717171;
    }
    
    
    /* Fading animation */
    
    .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;
    }
    
    @-webkit-keyframes fade {
      from {
        opacity: .4
      }
      to {
        opacity: 1
      }
    }
    
    @keyframes fade {
      from {
        opacity: .4
      }
      to {
        opacity: 1
      }
    }
    
    
    /* On smaller screens, decrease text size */
    
    @media only screen and (max-width: 300px) {
      .prev,
      .next,
      .text {
        font-size: 11px
      }
    }
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    
    <div id="mySidenav" class="sidenav">
      <!-- The sidebar with links -->
      <a class="sidebar closebtn" onclick="closeNav()">&times;</a>
      <!-- The button which activates Javascript to close the nav bar -->
      <br>
      <a class="sidebar" href="#"><b class="spacedfont">DXLPHIN</b></a>
      <br>
    
      <a class="sidebar" onclick="toggleFurniture();" href="#"><span>Furniture <i id="furnitureArrow" class="fa fa-caret-down"></i></span></a>
    
      <p id="showFur" style="text-indent: 2vw;">
        <a class="sidebar" href="#">Chairs</a>
        <a class="sidebar" href="#">Lights</a>
        <a class="sidebar" href="#">Tables</a>
      </p>
    
      <a class="sidebar" onclick="toggleAudio();" href="#"><span>Audio <i id="audioArrow" class="fa fa-caret-down"></i></span></a>
    
      <p id="showAud" style="text-indent: 2vw;">
        <a class="sidebar" href="#">Speakers</a>
        <a class="sidebar" href="#">Headphones</a>
        <a class="sidebar" href="#">Microphones</a>
      </p>
    
      <a class="sidebar" href="#" onclick="toggleAccessories();"><span>Accessories <i id="accessoriesArrow" class="fa fa-caret-down"></i></span></a>
    
      <p id="showAcc" style="text-indent: 2vw;">
        <a class="sidebar" href="#">Phone Cases</a>
        <a class="sidebar" href="#">Stationery</a>
        <a class="sidebar" href="#">Watches</a>
      </p>
    
      <br>
      <a class="sidebar" href="#">Account</a>
      <a class="sidebar" href="#">About</a>
      <a class="sidebar" href="#">Contact</a>
    </div>
    
    <div id="hdr" class="headera" style="color: #818181;">
    </div>