Vertical dropdown menu that pushes other options down?

Question

So I am working on a Sidenav for a mobile friendly website. I have a working, multi-level hoverable drop-down menu within the sidebar.

I would like for the dropdowns to push the links beneath them down like in an accordian menu, rather than overlapping said links.

I've seen other solutions, but I'm having trouble wrapping my head around them.

Thanks in advance for any help!

Here is my current code for the menu:

function openNav() {
  document.getElementById("mySidenav").style.width = "20%";
}

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

  body {
  font-family: Centaur;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: black;
  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 {
  color: #f1f1f1;
}

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

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
  .dropbtn {
    background-color: transparent;
    padding: 2%;
    font-size: 100%;
    border: none;
    cursor: pointer;
  }
  .dropdown {
    position: relative;
    display: inline-block;
  }
  .dropdown1 {
    position: relative;
    display: inline-block;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    min-width: 160px;
    z-index: 1;
  }
  .dropdown-content1 {
    display: none;
    position: absolute;
    right: 0;
    min-width: 160px;
    z-index: 1;
  }
  .dropdown-content1 a {
    text-decoration: none;
    display: block;
  }
  .dropdown-content a {
    text-decoration: none;
    display: block;
  }
  .dropdown1:hover .dropdown-content1 {
    display: block;
  }
  .dropdown:hover .dropdown-content {
    display: block;
  }

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div style="width: 15%" id="navtaner">
    <a href="">Home</a>
    <div class="dropdown">
      <a class="dropbtn">Swords</a>
      <div class="dropdown-content" style=" float: right; margin-right:-55%">
        <a href="#">Museum Line</a>
        <div class="dropdown1">
          <a href="#">Next Generation</a>
          <div class="dropdown-content1">
            <a href="#">Roman Swords</a>
            <a href="#">Viking Swords</a>
            <a href="#">Medieval One-Handed Swords </a>
            <a href="#">Medieval Hand and-a-half swords</a>
            <a href="#">Medieval Two-Handed Swords</a>
            <a href="#">Single-Edged Swords</a></div>
        </div>
        <a href="#">Squire Line</a>
        <a href="#">Maestro Line</a>
        <a href="#">Skirmish Line</a>
        <a href="#">Special Edition</a>
      </div>
    </div>



    <div class="dropdown">
      <a class="dropbtn">About</a>
      <div class="dropdown-content">
        <a href="#">Albion News</a>
        <a href="#">Albion Media</a>
        <a href="#">Albion Story</a>
        <a href="#">Testimonials</a>
        <a href="#">References</a>
        <a href="#">Gallary</a>
      </div>
    </div>
    <a href="#">Order</a>
  </div>
</div>


<span style="font-size:30px;cursor:pointer; float: right" onclick="openNav()">&#9776; MENU</span>

Something like this? https://stackoverflow.com/questions/46423989/angular-2-expand-collapse-table-row/46424996#46424996 — mahval, Sep 27 '17 at 14:17
Very similar to what I am attempting, though I want it to be hoverable on desktop and collapsible once the curser leaves the option. I am trying to avoid scrollbars by ensuring that the entire menu can't be left in an expanded state unless the user is actively hovering it. — Baldbeardian, Sep 27 '17 at 14:21

score 0 · Accepted Answer · answered Sep 27 '17 at 15:40

Use this

JS

    function toggleNav() {
     var element = document.getElementById("navtaner");
        element.classList.toggle("navtaner2");
    }

CSS

   body {
    font-family: Centaur;
  }
  .navtaner {
    display:none;
  }
  .navtaner2 {
    display:block;
  }
  .sidenav {
    height: ;
    width: 20%;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: black;
    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 {
    color: #f1f1f1;
  }

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

  @media screen and (max-height: 450px) {
    .sidenav {
      padding-top: 15px;
    }
    .sidenav a {
      font-size: 18px;
    }
    .dropbtn {
      background-color: transparent;
      padding: 2%;
      font-size: 100%;
      border: none;
      cursor: pointer;
    }
    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown1 {
      position: relative;
      display: inline-block;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      right: 0;
      min-width: 160px;
      z-index: 1;
    }
    .dropdown-content1 {
      display: none;
      position: absolute;
      right: 0;
      min-width: 160px;
      z-index: 1;
    }
    .dropdown-content1 a {
      text-decoration: none;
      display: block;
    }
    .dropdown-content a {
      text-decoration: none;
      display: block;
    }
    .dropdown1:hover .dropdown-content1 {
      display: block;
    }
    .dropdown:hover .dropdown-content {
      display: block;
    }

HTML

  <div id="mySidenav" class="sidenav">
    <span style="width:100%;font-size:30px;cursor:pointer; float: right;color:white;" onclick="toggleNav()">&#9776; MENU</span>
    <div style="width: 15%;" id="navtaner" class="navtaner">
      <a href="">Home</a>
      <div class="dropdown">
        <a class="dropbtn">Swords</a>
        <div class="dropdown-content" style=" float: right; margin-right:-55%">
          <a href="#">Museum Line</a>
          <div class="dropdown1">
            <a href="#">Next Generation</a>
            <div class="dropdown-content1">
              <a href="#">Roman Swords</a>
              <a href="#">Viking Swords</a>
              <a href="#">Medieval One-Handed Swords </a>
              <a href="#">Medieval Hand and-a-half swords</a>
              <a href="#">Medieval Two-Handed Swords</a>
              <a href="#">Single-Edged Swords</a></div>
          </div>
          <a href="#">Squire Line</a>
          <a href="#">Maestro Line</a>
          <a href="#">Skirmish Line</a>
          <a href="#">Special Edition</a>
        </div>
      </div>



      <div class="dropdown">
        <a class="dropbtn">About</a>
        <div class="dropdown-content">
          <a href="#">Albion News</a>
          <a href="#">Albion Media</a>
          <a href="#">Albion Story</a>
          <a href="#">Testimonials</a>
          <a href="#">References</a>
          <a href="#">Gallary</a>
        </div>
      </div>
      <a href="#">Order</a>
    </div>
  </div>

https://codepen.io/lafortuna18/pen/qPrwjr

Thanks!~ To elaborate on what I am trying to do... I need the menu to slide in from the right when the menu option is active. I simply want hoverable dropdowns that will push other options down when in use, while re-collapsing once the menu is no longer being hovered. Like an accordion menu without all of the clicking. — Baldbeardian, Sep 28 '17 at 17:59

Vertical dropdown menu that pushes other options down?

1 Answers1