Menu
i'm having some trouble with animating a dropdown menu using css3. I need it to work with css3 and not jQuery or javascript. I've added all the rules neccessary but still the effect doesn't happen. Can anyone please help? Here is a fiddle of my code. Thank you.
http://jsfiddle.net/Zmr7u/6/
html code: <header class="main-header"> <nav class="main-nav"> <ul class="top-nav"> <li> <a href="#">home</a> <ul class="drop-down"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </li> <li> <a href="#">about</a> <ul class="drop-down"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </li> <li> <a href="#">products</a> <ul class="drop-down"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </li> <li> <a href="#">contacts</a> <ul class="drop-down"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </li> </ul> </nav> </header> css code: nav.main-nav { background: #333; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f)); background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f); background-image: -moz-linear-gradient(top, #2f2f2f, #4f4f4f); background-image: -ms-linear-gradient(top, #2f2f2f, #4f4f4f); background-image: -o-linear-gradient(top, #2f2f2f, #4f4f4f); background-image: linear-gradient(top, #2f2f2f, #4f4f4f); width: 100%; } .top-nav { border-bottom: 2px solid #111; height: 30px; list-style-type: none; margin: 0; padding-left: 0; width: 100%; } .top-nav li { background: #333; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2f2f2f), to(#4f4f4f)); background-image: -webkit-linear-gradient(top, #2f2f2f, #4f4f4f); background-image: -moz-linear-gradient(top, #2f2f2f, #4f4f4f); background-image: -ms-linear-gradient(top, #2f2f2f, #4f4f4f); background-image: -o-linear-gradient(top, #2f2f2f, #4f4f4f); background-image: linear-gradient(top, #2f2f2f, #4f4f4f); border-bottom: 2px solid #111; border-right: 1px solid #555; float: left; font-size: 14px; height: 20px; padding-top: 10px; position: relative; text-align: center; width: 150px; } .top-nav li ul.drop-down { position: absolute; top: 32px; left: 0; visibility: hidden; display: none; opacity: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; } .top-nav li:hover ul.drop-down { visibility: visible; opacity: 1; display: block; } .top-nav li .drop-down li { height: 20px; -webkit-transition: height 0.3s ease; -moz-transition: height 0.3s ease; -o-transition: height 0.3s ease; transition: height 0.3s ease; } .top-nav li .drop-down li:hover { height: 30px; } .top-nav li a { color: #aaa; padding-top: 5px; position: absolute; top: 0; left: 0; width: 150px; height: 25px; text-decoration: none; } 
257
CSS animations work on most modern mobile and desktop browsers. However, your animations may not work if you're using an older browser or a version of your browser that hasn't been updated in several years, simply due to lack of browser support.
It means the transition opacity changes the state of the opaque element to transparent with a defined time duration. The transition has four properties: transition-property, transition-duration, transition-timing-function, and transition-delay, used to perform the opacity effect on an image.
When we want to use transition for display:none to display:block, transition properties do not work. The reason for this is, display:none property is used for removing block and display:block property is used for displaying block. A block cannot be partly displayed. Either it is available or unavailable.
In the CSS, use the @keyframes rule paired with fadeIn. At 0%, set the opacity to 0. At 100%, set the opacity to 1. This creates the fade-in effect.
You can just use visibility without using display:
.top-nav li ul.drop-down { list-style-type: none; position: absolute; top: 32px; left: -40px; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; } .top-nav li:hover ul.drop-down { visibility: visible; opacity: 1; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
