CODEWITHSUNDEEP
jqueryhtmlcssnavbarslidetoggle
Sammi
Sammi

Reputation: 261

Undesired slideToggle effect

So I am now creating my navigation menu with and jQuery slideToggle. But I found that in this case the dropdown menu will keep sliding up and down when I hover on all of them quickly at once.

I want to make some changes on those transitions that when we are changing from list with larger height to lower height, the dropdown menu would be sliding directly to the boundary of the lower height menu instead of sliding up to the top first and then sliding down to the lower height.

For example, I have Tab A(>Dropdown A) & Tab B(>Dropdown B). Dropdown A is with height 150px and Dropdown B is with 100px. I want to make it like: Hover on Tab A, Dropdown A slide down to height 150px from the top. Then if I hover on Tab B, Dropdown A will be disappeared and Dropdown B will be shown. But the transition would be sliding from 150px to 100px instead of 150px > 0px > 100px.

Can this just simply solve by jQuery? Does has any restriction to my desired effect? Please help if you have any opinion! Thanks!

 $(function(){
            $('.dropdown').hover(function(){
                $(this).find('div').slideToggle();
                $('.dropdown-content').css("left","0");

            })    
        })
            body{
              margin:0;
            }
            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: blue;
            }

            li {
                float: left;
            }

            li a, .dropbtn {
                display: inline-block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }

            li a:hover, .dropdown:hover .dropbtn {
                background-color: white;
                color:blue;
            }

            li.dropdown {
                display: inline-block;
            }

            .dropdown-content {
                display: none;
                position: absolute;
                background-color: white;
                width:100%;
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                z-index: 1;.
                left: 0 !important;
            }

            .dropdown-content a {
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
                text-align: left;
            }

            .dropdown-content a:hover 
                background-color: #f1f1f1;
            }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
            <li class="dropdown">
                <a href="javascript:void(0)" class="dropbtn">Home</a>
                <div class="dropdown-content">
                    <a href="#">Link A</a>
                    <a href="#">Link B</a>
                    <a href="#">Link C</a>
                    <a href="#">Link D</a>
                    <a href="#">Link E</a>
                    <a href="#">Link F</a>
                    <a href="#">Link G</a>
                </div>
            </li>
            <li class="dropdown">
                <a href="javascript:void(0)" class="dropbtn">News</a>
                <div class="dropdown-content">
                    <a href="#">Link I</a>
                    <a href="#">Link II</a>
                    <a href="#">Link III</a>
                </div>
            </li>
            <li class="dropdown">
                <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                    <a href="#">Link 4</a>
                    <a href="#">Link 5</a>
                </div>
            </li>
        </ul>

        <h3>Test</h3>
        <p>Testing</p>

Upvotes: 1

Views: 557

Answers (1)

VXp
VXp

Reputation: 12108

You are missing the .stop() method:

$(function(){
  $('.dropdown').hover(function(){
    $(this).find('div').stop().slideToggle();
    $('.dropdown-content').css("left","0");
  });
});
body {
  margin:0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: blue;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: white;
  color: blue;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;.
  left: 0 !important;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
            <li class="dropdown">
                <a href="javascript:void(0)" class="dropbtn">Home</a>
                <div class="dropdown-content">
                    <a href="#">Link A</a>
                    <a href="#">Link B</a>
                    <a href="#">Link C</a>
                    <a href="#">Link D</a>
                    <a href="#">Link E</a>
                    <a href="#">Link F</a>
                    <a href="#">Link G</a>
                </div>
            </li>
            <li class="dropdown">
                <a href="javascript:void(0)" class="dropbtn">News</a>
                <div class="dropdown-content">
                    <a href="#">Link I</a>
                    <a href="#">Link II</a>
                    <a href="#">Link III</a>
                </div>
            </li>
            <li class="dropdown">
                <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                    <a href="#">Link 4</a>
                    <a href="#">Link 5</a>
                </div>
            </li>
        </ul>

        <h3>Test</h3>
        <p>Testing</p>

.stop()

Upvotes: 2

Related Questions