All Courses

Create 5 Easy Menus for your websites

Create 5 Easy Menus for your websites

Transition and animations for web navbars

What you’ll learn

Create 5 Easy Menus for your websites

  • Create responsive web menus

  • Improve your Css Skills

  • Hamburger icon animations

  • Create nice transitions for your web menus


  • Basic knowledge of HTML and CSS


Hi Guys!

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

This course is divided into 5 Sections; the content of every video is explained below:

First Section: Intro

– Get a summary of what you will learn in the 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 sidebar 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, the responsive navbar, and menu links.

– Create 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 sidebar menu

– Create a sidebar menu that shifts the background image when clicking on the Icon.

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

Fifth Section: Icons sidebar menu

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

– Add a gradient background to the links when hovering 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.

Who this course is for:

  • Beginner and intermediate programmers and web developers
  • Beginner web designers

Create 5 Easy Menus for your websites

How to make outstanding transitions for menu links with Css

If the links does not work, contact us we will fix them