Kevin Powell - Community•2y ago

How can I make my primary nav dropdown slide down with an animation?

(JSFiddle for context: https://jsfiddle.net/25ghjzr0/4/) I have a dropdown menu in my primary nav, which appears when you hover a link. I achieved this using display none to flex. I can't figure out how to animate it so that it goes from height 0% to height auto. The dropdown itself works but the links inside don't. Does anyone how how I can achieve this? Thanks

29 Replies

glutonium•2y ago

try this@Lord Of Insanity

<!DOCTYPE html>
<html>
<head>
   <style>

body{
   margin : 0;
}

#dropDown{
   display : flex;
   flex-direction : column;
   background : #1b1b1b;
   height : 40vh;
   align-items : center;
   transform : translateY(-100%)scaleY(0);
   transition : 300ms ease-out;
}

.dropDownAnimation{
   transform : translateY(0)scaleY(1)!important;
}

a{
   text-decoration : none;
   color : coral;
   flex-grow : 1;
   width : 100%;
   display : flex;
   align-items : center;
   justify-content : center;
   
}

#navIcon{
   text-align : center;
   z-index : 100;
   height : 40px;
   width : 40px;
   background : white;
   position : fixed;
   top : 20px;
   right: 30px;
   border : solid 2px coral;
   border-radius : 30% 5% 30% 5%;
}
   </style>
</head>
<body>
   <div id = "navIcon" onclick = "dropDown();">Click Me</div>
   <div id = "dropDown">
      <a href = "#">Link1</a>
      <a href = "#">Link2</a>
      <a href = "#">Link3</a>
      <a href = "#">Link4</a>
   </div>

   <script>
      
      let icon = document.getElementById("navIcon");
      let nav = document.getElementById("dropDown");

      function dropDown (){
         nav.classList.toggle("dropDownAnimation");
      };

   </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
   <style>

body{
   margin : 0;
}

#dropDown{
   display : flex;
   flex-direction : column;
   background : #1b1b1b;
   height : 40vh;
   align-items : center;
   transform : translateY(-100%)scaleY(0);
   transition : 300ms ease-out;
}

.dropDownAnimation{
   transform : translateY(0)scaleY(1)!important;
}

a{
   text-decoration : none;
   color : coral;
   flex-grow : 1;
   width : 100%;
   display : flex;
   align-items : center;
   justify-content : center;
   
}

#navIcon{
   text-align : center;
   z-index : 100;
   height : 40px;
   width : 40px;
   background : white;
   position : fixed;
   top : 20px;
   right: 30px;
   border : solid 2px coral;
   border-radius : 30% 5% 30% 5%;
}
   </style>
</head>
<body>
   <div id = "navIcon" onclick = "dropDown();">Click Me</div>
   <div id = "dropDown">
      <a href = "#">Link1</a>
      <a href = "#">Link2</a>
      <a href = "#">Link3</a>
      <a href = "#">Link4</a>
   </div>

   <script>
      
      let icon = document.getElementById("navIcon");
      let nav = document.getElementById("dropDown");

      function dropDown (){
         nav.classList.toggle("dropDownAnimation");
      };

   </script>
</body>
</html>

glutonium•2y ago

Lord Of Insanity•2y ago

Yeah this is what I'm looking for, I've been able to work it into my current nav and I've made it activate when you hover the "navIcon". Only problem with it is that when you do hover it you can see the dropdown grow in height and slide down into position. I'll upload a video of it.

Lord Of Insanity•2y ago

I want it so that it starts to grow from the bottom of the actuation toggle, if that makes sense

glutonium•2y ago

bottom of about me?

Lord Of Insanity•2y ago

Yeah I might have figured it out. I removed the translate and put a transform-origin:top on the dropdown.

Lord Of Insanity•2y ago

Also is there any way to make the js work with event listeners? I prefer using those to functions

glutonium•2y ago

i mean event listener is LITERALLY a function in js😂

Lord Of Insanity•2y ago

Ah, I'm still kinda new to javascript so forgive me lol

glutonium•2y ago

i see, u used scaleY() here that's why it looks a bit odd I'd rather say, since u r using scaleY() also add opacity : 0 for the text inside so the text fades out as well, that way it'll look less out dated naah naah.. don't worry

element.addEventListener('click',()=>{
  //code u want to run when element is clicked
});

element.addEventListener('click',()=>{
  //code u want to run when element is clicked
});

the basic structure of eventListener u can see at the end I used js as well

Lord Of Insanity•2y ago

Yeah I have used them for my mobile nav, it's just it never occurred to me that they themselves are functions. I guess thats why some of my other code didn't work, I was trying to put a function inside the event listener

glutonium•2y ago

u can out function inside a function it's most likely the way u did it is wrong

Lord Of Insanity•2y ago

The only thing about this drop down that I'm not entirely fond of is that the text gets sorta squished when it folds back up, but I guess I can live with that

glutonium•2y ago

u can do it like this as well,

function event () {
 //code that u wanna run
}

element.addEventListener('click',event);
}

function event () {
 //code that u wanna run
}

element.addEventListener('click',event);
}

that's the reason why I said it looks add😂 and that's why i said, prolly try making it's opacity go down that way it'll look less odd at least a bit

Lord Of Insanity•2y ago

Yeah that does help

b1mind•2y ago

make it relative to the nav? oh sry I didn't see the second video

glutonium•2y ago

noice

Lord Of Insanity•2y ago

So is there any way to make it so the links in the dropdown not scale and instead stay in the position they will be when the dropdown is open?

b1mind•2y ago

you would need to layer it, animate the bg and sublinks separate. Anything inside the scale is going to scale

glutonium•2y ago

so u r Saying, the texts will stay the same, but they'll appear only when the drop down opens ??

Lord Of Insanity•2y ago

Yeah, although I don't think it matters that much on second thoughts

glutonium•2y ago

@Lord Of Insanity i so i think I've found a better way to do transition

glutonium•2y ago

or perhaps this

glutonium•2y ago

fot this

<!DOCTYPE html>
<html>
<head>
   <style>

body{
   display : grid;
   place-items : center;
}

.hover{
   height : 50px;
   width : 200px;
   background : coral;
   text-align : center;
   z-index : 5;
}

.dropDown{
   background : cyan;
   text-align : center;
   color : transparent;
   transform-origin : top;
   transition : 500ms;
   transform : scaleY(0);
   position : relative;
}

.dropDown:before{
   content : "";
   height : 100%;
   width : 100%;
   position : absolute;
   background : red;
   top : 0;
   left : 0;
   transition : 150ms;
}

.hover:hover ~ .dropDown{
   color : black;
   transform : scale(1);
}

.hover:hover ~ .dropDown:before{
   width : 0%;
}

   </style>
</head>
<body>
   <div class = "parent">

      <div class = "hover">Hover Me</div>
      <div class = "dropDown">
         <li>List</li>
         <li>List</li>
         <li>List</li>
      </div>

   </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
   <style>

body{
   display : grid;
   place-items : center;
}

.hover{
   height : 50px;
   width : 200px;
   background : coral;
   text-align : center;
   z-index : 5;
}

.dropDown{
   background : cyan;
   text-align : center;
   color : transparent;
   transform-origin : top;
   transition : 500ms;
   transform : scaleY(0);
   position : relative;
}

.dropDown:before{
   content : "";
   height : 100%;
   width : 100%;
   position : absolute;
   background : red;
   top : 0;
   left : 0;
   transition : 150ms;
}

.hover:hover ~ .dropDown{
   color : black;
   transform : scale(1);
}

.hover:hover ~ .dropDown:before{
   width : 0%;
}

   </style>
</head>
<body>
   <div class = "parent">

      <div class = "hover">Hover Me</div>
      <div class = "dropDown">
         <li>List</li>
         <li>List</li>
         <li>List</li>
      </div>

   </div>
</body>
</html>

for this

<!DOCTYPE html>
<html>
<head>
   <style>

body{
   display : grid;
   place-items : center;
}

.hover{
   height : 50px;
   width : 200px;
   background : coral;
   text-align : center;
   z-index : 5;
}

.dropDown{
   background : cyan;
   text-align : center;
   color : transparent;
   transform-origin : top;
   transition : 500ms;
   transform : scaleY(0);
   position : relative;
}

.dropDown:before{
   content : "";
   height : 100%;
   width : 100%;
   position : absolute;
   background : cyan;
   top : 0;
   left : 0;
   transition : 300ms;
   transform : scaleX(1);
}

.hover:hover ~ .dropDown{
   color : black;
   transform : scale(1);
}

.hover:hover ~ .dropDown:before{
   background : transparent;
   transform : scaleX(0);
}

   </style>
</head>
<body>
   <div class = "parent">

      <div class = "hover">Hover Me</div>
      <div class = "dropDown">
         <li>List</li>
         <li>List</li>
         <li>List</li>
      </div>

   </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
   <style>

body{
   display : grid;
   place-items : center;
}

.hover{
   height : 50px;
   width : 200px;
   background : coral;
   text-align : center;
   z-index : 5;
}

.dropDown{
   background : cyan;
   text-align : center;
   color : transparent;
   transform-origin : top;
   transition : 500ms;
   transform : scaleY(0);
   position : relative;
}

.dropDown:before{
   content : "";
   height : 100%;
   width : 100%;
   position : absolute;
   background : cyan;
   top : 0;
   left : 0;
   transition : 300ms;
   transform : scaleX(1);
}

.hover:hover ~ .dropDown{
   color : black;
   transform : scale(1);
}

.hover:hover ~ .dropDown:before{
   background : transparent;
   transform : scaleX(0);
}

   </style>
</head>
<body>
   <div class = "parent">

      <div class = "hover">Hover Me</div>
      <div class = "dropDown">
         <li>List</li>
         <li>List</li>
         <li>List</li>
      </div>

   </div>
</body>
</html>

Lord Of Insanity•2y ago

Hi, I managed to compact my JS using event listeners, but it looks like I've broken some of it in the process. The dropdown no longer stays open when you hover over the links, except the first one. Here's a Jsfiddle for it: https://jsfiddle.net/ge5zfovu/1/. Do you know how I can fix this?

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Gaming

Programming

How can I make my primary nav dropdown slide down with an animation?