I am currently working on creating a navigation menu using jQuery's slideToggle function. However, I have encountered an issue where the dropdown menu keeps sliding up and down quickly when hovering over all of them at once.
I would like to modify these transitions so that when transitioning from a list with a larger height to a lower height, the dropdown menu slides directly to the boundary of the lower height menu instead of sliding up to the top first and then back down to the lower height.
For example, let's say we have Tab A(>Dropdown A) & Tab B(>Dropdown B). Dropdown A has a height of 150px and Dropdown B has a height of 100px. What I want is: When hovering over Tab A, Dropdown A slides down to 150px from the top. Then, if I hover over Tab B, Dropdown A disappears and Dropdown B is shown. The transition should slide from 150px to 100px instead of going from 150px > 0px > 100px.
Would it be possible to achieve this effect simply with jQuery? Are there any restrictions or limitations that may prevent me from achieving my desired result? Any insights or assistance would be greatly appreciated! Thank you!
$(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>