The dropdown animation isnt working. All it shows is a simple appear and disappear

Question

Im not entirely sure if its possible but I tried using a transition on my dropdown menu but it doesnt seem to work and i dont know why.

I've tried changing where I put the transition call but nothing seems to work. Its just a plain appear and disappear thing going on. Im trying to do this without using the @keyframes or any javascript rn and just pure CSS.

I need this to slide down as i hover over it.

function openNav() {
  document.getElementById("sideNav").style.width = "400px";
  document.getElementById("main").style.marginLeft = "400px";
  //document.body.style.backgroundColor = "rgba(0,0,0,0.6)"
}

function closeNav() {
  document.getElementById("sideNav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "#FFF";
}

.sideNav {
  height: 100%;
  width: 0;
  /*Will change this part with js*/
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #3037af;
  overflow-x: hidden;
  padding-top: 150px;
  transition: 0.5s;
  border-bottom-right-radius: 80%;
  border-top-right-radius: 80%;
}

.sideNav a {
  padding: 20px;
  display: block;
  color: #f9f9f9;
  text-decoration: none;
  font-size: 32px;
  opacity: 0.5;
  transition: 0.3s;
  font-family: 'Raleway', sans-serif;
  transition-duration: 0.5s;
}

.sideNav a:hover {
  opacity: 1;
  font-size: 40px;
  padding: 10px;
  transition: 0.4s;
}

.dropdown {
  overflow: hidden;
}

.dropdownContent {
  display: none;
  background-color: #2d347d;
  position: relative;
  padding: 10px;
  border-bottom-right-radius: 80%;
  border-top-right-radius: 80%;
  z-index: 1;
}

.dropdownContent a {
  left: 200px;
  display: block;
  transition: ease-in 0.3s;
  transition-delay: 0.300ms;
}

.dropdown:hover .dropdownContent {
  display: block;
}

<div class="mainContainer">
  <div id="sideNav" class="sideNav">
    <script src="js/main.js"></script>
    <div class="dropdown">
      <a href="#"><i class="fas fa-gifts"></i> Products</a>
      <div class="dropdownContent">
        <a href="#">Shop Now</a>
        <a href="#">Store Locations</a>
      </div>
    </div>
  </div>
</div>
<nav>
  <button id="menu" onclick="openNav()" onfocusout="closeNav()"><i class="fas fa-bars"></i></button>
  <div id="main">
    <h1 class="landingHead">invision.</h1>
  </div>
</nav>

`display: block` can't be animated, but you will find workarounds. This may help: https://stackoverflow.com/questions/38772442/css-transition-from-display-none-to-display-block-navigation-with-subnav — sol, Apr 24 '19 at 23:38

score 0 · Answer 1 · edited Apr 25 '19 at 01:03

.sideNav {
  height: 100%;
  /*width: 0;   Will change this part with js*/
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #3037af;
  overflow-x: hidden;
  padding-top: 150px;
  transition: 0.5s;
  border-bottom-right-radius: 80%;
  border-top-right-radius: 80%;
}

.sideNav a {
  padding: 20px;
  display: block;
  color: #f9f9f9;
  text-decoration: none;
  font-size: 32px;
  opacity: 0.5;
  transition: 0.3s;
  font-family: 'Raleway', sans-serif;
  transition-duration: 0.5s;
}

.dropdown {
  position: relative;
  height: 100px;
}

.dropdownContent {
  background-color: #2d347d;
  position: relative;
  padding: 10px;
  border-bottom-right-radius: 80%;
  border-top-right-radius: 80%;
  z-index: -1;
  opacity: 0;
  top: -100%;
}

.dropdown:hover .dropdownContent {
  top: 0;
  opacity: 1;
  transition: ease-in 0.3s;
  transition-delay: 0.300ms;
}

.dropdown:hover .dropdownContent {
  top: 0;
  opacity: 1;
  transition: ease-in 0.3s;
  transition-delay: 0.300ms;
}

<div class="mainContainer">
  <div id="sideNav" class="sideNav">
    <div class="dropdown">
      <a href="#"><i class="fas fa-gifts"></i> Products</a>
      <div class="dropdownContent">
        <a href="#">Shop Now</a>
        <a href="#">Store Locations</a>
      </div>
    </div>
  </div>
</div>

This could definitely do with being tidied up and tweaked a bit more but basically, you want to set all your default positions first, that is the state before hovering. From your question, I gather that you want them to slide in from the top, so you need to adjust the default location to where you want the animation to start. Within the :hover css attribute you override those positions with what you want the final positions to be, when you hover over the link.

As requested, this is a pure css implementation.

The dropdown animation isnt working. All it shows is a simple appear and disappear

1 Answers1