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
Requirements
-
Basic knowledge of HTML and CSS
Description
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.
THIS COURSE IS AIMED AT BEGINNERS & INTERMEDIATE PROGRAMMERS, WEB DESIGNERS, AND WEB DEVELOPERS.
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
Get Course Now