Adding a fade-in effect to submenu using CSS - css

Question

I have a simple question. I am trying to add a fade-in effect to the submenus like in this page but I don't really understand the ul li ul selectors concept well and so it is not coming out correct.,
It doesn't seem really difficult but I am doing something wrong which I can't figure out!!
How can I add this CSS transition effect? I have tried using the animate.css library but usage of the library is not mandatory and I am OK with a solution which doesn't use it also.
.classname li:hover > ul{
display:block;
-moz-animation: fadeInUp .3s ease-in ;
-webkit-animation: fadeInUp .3s ease-in ;
animation:fadeInUp .3s ease-in ;
}
.classname ul li:hover > ul{
display:block;
-moz-animation: fadeInRight .3s ease-in ;
-webkit-animation: fadeInRight .3s ease-in ;
animation:fadeInRight .3s ease-in ;
}
Demo: Below is a snippet which has my current coding attempt.
/* MENU NAVIGATION */
#nav span {
display: none;
}
#nav,
#nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
font-family: 'Josefin Sans', sans-serif;
float: left;
margin-left: 1%;
margin-right: 1%;
position: relative;
width: 98%;
}
#nav ul.subs {
background-color: #FFFFFF;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
color: #333333;
display: none;
left: 0;
padding: 2%;
position: absolute;
top: 54px;
width: 96%;
}
#nav > li {
border-bottom: 5px solid transparent;
float: left;
margin-bottom: -5px;
text-align: left;
-moz-transition: all 300ms ease-in-out 0s;
-ms-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
transition: all 300ms ease-in-out 0s;
}
#nav li a {
display: block;
text-decoration: none;
-moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
white-space: normal;
}
#nav > li > a {
color: #333333;
display: block;
line-height: 49px;
padding: 0 15px;
text-transform: uppercase;
}
#nav > li:hover > a,
#nav > a:hover {
background-color: #F55856;
color: #FFFFFF;
}
#nav li.active > a {
background-color: #333333;
color: #FFFFFF;
}
/* submenu */
#nav li:hover ul.subs {
display: block;
}
#nav ul.subs > li {
display: inline-block;
float: none;
padding: 10px 1%;
vertical-align: top;
width: 33%;
}
#nav ul.subs > li a {
color: #777777;
line-height: 20px;
}
#nav ul li a:hover {
color: #F55856;
}
#nav ul.subs > li > a {
font-size: 1.3em;
margin-bottom: 10px;
text-transform: uppercase;
}
#nav ul.subs > li li {
float: none;
padding-left: 8px;
-moz-transition: padding 150ms ease-out 0s;
-ms-transition: padding 150ms ease-out 0s;
-o-transition: padding 150ms ease-out 0s;
-webkit-transition: padding 150ms ease-out 0s;
transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
padding-left: 15px;
}
<div class="container">
<ul id="nav">
<li>Home
</li>
<li>Prodotti
<span id="s1"></span>
<ul class="subs">
<li>Header a
<ul>
<li>Submenu x
</li>
<li>Submenu y
</li>
<li>Submenu z
</li>
</ul>
</li>
<li>Header b
<ul>
<li>Submenu x
</li>
<li>Submenu y
</li>
<li>Submenu z
</li>
</ul>
</li>
</ul>
</li>
<li>Shop
</li>
<li>Area Privata
</li>
<li>Contatti
</li>
</ul>
</div>

Answer 1

There is no need for an animation or a separate library to achieve the effect that you need. These can be achieved by just using transitions and some CSS transforms.
Demo: (explanation is provided below).
/* MENU NAVIGATION */
#nav span {
display: none;
}
#nav,
#nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
font-family: 'Josefin Sans', sans-serif;
float: left;
margin-left: 1%;
margin-right: 1%;
position: relative;
width: 98%;
}
#nav ul.subs {
background-color: #FFFFFF;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
color: #333333;
left: 0;
padding: 2%;
position: absolute;
top: 54px;
width: 96%;
}
#nav > li {
border-bottom: 5px solid transparent;
float: left;
margin-bottom: -5px;
text-align: left;
transition: all 300ms ease-in-out 0s;
}
#nav li a {
display: block;
text-decoration: none;
transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
white-space: normal;
}
#nav > li > a {
color: #333333;
display: block;
line-height: 49px;
padding: 0 15px;
text-transform: uppercase;
}
#nav > li:hover > a,
#nav > a:hover {
background-color: #F55856;
color: #FFFFFF;
}
#nav li.active > a {
background-color: #333333;
color: #FFFFFF;
}
/* submenu */
#nav ul.subs > li {
display: inline-block;
float: none;
padding: 10px 1%;
vertical-align: top;
width: 33%;
}
#nav ul.subs > li a {
color: #777777;
line-height: 20px;
}
#nav ul li a:hover {
color: #F55856;
}
#nav ul.subs > li > a {
font-size: 1.3em;
margin-bottom: 10px;
text-transform: uppercase;
}
#nav ul.subs > li li {
float: none;
padding-left: 8px;
transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
padding-left: 15px;
}
#nav > li > ul {
opacity: 0;
transform: translateY(25%);
transition: all 150ms ease;
pointer-events: none;
}
#nav > li:hover > ul {
opacity: 1;
transform: translateY(0%);
pointer-events: auto;
}
#nav > li > ul > li > ul {
opacity: 0;
transform: translateX(50%);
transition: all 150ms ease;
}
#nav > li > ul > li:hover > ul {
opacity: 1;
transform: translateX(0%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container">
<ul id="nav">
<li>Home
</li>
<li>Prodotti
<span id="s1"></span>
<ul class="subs">
<li>Header a
<ul>
<li>Submenu x
</li>
<li>Submenu y
</li>
<li>Submenu z
</li>
</ul>
</li>
<li>Header b
<ul>
<li>Submenu x
</li>
<li>Submenu y
</li>
<li>Submenu z
</li>
</ul>
</li>
</ul>
</li>
<li>Shop
</li>
<li>Area Privata
</li>
<li>Contatti
</li>
</ul>
</div>
Code Explained:
In order to produce an effect similar to that in the page which you linked (that is, the 1st level submenu does a fade-in + move up on hover and the 2nd level sub-menu does a fade-in + move left on hover), the following things need to be done:
Currently you are toggling the display property of the ul that contains the first level submenu when hovering on PRODOTTI. But change of value to the display property is not transitionable and because of this the submenu will appear in an instant. Just remove the lines that cause this.
#nav ul.subs {
background-color: #FFFFFF;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
color: #333333;
/*display: none; comment out or remove this line */
left: 0;
padding: 2%;
position: absolute;
top: 54px;
width: 96%;
}
/* remove these */
#nav li:hover ul.subs {
display: block;
}
After that set the initial state of the ul that contains the submenu to have opacity: 1 and also add transform: translateY(25%) to it. This will push the submenu's container down by 25% of its height.
#nav > li > ul{
opacity: 0;
transform: translateY(25%);
transition: all 150ms ease;
pointer-events: none;
}
When the PRODOTTI link is hovered, change the submenu's opacity to 1 and translate it back to its original position by setting `transform: translateY(0%). This makes it look as though the submenu is fading-in and is moving up at the same time.
#nav > li:hover > ul{
opacity: 1;
transform: translateY(0%);
pointer-events: auto;
}
For the second level submenu, the same steps are followed except that instead of using translateY, we are using translateX because it has to be moved to the right and not down.
#nav > li > ul > li > ul{
opacity: 0;
transform: translateX(50%);
transition: all 150ms ease;
}
#nav > li > ul > li:hover > ul{
opacity: 1;
transform: translateX(0%);
}