Reputation: 53
I have my jsfiddle here.
I basically want the hidden div to slide open when about is hovered over with a mouse. It's going to be a part of a navigation bar and the description of the page will slow below.
I've tried using
-webkit-transition: all 0.5s ease-in-out;
to no avail. Here is my code:
.aboutnav {
background-color: #a661ca;
}
.aboutcontents {
display: none;
}
.aboutnav:hover .aboutcontents {
display: block;
background-color: #a661ca;
}
Upvotes: 2
Views: 1364
Reputation: 206618
.aboutnav {
background-color: #a661ca;
overflow:hidden;
max-height:60px;
transition: max-height 1s;
-webkit-transition: max-height 1s;
}
.aboutnav:hover {
max-height:180px;
/* Don't exagerate with this one,
otherwise the initial animation will not be noticable,
just set it to a preferred maximal height. */
}
Upvotes: 0
Reputation: 456
You should change the margin-top of .aboutcontents
to make it slide. As a default .aboutcontents
is hidden behind .aboutnav
, hovering on .aboutnav
, .aboutcontents
slides down.
/* margin and padding reset */
* {
margin:0;
padding:0;
}
h4 {
background-color: #a661ca;
}
.aboutcontents {
background-color: #a661ca;
display: block; /* required for setting margin-top */
margin-top: -100px;
position: relative;
z-index:-1;
transition: margin 0.5s ease-in-out;
}
.aboutnav:hover .aboutcontents {
margin-top: 0px;
}
Upvotes: 1
Reputation: 96
You can't add a transition for display. You'll want to consider hiding and showing the content by other means, such as max-height
and opacity
. You'll want to set the non-zero max-height
value to be something large, so you don't accidentally clip your content.
.aboutnav {
background-color: #a661ca;
}
.aboutcontents {
max-height: 0;
opacity: 0;
overflow: hidden;
-webkit-transition: all 0.5s ease-in-out;
}
.aboutnav:hover .aboutcontents {
max-height: 200px;
opacity: 1;
}
Upvotes: 1