Dropdown Menu Navigation in HTML, CSS & JS

Community feedback

• 

  hebrerillo•350

  @hebrerilloPosted over 2 years ago

  For the drop down transitions, you can use the trick of setting the container to 'min-height:0' and 'overflow:hidden'.

  .secondary-menu-container { display: none; /* This is not necessary, you can remove this.*/ max-height: 0; overflow: hidden; transition: max-height 0.4s; }

  You also need a bit of JavaScript:

  subMenu.style.maxHeight = subMenu.scrollHeight + 'px';

  If this sounds complicated, you can take a look at my solution: https://www.frontendmentor.io/solutions/intro-section-with-dropdown-navigation-N_cIRhRwsq

  0
• 

  Jagoda Kubicka•120

  @jagodakubickaPosted over 2 years ago

  Hi :) Great work!

  As for animation on mobile menu, you can add opacity:0 to .primary-header[data-open] .collapse and then add keyframes with opacity: 1, transfrom: translateY as below:

  `@keyframes slide {

  from {
  
    opacity: 0;
    transform: translateY(-100%);
  }
  
  to {
    opacity: 1;
    transform: translateY(0);
  }
  

  }

  .primary-header[data-open] .collapse {

  display: grid;
  
  grid-template-columns: 1fr;
  
  grid-template-rows: auto 10em;
  
  justify-items: start;
  
  position: fixed;
  
  top: 0;
  
  right: 0;
  
  padding: var(--size-800) var(--size-500);
  
  min-width: 15em;
  
  max-height: 100vh;
  
  overflow-y: auto;
  
  background-color: var(--clr-neutral-100);
  
  z-index: 2;
  
  opacity: 0;
  
  animation: slide 1s forwards;
  

  } `

  Ofcourse you can play with it ( it can slide from bottom to top, from right to left etc.

  I hope this helps

  0