CODEWITHSUNDEEP
htmlcssmenufadesubmenu
Axel Jakobsson
Axel Jakobsson

Reputation: 25

CSS -webkit fading in menu

So I'm currently trying to get my menu (which worked well before I added the sub-menus) to fade color when hovered. I can't really understand what the problem is but guessing that the webkit function (Again, which worked before and I haven't touched it) isn't really affecting the hover function.

Find code here:

jsfiddle.net/ChH4F

Upvotes: 0

Views: 1628

Answers (1)

Josh Powell
Josh Powell

Reputation: 6297

The transition you had was fine but without a hover state on your a tags there is nothing to change.

This is what I added,

ul#navmenu li a:hover {
   color: rgba(0, 0, 0, 0.4);
}

This is what I changed since you don't need all,

-webkit-transition: color 0.7s ease;
-moz-transition: color 0.7s ease;
-o-transition: color 0.7s ease;
-ms-transition: color 0.7s ease;
transition: color 0.7s ease;

Here is the JSFIDDLE.

Revision 1 - fading sub-menu links of the same color

Revision 2 - fading sub-menu links of a different color

Drop-Down fading in without JS/jQuery,

ul#navmenu li ul.sub-menu {
   position: absolute;
   top: 40px;
   left: 0;
   width: 165px;
   background-color:rgba(0, 13, 38, 0.9);
   text-align:left;
   color:black;
   opacity: 0; /* Used to make it fade */
   height: 0; /* Used to make it fade */
   overflow: hidden; /* Used to make it fade */
}
ul#navmenu li:hover ul.sub-menu {
   opacity: 1; /* Used to make it fade */
   height: auto; /* Used to make it fade */
   overflow: none; /* Used to make it fade */
}

Also don't forget to add the css-transitions to your main ul, ul.sub-menu.

Fade-in-out Menu

What you are forgetting to add,

ul#navmenu, ul#navmenu ul.sub-menu {
   margin: 0px;
   padding: 0;
   padding-top:px;
   list-style-type: none;
   list-style-image: none;
   width: auto;
   height: auto;
   transition: all 0.6s ease;
   -webkit-transition: all 0.6s ease;
   -moz-transition: all 0.6s ease;
   -ms-transition: all 0.6s ease;
   -o-transition: all 0.6s ease;
}

You need the transition: all 0.6s ease; on the element that is changing or it will just show/hide.

Upvotes: 1

Related Questions