Responsive Navigation With an Animated Dropdown Using CSS Clip-Path

Responsive Navigation With an Animated Dropdown Using CSS Clip-Path

Kevin Powell via YouTube Direct link

Starting at I look at animating the hamburger menu.

4 of 7

4 of 7

Starting at I look at animating the hamburger menu.

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Responsive Navigation With an Animated Dropdown Using CSS Clip-Path

Automatically move to the next video in the Classroom when playback concludes

  1. 1 Starting at I look at simply building out a vertical menu.
  2. 2 At I add the hamburger menu
  3. 3 At I use a little simply bit of jQuery to get the mobile menu to toggle on and off
  4. 4 Starting at I look at animating the hamburger menu.
  5. 5 Then at I look at adding in some icons with Font Awesome
  6. 6 With the mobile version done, at I add a media query so that it is a normal, horizontal navigation on larger screens.
  7. 7 Then at , with the whole thing wrapped up, I change the animation to use clip-path to make the toggling animation a little more interesting, and then fix up a few little loose ends.

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.