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

At I use a little simply bit of jQuery to get the mobile menu to toggle on and off

3 of 7

3 of 7

At I use a little simply bit of jQuery to get the mobile menu to toggle on and off

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.