How to add a hover transition effect on the navigation?

Question

I am asking a specific question about a specific problem that I don't know how to do but would like to add to my site.

1) When the parent li has a child, I want that nav to stayed hovered with the effect applied when going through the child elements. Right now, when I am no longer hovered over it, it will lose its hover effect and apply hover effects on the child elements when I want the parent li to still have the hovered effect when going through the sub navigation.

2)And the other thing I do not know how to do is transition effect when I hover over any navigation links, it will sort of have an fade in out effect when hovered in and out from. How do I do this?

I attempted to do this:

CSS:

#nav li:hover > ul{ /*display sub menus when hovered over*/
    left:0; /*show menu when hovered*/
    z-index:100; /*places the sub nav in frontier of all elements*/
    transition: all 2.4s ease-in-out -2s; /*transition: property duration timing-function delay;*/
    -moz-transition: all 2.4s ease-in-out -2s;
    -webkit-transition: all 2.4s ease-in-out -2s;
}

It brought about unexpected, but cool results of bringing out the submenus, sliding to the right. It's not what I intended, but okay. I just wanted the other two features applied but don't where to look. My full code is here: jsfiddle nav code

score 4 · Accepted Answer · answered Oct 06 '13 at 02:28

4

Show DEMO Transition

#nav a:hover{ 
    transition: ease-in-out all .4s; 
    -moz-transition: ease-in-out all .4s;
    -webkit-transition: ease-in-out all .4s;
    background-color:#000000;
    color:#FFFE41;
    text-decoration:none;
    font-weight:bold;
}

answered Oct 06 '13 at 02:28

Black Sheep

6,604
7
30
51

Exactly what I wanted. Thanks! I have a question though. I noticed your transition syntax was different from mine placing transition property after timing function. Does the order matter when doing transitions, like does it effect the outcome of the animations? – TheAmazingKnight Oct 06 '13 at 02:47
You welcome! And yes.. Read [this question in SO](http://stackoverflow.com/questions/9670075/css-transition-shorthand-with-multiple-properties) that solve all your question and for more examples for transitions-property, take a look this: [Using_CSS_transitions](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions)! Good luck and enjoy it! :) – Black Sheep Oct 06 '13 at 02:57

score 0 · Answer 2 · answered Oct 06 '13 at 02:26

0

I edited your code, changing left property to opacity and adding one more transition. Take a look: http://jsfiddle.net/YfuDT/

About part 1 of your question, I am afraid you won't achieve it with css, some javascript necessary.

answered Oct 06 '13 at 02:26

Serge Seredenko

3,541
7
21
38

How to add a hover transition effect on the navigation?

2 Answers2