How to add a transition in CSS and HTML when I click an icon?

Question

When I want to click the icon on a phone to open the menu I want there to be a transition. This is the code for responsive devices:

@media screen and (min-width: 800px) {
    nav {
      height: 80px;
      flex-direction: row;
    }
  .logo {
      padding-left: 50px;
      margin: 0;
      width: 20%;

    }
  ul {
      display: flex;
      justify-content: flex-end;
      width: 80%;
      flex-direction: row;
    }
  ul li {
      display: inline-block;
      margin: 0 70px 0 0;
      text-align: left;
      border-bottom-style: none;
      padding: 0;
    }
  span.nav-toggle {
      display: none;
    }

    


   
  }

I was expecting nothing because I did not know how to do that. I tried many things but I don't know why it didn't work.

Use a JavaScript click handler that adds a class to the menu, and use transition in the style of that class. — Barmar
– Barmar, Commented Sep 29, 2023 at 22:03
Does this answer your question? Adding transition effect to my css — Heretic Monkey
– Heretic Monkey, Commented Sep 29, 2023 at 22:19
Please see How to Ask and take the tour. Your post needs improvement. — isherwood
– isherwood, Commented Sep 29, 2023 at 22:25

MartinK · Accepted Answer · 2023-10-07 05:51:22Z

0

Hi in your CSS ist a little mistake, you cant give a transition to disply propperties. display: none/block, flex etc. are instand. If you want to build a Navi with transition you should use the height, thats the simplest way.

.navNormal{
      width: 15rem;
      height: 0;
}
.navTransition{
      height: 10rem;
      line-height: 4rem;
      transition:height 0.3s ease-in-out;
      transition-delay: 0.1s;
}

To trigger the animation you can use a Checkbox if you want to use CSS only. Otherwise you can use the onClick/onclick Attibute, an addEventListener (JS without Framework) or command classList.toggle(navTransition)

edited Oct 7, 2023 at 5:51

answered Sep 29, 2023 at 22:31

MartinK

161 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add a transition in CSS and HTML when I click an icon?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related