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
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