0

When you look at the menu of this website: https://www.eurotuin.be/

And when you try to hover it, it collapses really fast. see the menu here

I've tried experimenting with the following code, but it doesn't seem to work:

.main-nav__link {
    transition:all 0s ease 0s!important;
}

This one has same effect:

.main-nav__link {
    transition:all 3s ease 3s!important;
}
Yori
  • 5
  • 2
  • 2
    Please read [Something in my web site or project doesn't work. Can I just paste a link to it?](https://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it) – evolutionxbox May 04 '22 at 09:28
  • `transition:all 0s` says "take 0 seconds to transition" and you're complaining it's too fast? Did you try something more than 0 seconds? eg `transition:all 3s` – freedomn-m May 04 '22 at 09:30
  • You also have this on the `.main-nav__link` which is the element you're hovering over - you want it the element that does the transition - ie the menu itself. – freedomn-m May 04 '22 at 09:32
  • This might help: [Transitions on the CSS display property](https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property) - you'll need to change your code from toggling display:block to toggling opacity:0. – freedomn-m May 04 '22 at 09:34
  • But then it depends on how you add the `display:block` to the flyout - if it's jquery `.show()` then just change it to `.fadeIn()`. – freedomn-m May 04 '22 at 09:36

3 Answers3

1

You are currently using 'display' which is not something that can be transitioned.

You should use something that can be transitioned like 'opacity' combined with 'visibility'.

The following code should achieve the desired effect.

.main-nav__flyout {
  display: block !important;
}

.main-nav__item .main-nav__flyout {
  transition: all 0.5s ease 0.2s!important;
  opacity: 0;
  visibility: hidden;
}

.main-nav__item:hover .main-nav__flyout {
  opacity: 1;
  visibility: visible;
}
zoom81
  • 21
  • 1
0

Two things :

  • How transition would have any effect if duration is 0s (I'm no expert, this is a genuine question) ? Plus the transition is applied on your link, it wouldn't have any effect on your menu (which is a different element).

  • So the issue here is : your menu is shown/hidden with the change of the display property from none to block.

More precisly, .hide() and .show() are applied to the menu element on mouseout and mouseover events (from the li element). So the menu 'hide' and 'show' as soon as the mouse enter or exit the li element.

Also be aware that the display property can't be animated or transitioned.

learner
  • 341
  • 2
  • 11
  • thank you! is it possible to create a delay for .hide() and .show() in js? – Yori May 04 '22 at 10:05
  • I don't think a delay is what you want. Your menu would just hide and appear instantly, but with a delay. You can add add/remove a class with some animated/transitioned properties (opacity, width, height... ?). And you should change when you hide() the menu : only when hovering over other links or when mouseout the menu itself (or other events, but NOT when mouseout the link). – learner May 04 '22 at 10:13
  • I don't know jquery, but it seems you could also use freedomn-m's suggestion : using .fadeIn() instead of show(). – learner May 04 '22 at 10:15
  • If this answer your question you should mark it as accepted. You should also do that for your [other questions](https://stackoverflow.com/questions/71564653/invalid-parameters-files-uploading-file-php-7-4)... – learner May 04 '22 at 13:04
0

This is the best solution as a fresher

                <html>
            <head>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <style>
            .dropbtn {
              background-color: #04AA6D;
              color: white;
              padding: 16px;
              font-size: 16px;
              border: none;
            }
            
            .dropdown {
              position: relative;
              display: inline-block;
            }
            
            .dropdown-content {
              display: none;
              position: absolute;
              background-color: #f1f1f1;
              min-width: 160px;
              box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
              z-index: 1;
            }
            
            .dropdown-content a {
              color: black;
              padding: 12px 16px;
              text-decoration: none;
              display: block;
            }
            
            .dropdown-content a:hover {background-color: #ddd;}
            
            .dropdown:hover .dropdown-content {display: block;}
            
            .dropdown:hover .dropbtn {background-color: #3e8e41;}
            </style>
            </head>
            <body>
            
            <h2>Hoverable Dropdown</h2>
            <p>Move the mouse over the button to open the dropdown menu.</p>
            
            <div class="dropdown">
              <button class="dropbtn">Dropdown</button>
              <div class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
            </div>
            <div class="dropdown">
              <button class="dropbtn">Dropdown</button>
              <div class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
            </div>
            
            </body>
            </html>
ILLUMINAG gaming
  • 1
  • 2