CODEWITHSUNDEEP
css
Mr. Whestr
Mr. Whestr

Reputation: 27

My css animation for header is not working?

my header is expanding downward. but how can I animate this to take 1 second from top to bottom? I did add one but its not working.

https://jsfiddle.net/MrWhestr/5xLmdy4h/

HTML

<div class="momnav" id ="mymomnav">
            <div class="nav">
                <ul>
                    <li><a href="">ANA SAYFA</a></li>
                    <li><a href="">HAKKIMIZDA</a></li>
                    <li><a href="">İLETİŞİM</a></li>

                </ul>
            </div>

CSS

.momnavresponsive   {
    display: flex;
    transition: height 1s ;

}

Javascript

function myFunction() {


var x = document.getElementById("mymomnav");
if ( x.className === "momnav") {
    x.className += "responsive";
}

else {
    x.className = "momnav";
}
}

Upvotes: 0

Views: 388

Answers (1)

Miu
Miu

Reputation: 844

The issue is caused by CSS transition. transition doesn't work for values that cannot be represented numerically: auto, display: none/block/flex etc etc.

For exmaple,

  • ❌height: 0 <-> height: auto
  • ❌display: none <-> display: flex
  • ✅height: 0 <-> height: 100vh
  • ✅color: blue <-> color: red (Colors CAN be reperesented numerically)

Here is your problematic code:

.momnav {
  display: none; /* NOT work for none <-> flex */
}

.momnavresponsive   {
  display: flex; /* NOT work for none <-> flex */
  transition: height 1s; /* NOT work for 0 <-> auto */
}

You have to write more CSS/JavaScript for a dropdown menu.

Here is one of the easiest solution:

const body = document.querySelector('body');
const menuBtn = document.querySelector('#menu-btn');
const classToAssign = 'is-open-menu';

function toggleMenu(e) {
  e.stopPropagation();

  // When <body> has .is-open-menu class
  if (body.classList.contains(classToAssign)) {
    // Remove the class = close the menu
    body.classList.remove(classToAssign);
  }
  // When <body> DOES NOT have .is-open-menu class
  else {
    // Add the class = open the menu
    body.classList.add(classToAssign);
  }
}

menuBtn.addEventListener('click', toggleMenu, false);
/* Skip this part and see below */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrap {
  padding: 2em;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: tomato;
}

.header-top__inner {
  display: flex;
  justify-content: space-between;
}

.main {
  margin-top: 100px;
}

/* CHECK THIS */
/* Closed menu */
.menu {
  height: 0;
  transform: scaleY(0);
  transition: transform 0.4s;
  transform-origin: 0 0;
}

.menu__inner {
  transform: scaleY(0);
  transition: transform 0.4s;
  transform-origin: 0 0;
  background-color: tomato;
}

/* CHECK THIS */
/* Opened menu */
.is-open-menu .menu {
  transform: scaleY(1);
}

.is-open-menu .menu__inner {
  transform: scaleY(1);
}
<body>
  <header id="header" class="header">
    <div class="header-top">
      <div class="header-top__inner wrap">
        <h1 class="site-logo"><a href="#">Website Name</a></h1>
        <button id="menu-btn" class="menu-btn">🔻</button><!-- CHECK -->
      </div>
    </div>

    <nav class="menu"><!-- CHECK -->
      <div class="menu__inner wrap"><!-- CHECK -->
        <ul class="menu-list">
          <li class="menu-item"><a href="#">Link</a></li>
          <li class="menu-item"><a href="#">Link</a></li>
          <li class="menu-item"><a href="#">Link</a></li>
        </ul>
      </div>
    </nav>
  </header>

  <main class="main">
    <div class="wrap">
      <p><a href="https://www.google.com/">Go to Google</a> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit neque doloribus quo voluptatibus accusamus commodi blanditiis cupiditate asperiores iusto est. Sunt iste, corporis non saepe quis consectetur natus necessitatibus tempore.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit neque doloribus quo voluptatibus accusamus commodi blanditiis cupiditate asperiores iusto est. Sunt iste, corporis non saepe quis consectetur natus necessitatibus tempore.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit neque doloribus quo voluptatibus accusamus commodi blanditiis cupiditate asperiores iusto est. Sunt iste, corporis non saepe quis consectetur natus necessitatibus tempore.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit neque doloribus quo voluptatibus accusamus commodi blanditiis cupiditate asperiores iusto est. Sunt iste, corporis non saepe quis consectetur natus necessitatibus tempore.</p>
    </div>
  </main>
</body>

Upvotes: 1

Related Questions