About menus on websites

Asked

Viewed 147 times

3

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 site, but I would like to make menus similar to that of this site "http://iswift.com.br/", in which when you hover over the menu, it makes a beautiful effect and such. But since I don’t have much practice, I don’t know how to do it. Could someone help me?

css
  • 3

    Hello Renan, welcome to Stack Overflow in English. It would be nice if the question could be more specific (take a look at our [help] to better understand how the site works, it’s not like a forum). Did you learn about animations/transitions via CSS in this course? It’s the basis of the effect you want. It would be nice if you tried it yourself first, and then [Edit] your question explaining what you already tried. Thank you.

  • I suggest you find out a little about this: http://jquery.com/ And more specifically about this: http://www.w3schools.com/jquery/event_hover.asp Some examples you can even use:http://www.webmaster.pt/76-menu-jquery-14624.html Very vague question, try to do something and post what you did.

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 that of Hover (white background). In the menu Anchor’s Hover, the first item creates a negative margin at the top, so it goes up, disappears, and the item below is visible. The orange background is an Anchor or even list-item Hover.

I recommend you read about transitions (css3) and inspect the item code to see things in more detail.

0

What I would do would be easier, is an image in transition, 1 image that gets the 2 types of colors of the letters, white and black, making an event in the "Hover" of the "div" or of any element that is using so that the image goes up and down. Follow an example:

http://jsfiddle.net/hLs6v/

But in the mentioned site, you are using 2 custom "span" that makes this effect... But with this example it is easy to customize your way later..

Edited:

To better explain the code done, what makes the event stay slowly is the "Transition-Duration", so instead of putting the image as background and putting a color only, and in the event ul:Hover put another color, the colors will move slowly, giving the desired event!

Example with color only: http://jsfiddle.net/hLs6v/1/

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.