I took an HTML and CSS course and now I'm putting the learning into practice. For this, I'm trying to set up a website, but I would like to make menus similar to the one on this site " link ", in which when hovering the mouse above the menu, it makes a beautiful and such effect. But since I do not have much practice, I do not know how to do it. Could someone help me?
About menus on websites
3
asked by anonymous 09.07.2014 / 01:52
2 answers
1
Basically, each item in the menu is duplicated, where the top item is the normal state (black background) and the bottom is the hover (white background). In the anchor hover of the menu, the first item creates a negative margin at the top, so it goes up, disappears, and the item below becomes visible. The orange background is an hover of the anchor or the list-item itself.
I recommend you read about transitions (css3) and inspect the item code to see things in more detail.
09.07.2014 / 04:31
0
What I would do that would be easier, is a transitional image, 1 image that gets the 2 color types of the letters, white and black, making an event in the "hover" of the div or any element that image to go up and down. Here is an example:
But in the site you mentioned, you are using 2 custom spanners that do this effect ... But with this example it is easy to customize your way later ..
Edited:
In order to better explain the code made, what causes the event to stay slowly is "transition-duration", so instead of putting the image as background and putting a color only, and in the ul: hover event put another color, the colors will transit slowly, giving the desired event!
Example with only color: link
09.07.2014 / 13:50