0

I am using a module to create a mega menu in Magento 2.3. When hovering over a main menu item, there is a drop down that displays content - and for several reasons the client wants a 1 second delay before it appears. There is no Jquery or Javascript in the module they have selected to use so I am trying to solve with CSS.

The following class requires the 1 second delay: .bss-megamenu .dropdown.bss-megamenu-fw .dropdown-menu

I have tried the following code which has not worked:

.bss-megamenu .dropdown.bss-megamenu-fw .dropdown-menu {transition: 1s;}

Full drop down CSS:

        margin-top: 0;

    }
    .bss-megamenu .dropdown-menu {
        border: 1px solid #efefef;
        box-shadow: none;
        padding: 0;

    }

       .bss-megamenu .dropdown-menu .withoutdesc {
        display: block;
        margin-top: 0;
        padding: 15px 20px;
        text-align: left;
        text-transform: none;
        width: 100%;
    }

      .bss-megamenu .dropdown-menu .withoutdesc ul li {
        padding: 3px 10px;
    }
    .bss-megamenu .dropdown-menu .withoutdesc ul li:hover, .bss-megamenu .dropdown-menu .withoutdesc ul li:focus {
        background-color: #f5f5f5 !important;
        color: #262626;
        text-decoration: none;
    }
    .bss-megamenu .dropdown-menu .withoutdesc li:last-child {
        border-bottom: 0 solid #fff;
    }

    .bss-megamenu .dropdown-submenu > .dropdown-menu {
        left: 100%;
        margin-left: -1px;
        margin-top: 0;
        top: 0;

    }
    .bss-megamenu .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
    .bss-megamenu .dropdown-submenu > a::after {
        border-color: transparent transparent transparent #cccccc;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        display: block;
        float: right;
        height: 0;
        margin-right: -10px;
        margin-top: 5px;
        width: 0;
    }
    .bss-megamenu .dropdown-submenu:hover > a::after {
        border-left-color: #ffffff;

    }
    .bss-megamenu .dropdown-submenu.pull-left {
        float: none;

    }
    .bss-megamenu .dropdown-submenu.pull-left > .dropdown-menu {
        left: -100%;
        margin-left: 10px;
    }

     .bss-megamenu .nav, .bss-megamenu .collapse, .bss-megamenu .dropup, .bss-megamenu .dropdown {
        position: static;
    }

        .bss-megamenu .dropdown-menu {
        left: auto;
    }
    .bss-megamenu .nav.navbar-right .dropdown-menu {
        left: auto;
        right: 0;
    }

    }
    .bss-megamenu .dropdown.bss-megamenu-fw .dropdown-menu {
        left: 0 !important;
        right: 0;
        overflow: auto;
        max-height: 500px;
        position: absolute;
        background-color: #fff;
        z-index: 9999;
    }
    .bss-megamenu .dropdown.bss-megamenu-fw {
        position: initial !important;
    }

    .bss-megamenu .navbar-nav > li .dropdown-menu {
        display: none;
    }

    ul.dropdown-menu.fullwidth li.bss-megamenu-content ul {
        display: block !important;
    }

    ul.dropdown-menu.fullwidth li.bss-megamenu-content ul li{
        font-weight: 400;
        padding-bottom: 10px;
    }

      .bss-megamenu .dropdown-menu {
        left: auto;
    }

If this cannot be solved with CSS, I am open to any other solutions.

Petey88
  • 89
  • 1
  • 9
  • You should include the CSS that actually shows the drop down menu also. – imvain2 May 18 '20 at 17:30
  • @imvain2 Edited. – Petey88 May 18 '20 at 17:38
  • Does this answer your question? [Transitions on the CSS display property](https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property) – imvain2 May 18 '20 at 17:45
  • Yes and no - because there is no "active" status coming from the main menu hover. Not sure what properties I should be applying the transition to. – Petey88 May 18 '20 at 17:50
  • The accepted answer doesn't use `active` just like your code it refers to `:hover`. https://stackoverflow.com/a/6943704/3684265 – imvain2 May 18 '20 at 17:51
  • @imvain2 I have applied the ` visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear;` to the `.bss-megamenu .dropdown.bss-megamenu-fw .dropdown-menu` class. However, the additional piece is still out. I have applied the hover styling to `.bss-megamenu .dropdown:hover > .dropdown-menu` and it doesn't seem to work. – Petey88 May 18 '20 at 18:44

1 Answers1

0

I made a simple demo, it should be effective

 * {
        padding: 2px;
        margin: 4px;
        list-style: none;
    }


    .box {
        border: 1px solid red;
    }

    h3 {
        border: 1px solid green;
    }

    .box ul {
        border: 1px solid blue;
    }

    /* -------------------- */
    
    .box ul {
        opacity: 0;
    }

    .box:hover ul {
        animation: hover 1s 1;
        opacity: 1;
    }

    @keyframes hover {
        0% {
            opacity: 0;
        }

        99% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }
<div class="box">
    <h3>Show items after one second</h3>
    <ul>
        <li>item01</li>
        <li>item02</li>
        <li>item03</li>
    </ul>
</div>
random
  • 11
  • 1
  • Hi @random. Thank you for your submission. If you view the conversation above, you will see that I am mostly there. Looking for some help to find the correct CSS hover class to apply the styling to. – Petey88 May 18 '20 at 18:52