Delay closing a dropdown

Question

Delay closing a dropdown

Navigation

#1 by (2 votes)
#2 by (1 votes)

6

Is there an alternative way, lite, to superfish, to delay the closing of a dropdown menu? When the menu is hovered, it obviously opens, and when the mouse is no longer focused on it, the menu closes. I would like to have a delay in closing this menu. Something similar to superfish.

PSEDIT

Ifoundsomethingsimilartowhatisaskedinthequestion,withsomeconsiderations.It'stheCSS-TRICKS Unhover Intent in JS , which works to some extent. Does not work with more than one dropdown. What can be done to make it more efficient is: Dropdown must maintain the delay, even in the dropdown of the dropdown. But the delay should end if the mouse goes 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

link

javascript

asked by anonymous 03.07.2018 / 20:03

2 answers

Why insert a blank line at the end of the code? How to simulate load in a database?

score 2 · Answer 1

I made an example that has a delay of 500ms before the close menu. I left it commented on in the CSS where you change this time for more or less. Tb I had to change the style of the submenu from display:none/block to scaleY() but visually it will have no difference.

Please note that I have created some classes just to give names to the oxen and you can better understand (use type classes: #menu ul li ul ul {styles} can be VERY confusing!) Then create classes with type names .pai .filho .neto .bisneto and made the styles with transition and delay note that now only the submenus have a small delay after you take the mouse, however the main items remain 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>

Option with delay in the whole menu including in the "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>

score 1 · Answer 2

This is a near perfect basic solution in jquery using setTimeout

References:

link

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><navid="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>