Impressive Fullscreen Navigation Menu with animations
Create impressive navigation menu in STUDIO that opens with an animated hamburger button. The modal (pop-up) window is full screen with scroll-y enabled. Each link in the navigation is animated on hover. An additional element is visible photos in interaction with the user. This is a universal solution for website navigation or listing various elements such as blog or portfolio entries.
0:00 - Live preview / final effect
0:18 - Creating a hamburger menu button
1:08 - Creating a hover effect for a hamburger
3:16 - Creating a new modal page
4:29 - Creating the first link
07:10 - Added underline effect on hover
08:19 - Duplicating an item
08:58 - Naming project layers for easier finding
09:33 - Hover effect for elements
10:55 - Checking live view for the first time
11:10 - Visual fixes
12:13 - Creating further links by duplicating a ready element
13:16 - Activating scroll-y support for modal
13:52 - Changing the navigation bar to absolute position with a blur effect
14:29 - Link redirect setting
15:34 - Added hover color changing effect
15:51 - Added a photo visible on hover with the zoom-in effect
16:53 - Duplicating the footer
--
Studio.Design is the best website builder for designers.
--
Create your site for free: https://studio.design
Follow on X: / studio