Menu Hover Interaction

13.07.2020

Made with: HTML,CSS (SCSS),JS

View Code

Menu Hover Interaction

Menu Image Animation On Hover

1.07.2020

A hover effect for a menu where images appear with an animation on each item.

Made with: HTML,CSS,JS

View Code

PlaceholderMenu Image Animation On Hover

Grid Navigation

30.06.2020

Made with: HTML,CSS,JS

View Code

Grid Navigation

The Context Menu

28.06.2020

Made with: HTML,CSS,JS

View Code

The Context Menu

Responsive Navigation With Animations

7.04.2020

Made with: HTML,CSS,JS

View Code

Responsive Navigation With Animations

Expandable Menu

7.02.2020

Made with: HTML,CSS,JS

View Code

Expandable Menu

Header Underline

29.01.2020

Made with: HTML,CSS,JS (TypeScript)

View Code

Header Underline

Staggered Blink Text Menu

28.01.2020

Made with: HTML,CSS (SCSS),JS (TypeScript)

View Code

Staggered Blink Text Menu

Svg Navigation

22.01.2020

Tinker with SVG syntax, the textPath element and the startOffset attribute to create an intriguing navigation. Animated with anime.js.

Made with: HTML,CSS,JS

View Code

Svg Navigation

Paper Pieces Navigation Menu

20.01.2020

Made with: HTML,CSS,JS

View Code

Paper Pieces Navigation Menu

Full Page Navigation

19.01.2020

Made with: HTML,CSS (SCSS),JS

View Code

Full Page Navigation

Window Shade Navigation

18.01.2020

Made with: HTML,CSS,JS

View Code

Window Shade Navigation

Full-Page Nav Stacking Animation

15.01.2020

A nav menu concept in which the three bars fill up the screen. This happens in a way that looks like blocks being stacked. When collapsing the menu, the sequence is reversed.

Made with: HTML,CSS,JS

View Code

Full-Page Nav Stacking Animation

Full-Page Navigation

14.01.2020

Created full-page navigation using anime.js and some SVGs.

Made with: HTML,CSS (SCSS),JS

View Code

Full-Page Navigation

Flip Navigation

14.01.2020

A bit laggy on initial flip though...

Made with: HTML,CSS (SCSS),JS

View Code

Flip Navigation

Sticky Scrollspy Navigation

10.01.2020

Smooth scrolling sticky scrollspy navigation.

Made with: HTML,CSS,JS

View Code

Sticky Scrollspy Navigation

Css Nav Animation

4.01.2020

Made with: HTML,CSS (SCSS),JS

View Code

Css Nav Animation

Header Nav Overflow Into Mobile Nav

27.11.2019

The idea behind this header nav is to move items that no longer fit into a navigation drawer/mobile nav. The trick behind it is to give the header a set height and allow the header nav items to wrap, but hide the overflow. Then use JavaScript to check for any items that have wrapped and reveal them in the drawer/mobile nav.

Made with: HTML,CSS (SCSS),JS

View Code

Header Nav Overflow Into Mobile Nav

Nav Menu With Circular Reveal Animation

23.11.2019

Made with: HTML,CSS,JS

View Code

Nav Menu With Circular Reveal Animation

Menu Interaction

4.10.2019

Made with: HTML (Pug),CSS (SCSS),JS

View Code

Menu Interaction