Drop Down Deployment with Different Height: Sets the height to automatically break the rolldown
I now have the following script:
body, * {
margin: 0;
padding: 0;
}
.wrapper {
border: 1px solid black;
}
li {
height: 100px;
}
#two {
height: 0em;
overflow: hidden;
transition-property: height;
transition: all 1s ease-in-out;
}
.wrapper:hover #two {
height: 4em;
}
https://jsfiddle.net/ehu2cxe2/
This seems to work, however, in my actual project I have set the height of the dropdown menu, but still the tall children, they all have different heights, so I cannot give them all a fixed height, say 4em.
I tried changing this to height:auto
hover, but that breaks everything. What am I doing wrong?
source to share
If you know how tall the kids will be, you can use max-height
.
body, * {
margin: 0;
padding: 0;
}
.wrapper {
border: 1px solid black;
}
#two {
max-height: 0em;
overflow: hidden;
transition-property: height;
transition: all 1s ease-in-out;
}
.wrapper:hover #two {
max-height: 4em;
}
<div class="wrapper">
<div id="one">(content)</div>
<div id="two">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</div>
</div>
Or using js / jquery you can get the height of the displayed list and apply that as the height to transition
var h = $('#two ul').outerHeight(),
$two = $('#two'),
$wrapper = $('.wrapper');
$wrapper.hover(function() {
$two.css('height',h);
}, function() {
$two.css('height','0');
});
body, * {
margin: 0;
padding: 0;
}
.wrapper {
border: 1px solid black;
}
#two {
height: 0em;
overflow: hidden;
transition-property: height;
transition: all 1s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="one">(content)</div>
<div id="two">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</div>
</div>
You can also use $.slideToggle()
, but I prefer to keep the animation / transition in CSS.
var $twoUl = $('#two ul'),
$wrapper = $('.wrapper');
$wrapper.hover(function() {
$twoUl.stop().slideToggle();
});
body, * {
margin: 0;
padding: 0;
}
.wrapper {
border: 1px solid black;
}
#two {
overflow: hidden;
}
#two ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="one">(content)</div>
<div id="two">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</div>
</div>
source to share
By using percentages for .wrapper
c max-height: 100%
, you can skip javascript
and keep everything css
. This way you can set the elements list
at as many different heights as you need.
body, * {
margin: 0;
padding: 0;
}
.wrapper {
border: 1px solid black;
}
#two {
max-height: 0em;
overflow: hidden;
transition-property: height;
transition: all 1s ease-in-out;
}
.wrapper:hover #two {
max-height: 100%;
}
li:nth-child(1) {
height: 2.5em;
line-height: 2.5em;
background-color: lightgrey;
}
li:nth-child(2) {
height: 1.5em;
line-height: 1.5em;
background-color: grey;
}
li:nth-child(3) {
height: 3.1em;
line-height: 3.1em;
background-color: dimgrey;
}
<div class="wrapper">
<div id="one">(content)</div>
<div id="two">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</div>
</div>
source to share