Delay closing a dropdown

Asked

Viewed 200 times

6

Is there a way, alternative, more lite, to superfish, to delay the closing of a dropdown menu? When the menu is at Hover, it obviously opens, and when the mouse is no longer focused on it, the menu closes. Like to have a delay in closing this menu. Something similar to superfish.

inserir a descrição da imagem aqui

PS EDIT

I found something similar to what is asked in the question, with some considerations. It is the Unhover Intent in JS CSS-TRICKS works to a certain extent. It doesn’t work with more than one dropdown. What can be done to make it more efficient is: Dropdown must maintain delay, including in the dropdown dropdown. But the delay should end if the mouse moves to another main Nav item. 

#primary_nav_wrap
{
	margin-top:15px
}

#primary_nav_wrap ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul a
{
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height:32px;
	padding:0 15px;
	font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
	background:#ddd
}

#primary_nav_wrap ul li:hover
{
	background:#f6f6f6
}

#primary_nav_wrap ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0
}

#primary_nav_wrap ul ul li
{
	float:none;
	width:200px
}

#primary_nav_wrap ul ul a
{
	line-height:120%;
	padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
	top:0;
	left:100%
}

#primary_nav_wrap ul li:hover > ul
{
	display:block
}
<nav id="primary_nav_wrap">
<ul>
  <li class="current-menu-item"><a href="#">Home</a></li>
        <li class="has-children"><a href="#">Sub Menu 2</a>
          <ul class="sub-menu">
            <li><a href="#">Schiller</a></li>
            <li><a href="#">Gogol</a></li>
            <li><a href="#">Nietzsche</a></li>
              <li class="has-children"><a href="#">Schoppenhauer</a>
                <ul class="sub-menu">
                  <li><a href="#">Linspector</a></li>
                  <li><a href="#">Shakespeare</a></li>
                  <li><a href="#">Andrade</a></li>
                  <li class="has-children"><a href="#">Code Geass</a>
                    <ul class="sub-menu">
                      <li><a href="#">Shingeki No Kyojin</a></li>
                      <li><a href="#">Shisekai yori</a></li>
                      <li><a href="#">No game no life</a></li>
                      <li><a href="#">One Punch Man</a></li>
                      <li><a href="#">Nanatsu no Tasai</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Tolstói</a></li>
                  <li><a href="#">Platão</a></li>
                </ul>
              </li>
            <li><a href="#">Dostoievski</a></li>
            <li><a href="#">Immanuel Kant</a></li>
          </ul>
        </li>
  <li><a href="#">Deep Menu</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a>
      
        <ul>
          <li><a href="#">Deep Menu 1</a>
            <ul>
              <li><a href="#">Sub Deep 1</a></li>
              <li><a href="#">Sub Deep 2</a></li>
              <li><a href="#">Sub Deep 3</a></li>
                <li><a href="#">Sub Deep 4</a></li>
            </ul>
          </li>
          <li><a href="#">Deep Menu 2</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 3</a>
    <ul>
      <li class="dir"><a href="#">Sub Menu 1</a></li>
      <li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a>
        <ul>
          <li><a href="#">Category 1</a></li>
          <li><a href="#">Category 2</a></li>
          <li><a href="#">Category 3</a></li>
          <li><a href="#">Category 4</a></li>
          <li><a href="#">Category 5</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>

</ul>
</nav>

References

https://codepen.io/team/css-tricks/pen/myLByd

https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/

http://benalman.com/code/projects/jquery-dotimeout/examples/hoverintent/#1b

https://superfish.joelbirch.co/examples/

javascript

  • Have you tried using the transition specifying the delay as in this example? It doesn’t work for you?

  • @Diegorafaelsouza I have tried this, but it is not as efficient, unless it is with some conditionals. The dropdown delay should end. The moment the mouse is moved to another navigation item.

2 answers

2

I made an example that has a delay of 500ms before the menu closes. I left it commented in the CSS where you change this time to more or less. TB had to change the style of sub-menu of display:none/block for scaleY() but visually there will be no difference.

Note that I have created some classes just for name the oxen and you can understand better (use type classes: #menu ul li ul {styles} can be VERY confusing!) Then create classes with type names .pai .filho .neto .bisneto and did the styles with transition and delay note that now only the submenus have a small delay after you take out the mouse, however the main items continue with display:none/block and without delay

        #primary_nav_wrap {
            margin-top: 15px
        }

        #primary_nav_wrap ul {
            list-style: none;
            position: relative;
            float: left;
            margin: 0;
            padding: 0
        }

        #primary_nav_wrap ul a {
            display: block;
            color: #333;
            text-decoration: none;
            font-weight: 700;
            font-size: 12px;
            line-height: 32px;
            padding: 0 15px;
            font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
        }

        #primary_nav_wrap ul li {
            position: relative;
            float: left;
            margin: 0;
            padding: 0
        }

        #primary_nav_wrap ul li.current-menu-item {
            background: #ddd
        }

        #primary_nav_wrap ul li:hover {
            background: #f6f6f6
        }

        #primary_nav_wrap ul ul li {
            float: none;
            width: 200px
        }

        #primary_nav_wrap ul ul a {
            line-height: 120%;
            padding: 10px 15px
        }

        #primary_nav_wrap ul ul ul {
            top: 0;
            left: 100%
        }

        

        #primary_nav_wrap .filho {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background: #fff;
            padding: 0;
        }
        #primary_nav_wrap .pai:hover>.filho {
            display: block;
        }
        

        #primary_nav_wrap .filho .neto ul, 
        #primary_nav_wrap .filho .neto .bisneto ul {
            transform: scaleY(0);
            transform-origin: top;
            transition: transform 0.1ms linear 500ms; /* aqui vc contro o tempo antes do submenu fechar */
            position: absolute;
            top: 100%;
            left: 0;
            background: #fff;
            padding: 0;
        }

        #primary_nav_wrap .filho .neto:hover>ul, 
        #primary_nav_wrap .filho .neto .bisneto:hover>ul {
            transform: scaleY(1);
            transition: transform 0.1ms linear 0s;
        }
        

        #primary_nav_wrap .neto > ul,
        #primary_nav_wrap .bisneto > ul {
            top: 0 !important;
            left: 100% !important;
        }
<nav id="primary_nav_wrap">
        <ul>
            <li class="current-menu-item">
                <a href="#">Home</a>
            </li>
            <li class="pai">
                <a href="#">PAI 1</a>
                <ul class="filho">
                    <li>
                        <a href="#">FILHOS</a>
                    </li>
                    <li>
                        <a href="#">Gogol</a>
                    </li>
                    <li>
                        <a href="#">Nietzsche</a>
                    </li>
                    <li class="neto">
                        <a href="#">NETO</a>
                        <ul class="sub-menu">
                            <li>
                                <a href="#">Linspector</a>
                            </li>
                            <li>
                                <a href="#">Shakespeare</a>
                            </li>
                            <li>
                                <a href="#">Andrade</a>
                            </li>
                            <li class="bisneto">
                                <a href="#">BISNETO</a>
                                <ul class="sub-menu">
                                    <li>
                                        <a href="#">Shingeki No Kyojin</a>
                                    </li>
                                    <li>
                                        <a href="#">Shisekai yori</a>
                                    </li>
                                    <li>
                                        <a href="#">No game no life</a>
                                    </li>
                                    <li>
                                        <a href="#">One Punch Man</a>
                                    </li>
                                    <li>
                                        <a href="#">Nanatsu no Tasai</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">Tolstói</a>
                            </li>
                            <li>
                                <a href="#">Platão</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Dostoievski</a>
                    </li>
                    <li>
                        <a href="#">Immanuel Kant</a>
                    </li>
                </ul>
            </li>
            <li class="pai">
                <a href="#">PAI 2</a>
                <ul class="filho">
                    <li>
                        <a href="#">FILHOS2</a>
                    </li>
                    <li class="neto">
                        <a href="#">NETO2</a>
                        <ul class="sub-menu">
                            <li class="bisneto">
                                <a href="#">BISNETO2</a>
                                <ul class="sub-menu">
                                    <li>
                                        <a href="#">Shingeki No Kyojin</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="pai">
                <a href="#">PAI 3</a>
                <ul class="filho">
                    <li>
                        <a href="#">FILHOS 3</a>
                    </li>
                    <li class="neto">
                        <a href="#">NETO 3</a>
                        <ul class="sub-menu">
                            <li>
                                <a href="#">Linspector</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>

Delay option in the entire menu including "parents"

        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }


        #primary_nav_wrap {
            margin-top: 15px
        }

        #primary_nav_wrap ul {
            list-style: none;
            position: relative;
            float: left;
            margin: 0;
            padding: 0
        }

        #primary_nav_wrap ul a {
            display: block;
            color: #333;
            text-decoration: none;
            font-weight: 700;
            font-size: 12px;
            line-height: 32px;
            padding: 0 15px;
            font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
        }

        #primary_nav_wrap ul li {
            position: relative;
            float: left;
            margin: 0;
            padding: 0
        }

        #primary_nav_wrap ul li.current-menu-item {
            background: #ddd
        }

        #primary_nav_wrap ul li:hover {
            background: #f6f6f6
        }

        #primary_nav_wrap ul ul {
            transform: scaleY(0);
            transform-origin: top;
            transition: transform 0.1ms linear 500ms; /* aqui vc contro o tempo antes do submenu fechar */
            position: absolute;
            top: 100%;
            left: 0;
            background: #fff;
            padding: 0
        }

        #primary_nav_wrap ul ul li {
            float: none;
            width: 200px
        }

        #primary_nav_wrap ul ul a {
            line-height: 120%;
            padding: 10px 15px
        }

        #primary_nav_wrap ul ul ul {
            top: 0;
            left: 100%
        }

        #primary_nav_wrap ul li:hover>ul {
            transform: scaleY(1);
            transition: transform 0.1ms linear 0s;
        }
<nav id="primary_nav_wrap">
        <ul>
            <li class="current-menu-item">
                <a href="#">Home</a>
            </li>
            <li class="has-children">
                <a href="#">Sub Menu 2</a>
                <ul class="sub-menu">
                    <li>
                        <a href="#">Schiller</a>
                    </li>
                    <li>
                        <a href="#">Gogol</a>
                    </li>
                    <li>
                        <a href="#">Nietzsche</a>
                    </li>
                    <li class="has-children">
                        <a href="#">Schoppenhauer</a>
                        <ul class="sub-menu">
                            <li>
                                <a href="#">Linspector</a>
                            </li>
                            <li>
                                <a href="#">Shakespeare</a>
                            </li>
                            <li>
                                <a href="#">Andrade</a>
                            </li>
                            <li class="has-children">
                                <a href="#">Code Geass</a>
                                <ul class="sub-menu">
                                    <li>
                                        <a href="#">Shingeki No Kyojin</a>
                                    </li>
                                    <li>
                                        <a href="#">Shisekai yori</a>
                                    </li>
                                    <li>
                                        <a href="#">No game no life</a>
                                    </li>
                                    <li>
                                        <a href="#">One Punch Man</a>
                                    </li>
                                    <li>
                                        <a href="#">Nanatsu no Tasai</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">Tolstói</a>
                            </li>
                            <li>
                                <a href="#">Platão</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Dostoievski</a>
                    </li>
                    <li>
                        <a href="#">Immanuel Kant</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Menu 1</a>
                <ul>
                    <li>
                        <a href="#">Sub Menu 1</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 2</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 3</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 4</a>

                        <ul>
                            <li>
                                <a href="#">Deep Menu 1</a>
                                <ul>
                                    <li>
                                        <a href="#">Sub Deep 1</a>
                                    </li>
                                    <li>
                                        <a href="#">Sub Deep 2</a>
                                    </li>
                                    <li>
                                        <a href="#">Sub Deep 3</a>
                                    </li>
                                    <li>
                                        <a href="#">Sub Deep 4</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">Deep Menu 2</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Sub Menu 5</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Menu 2</a>
                <ul>
                    <li>
                        <a href="#">Sub Menu 1</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 2</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Menu 3</a>
                <ul>
                    <li class="dir">
                        <a href="#">Sub Menu 1</a>
                    </li>
                    <li class="dir">
                        <a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a>
                        <ul>
                            <li>
                                <a href="#">Category 1</a>
                            </li>
                            <li>
                                <a href="#">Category 2</a>
                            </li>
                            <li>
                                <a href="#">Category 3</a>
                            </li>
                            <li>
                                <a href="#">Category 4</a>
                            </li>
                            <li>
                                <a href="#">Category 5</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Sub Menu 3</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 4</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 5</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Menu 4</a>
            </li>
            <li>
                <a href="#">Menu 5</a>
            </li>
            <li>
                <a href="#">Menu 6</a>
            </li>
            <li>
                <a href="#">Contact Us</a>
            </li>
        </ul>
    </nav>

  • I was seeing something in codepen, which uses js, with timer, working to some extent, the problem is I expected the menu to close when the mouse was moved to the main navigation. https://codepen.io/team/css-tricks/pen/myLByd

  • So from what I understand you want the delay only in sub-menus and not in the main menu is this?

  • Boy, I think so, if I open an Item with sub-menu, but move the mouse to another item outside that sub-menu, but for the main navigation, the "Nav" I expected the delay to be stopped.

  • I see a future in this simple ** Unhover Intent in JS ** CSS-TRICKS solution in codepen. It’s almost perfect. What can be done to make it more efficient is: Dropdown must maintain delay, including in the dropdown dropdown. But the delay should end if the mouse moves to another main Nav item.

  • 1

    @Johnquimera expensive I needed to give a fry here but I solved, now I made in a way that only the sub-menus have the delay. Main menu items have no delay. I also put a name in the classes to facilitate the organization to facilitate the understanding of the order of ul > li

  • That’s just it. That solves a little, there’s a superiority in the solutions I’ve found so far in css. I just noticed that there is a delay, not the delay itself, this is perfect. I talk about the transition between the parent items. I hover over an item and open a dropdown, and then I go upstairs with the mouso on another item with dropdown. If the delay between the PAI dropdowns ended at the time another PAI is Hover, it would be perfect. I imagine that maybe this is something that can be solved with js not?

  • 1

    @Johnquimera but if you take the mouse out of the submenu, I mean, to another part of the screen than the menu it already disappears at the time... Face my forte is not JS, actually I don’t know anything about JS and the only thing I could do is disappear with the grandson or bizneto, but I can’t bring it back in the second Hover. I tried to make a . mouseleave with jQuery, but it did not roll.

  • 1

    I understand. I had an idea for this code, just need to put the timeout here https://stackoverflow.com/a/13811736/2705271

  • 1

    I added an answer, which uses jquery to delay the removal of the sub-menu class. It’s not yet perfect, it’s something that can be improved.

  • 1

    @Johnquimera is got interesting too, if you are already using jquery in other things of the site ai might be worth it, but if you use jQuery just because of the menu then I will have the option to use only css.

  • In fact, I already intend to use other things in jquery, although I took a taste for the DOM, as this solution is not yet complete, and it is apparently simple, I believe it can be improved pure JS or even jquery, I think it is something @dvd would do very easily.

Show 6 more comments

1

This is an almost perfect basic jquery solution, using the setTimeout

References:

https://stackoverflow.com/a/18514406/2705271

http://jsfiddle.net/cse_tushar/5G3BH/16/

jQuery(function($) {
    "use strict";

var x = '',y = '';
$('#primary_nav_wrap ul > li').mouseenter(function (e1) {
    var thisItem = $(this);
    clearTimeout(x);

    y = setTimeout(function (e1) {

        if ($(thisItem).children().hasClass('show-the-menu')) {
            return;
        } else {
            $(thisItem).children().addClass('show-the-menu');
            $(thisItem).siblings().children().removeClass('show-the-menu');
        }

    }, 0);

}).mouseleave(function (e2) {
    var thisItem = $(this);
    clearTimeout(y);
    x = setTimeout(function (e2) {
        if (!$(thisItem).children().hasClass('show-the-menu')) {
            return;
        } else {
            $(thisItem).children().removeClass('show-the-menu');
        }
    }, 1000);
});
  })
#primary_nav_wrap
{
	margin-top:15px
}

#primary_nav_wrap ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul a
{
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height:32px;
	padding:0 15px;
	font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
	background:#ddd
}

#primary_nav_wrap ul li:hover
{
	background:#f6f6f6
}

#primary_nav_wrap ul ul
{
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0
}

#primary_nav_wrap ul ul li
{
	float:none;
	width:200px
}

#primary_nav_wrap ul ul a
{
	line-height:120%;
	padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
	top:0;
	left:100%
}

#primary_nav_wrap .sub-menu {
    display: none;
}
#primary_nav_wrap ul li:hover > ul,
#primary_nav_wrap ul .sub-menu.show-the-menu {
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="primary_nav_wrap">
<ul>
  <li class="has-children"><a href="#">Parent A</a>
    <ul class="sub-menu">
      <li class="has-children"><a href="#">Sub a1</a>
          <ul class="sub-menu">
            <li><a href="#">Item a1.1</a></li>
            <li><a href="#">Item a1.2</a></li>
      <li class="has-children"><a href="#">SUB SUB 2</a>
          <ul class="sub-menu">
            <li><a href="#">Item a1.1</a></li>
      <li class="has-children"><a href="#">Sub SUB SUB 3</a>
          <ul class="sub-menu">
            <li><a href="#">Item a1.1</a></li>
            <li><a href="#">Item a1.2</a></li>
            <li><a href="#">Item a1.3</a></li>
        </ul> 
      </li>
            <li><a href="#">Item a1.2</a></li>
            <li><a href="#">Item a1.3</a></li>
        </ul> 
      </li>
            <li><a href="#">Item a1.3</a></li>
        </ul> 
      </li>
      <li><a href="#">Sub a2</a></li>
      <li><a href="#">Sub a3</a></li>
    </ul>
  </li>
  <li class="has-children"><a href="#">Parent B</a>
    <ul class="sub-menu">
      <li><a href="#">Sub b1</a></li>
      <li><a href="#">Sub b2</a></li>
      <li><a href="#">Sub b3</a></li>
    </ul> 
  </li>
  <li><a href="#">No Sub Menu</a></li>
</ul>
</nav>

  • @dvd What do you think of this? How can we improve this code?

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.