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

Black Sheep · Accepted Answer · 2013-10-06 02:28:20Z

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 6, 2013 at 2:28

Black Sheep

6,7047 gold badges32 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TheAmazingKnight Over a year ago

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?

Black Sheep Over a year ago

You welcome! And yes.. Read this question in SO that solve all your question and for more examples for transitions-property, take a look this: Using_CSS_transitions! Good luck and enjoy it! :)

Serge Seredenko · Accepted Answer · 2013-10-06 02:26:25Z

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 6, 2013 at 2:26

Serge Seredenko

3,5517 gold badges24 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to add a hover transition effect on the navigation?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related