Make A Responsive Navigation With Dropdown Menus From Scratch

Рет қаралды 24,388

Framer

Күн бұрын

Пікірлер: 32

@TokimatsuStudios 11 ай бұрын

All my homies LOVE Benjamin!!!

@muhammadbacar6051 8 ай бұрын

Nice tutorial starting to understand more about framer it is very similar to figma. If you can master auto layouts and components in Figma, you just have to master the stacks, frames and components in Framer and it is good to go. Nice tip for making drop down menus but there is still so many ways you can do if you understand components and stacks.

@AliSalmanWali 11 ай бұрын

Kindly always use the dark mode of framer and please do use zoom while you are navigating the cursor. it helps alot to learn faster

@AtomicPixels 10 ай бұрын

What?

@Smithsee 6 ай бұрын

If anyone has experienced a similar issue, I hope this solution helps! When switching from the top Navi to the menu dropdown (Trigger), if there is no text change input field within the dropdown (e.g., changing from 'Product' to 'Resources') >>>>> 13:45 Solution: 1. Go to the dropdown (Trigger) component. 2. Click on the text of that component (Product). 3. In [Text] - Content, select Create Variable ▸ Plain Text to create a variable. 4. Return to {Navi Comp}, and you will find a text-input field created.

@606test4 3 ай бұрын

Thank you so much for your solution. This problem has bothered me for a long time. Thank you.

@lindltailor 11 ай бұрын

This tutorial is super informative, on top of the awesome new feature. How did you get the iPhone mock-up?

@muhammadditafarel9677 6 ай бұрын

how do i found / create single component "caret" ?

@purnjayparmar 5 ай бұрын

Great Tutorial on Menus, can you share how can we tackle responsivess when it comes to Tablet screen if we created mega dropdowns with multiple links and image section?

@rumorscameras 15 күн бұрын

overlays and insert of emnus doesnt work for me, never worked

@makisam3969 6 ай бұрын

i did exactly what you did. unfortunately it didn't work after creating the third variant for the navigation menu.

@pierrestephenson4231 2 ай бұрын

Where do you get the carrot?

@vision3690 5 ай бұрын

awesome thank you!!

@takazcao 11 ай бұрын

Great tutorial

@terapeutstesti 10 ай бұрын

Unfortunately this tutorial is not for beginners and is not from scratch.

@DESIGNGANG-gr8jm Ай бұрын

Who ate carrots?🥕 Is it missing as it was updated or am I not finding it?

@vukvukasinovic3816 11 ай бұрын

This tutorial is amazing. How can I implement a phone that will work in the background like in this tutorial?

@JamiltonMacedo 11 ай бұрын

This Iphone animation is a video edit.

@staryDust 9 ай бұрын

I have a question about the default navigation bar as shown in your tutorial. When I use the default framer nav bar in my project, the dropdown menu doesn't appear on hover like it does in your demonstration. I've found that I need to change the appear animation to enter at opacity 1 for it to work. Also, the default navigation caret and dropdown don't seem to have the same smooth effect as illustrated in your video. Is there a specific setting or modification you used to achieve this smoother effect?

@staryDust 9 ай бұрын

"Just wanted to share an update: I figured out the issue with the default navigation bar and dropdown menus. It turns out that if you're editing in the component page or the home page using Chrome, the animations and dropdowns may not work as expected. However, after installing the desktop version of the software, everything works perfectly!

@stills2359 10 ай бұрын

benjamin why do you have the best wallpapers please release them

@georgekrax 11 ай бұрын

Is there another solution than duplicating the Links component? Imagine if I want to redesign the component and having to apply the changes on all its instances. Instead of duplicating components, can't we use a single Link component, create various instances and adjust the instances? Thank you Benjamin :)

@Framer 11 ай бұрын

Yes, that is also an option. Pro: single style for all links. Downside: twice the variants for all links and potentially mobile ones too, depending on the setup!

@AaronNguyen-g3e 10 ай бұрын

Will this work with the default locale selector?

@lyuhakusho 10 ай бұрын

I'm having an issue where the dropdown is closing too quickly for anyone to actually click on the links in it. Is this just something that can be solved with a delay on the closing animation? Thanks!

@emerlander 26 күн бұрын

For me, I faced something similar and realized it's something to do with the animation effects. Just remove the animation effects completely and it'll work fine. If you want animation, you can add it but just make sure to adjust it the way you want.