Create 5 Easy Menus for your websites

Transition and animations for web navbars

Hi Guys!

What you’ll learn

  • Create responsive web menus.
  • Improve your Css Skills.
  • Hamburger icon animations.
  • Create nice transitions for your web menus.

Course Content

  • Introduction –> 1 lecture • 5min.
  • Dropdown Menu –> 1 lecture • 26min.
  • Gradient side bar Menu –> 1 lecture • 30min.
  • Full Height Menu –> 1 lecture • 13min.
  • Shift Side bar Menu –> 1 lecture • 18min.
  • Side bar menu with Icons –> 1 lecture • 15min.

Auto Draft


Hi Guys!

WELCOME TO THE COURSE “Create 5 Menu navbars for your websites”

This course is divided in 5 Sections, the content of every video is explained below:


First Section: Intro

– Get the summary of what you will be learning in the entire course.


Second Section: Dropdown Menu

– Create a transition for the Menu Icon with the transform property, from a vertical hamburger icon to an arrow facing down.

– Add a shadow to your navbar and shadow to the links

– Create an animation for the links when you hover them.

– Improve your Css skills


Second Section: Gradient side bar menu

– Create a hamburger Icon with a gradient color that will transform into a gradient “X” once you click on it.

– Add a transition for the menu Icons as well as the responsive navbar and menu links.

– Create a hover animations for the links by switching the colors of each of them.


Third Section: Full Height menu

– Create a minimalist transition for the hamburger Icon when clicked.

– Display a full height menu when clicking on the menu Icon with a nice transition using the transform property.


Fourth Section: Shift side bar Menu

– Create a side bar menu that shift the background image when clicking on the Icon.

– Rotate the arrow icon 180 degrees to when clicking on it with the transform property and the value rotate.


Fifth Section: Icons side bar Menu

– Create a side bar menu with Icons on the left side of the page that show the link’s name when you hover on the navigation bar

– Add a gradient background to the links when hover them, also a zoom-in animation.

– Add a transition for the navbar.




All the code is made under the html File including the Css Code and JavaScript.

Each menu has a zip file attached that you can find on the “resources” with the html files and images.



Get Tutorial