Featured

Build and animate a custom full screen menu — Build with me #5



Published
Join host Nelson Abalos Jr for a Build with me (BWM) session. We’ll learn how to create a custom full screen menu (without using the Webflow navbar component). We’ll also add Webflow interactions to animate the menu and apply a bit of jQuery to toggle page scrolling on and off.

Custom code used:

$('.nameOfYourClass').on('click', function(){
$('body').toggleClass('nameOfOtherClass');
});

Clonable link: https://webflow.com/website/ls-full-screen-menu

----------

00:00:00 Stream starting soon
00:05:10 May the 4th be with you
00:06:27 Stream agenda
00:07:05 Full screen menu demo
00:09:15 Element structure and CSS styling
00:17:53 Creating menu toggle interactions
00:23:12 Adding low code to toggle page scrolling
00:30:01 Making the menu responsive and accessible
00:34:01 Site reviews and Q&A
00:54:17 Outro
00:55:48 Thanks for watching!

----------
Get started with Webflow: https://wfl.io/2r7cVUW
Join the Webflow Community: https://webflow.com/community

https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow
Category
Web design
Be the first to comment