Create horizontal animated menus using fontawsome

HTML-CSS
1

I would like to have a menu horizontally but with the same effect as the link below
https://www.w3schools.com/css/tryit.asp?filename=trycss_css_image_overlay_slidetop
and also using the icons https://fontawesome.com/.

thank you guys in advance

2

These are the lines you need to change:

.overlay { /* initial, i.e. not hovered values */
  bottom: 100%;
  right: 0;
  width: 100%;
  height: 0;
}

.container:hover .overlay { /* hovered values */
  bottom: 0;
  height: 100%;
}

The current initial values (i.e. not hovered) form a rectangle that is 100% wide and 0% tall. The hovered values cause the rectangle to resize to 100% tall. The line transition: .5s ease is what causes the animation between inital and hovered states.

What you need is an initial rectangle that’s 0% wide and 100% tall, with a hover state that resizes it to 100% wide.

As for Font Awesome, you haven’t explained how you actually want to use it, but I suggest you start with the documentation.

3

a Nav menu like https://www.w3schools.com/css/tryit.asp?filename=trycss_css_image_overlay_slidetop but instead of its picture show the icon’s from font awsome using jQuery

4

That isn’t a nav menu.

Please post a link your code so far on Codepen or similar, then explain what’s not working and exactly how you want it to work.