Why does my CSS animation not work on my sidebar? - css

Question

Good Day, I'm trying to create a slidedown menu using some JS and CSS but it's not working. Here's the fiddle link:
ul.show-child{
height: auto;
display: block;
-webkit-transition: height 1s ease;
-moz-transition: ease-in 2s none;
-ms-transition: ease-in 2s none;
-o-transition: ease-in 2s none;
transition: ease-in 2s none;
}
https://jsfiddle.net/gkrja9jy/
What I want to do, is to add some cool animation when I show the hidden div. By the way, I just copied the transition effect from this site

Answer 1

There is a pure CSS solution. I corrected your example. Make sure that you write correct HTML code. Here is the new code and a fiddle:
HTML code:
<ul class="custom-sidebar">
<li>
Accountancy
</li>
<li>
Grade School
<ul>
<li>Goals and Objectives</li>
<li>Clubs and Orgs</li>
<li>Photo Gallery</li>
<li>Summer Tutorial</li>
</ul>
</li>
</ul>
CSS code:
li ul {
display: block;
height: 0px;
overflow: hidden;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
li:hover ul {
height: 100px;
display: block;
}
.custom-sidebar a,.custom-sidebar a:visited {
color: #0f5882;
display: block;
font-weight: bold;
height: 25px;
margin-left: -23px;
padding-left: 23px;
vertical-align: middle;
width: 100% !important;
}
.custom-sidebar li {
list-style: outside none none;
padding-left: 17px;
}
.custom-sidebar li a {
background-color: #ebecec;
border-left: 6px solid #116b9e;
padding-top: 2px;
margin-bottom: 8px;
}
https://jsfiddle.net/u6yrL0a0/2/
It is usually best to avoid JavaScript if it is not needed.

Answer 2

yo can use jquery to create the animation like this:
var jq=jQuery.noConflict();
jq(document).ready(function(){
jq('.menu-div').hover(function(){
if(jq(this).children(":first").hasClass('has-child')){
var thisx = jq(this).children(":first");
thisx.next('ul').slideDown(1000);
}
});
});
jq(document).ready(function(){
jq('.menu-div').mouseleave(function(){
if(jq(this).children(":first").hasClass('has-child')){
var thisx = jq(this).children(":first");
thisx.next('ul').slideUp(1000);
}
});
});
and the css will be like this :
ul.hide-child{
display: none;
overflow: hidden;
}
ul li ul{
-webkit-transition: all 1s;
-moz-transition: all 1s ;
transition: all 1s;
display:none;
height:auto;
}
.custom-sidebar .post-link,.post-link:visited{
color: #0f5882;
display: block;
font-weight: bold;
height: 25px;
margin-left: 0px;
padding-left: 23px;
vertical-align: middle;
width: 100% !important;
}
.custom-sidebar li{
background-color: #ebecec;
border-left: 6px solid #116b9e;
list-style: outside none none;
margin-bottom: 0px;
padding-left: 17px;
padding-top: 2px;
}
https://jsfiddle.net/gkrja9jy/5/