₦airaland Forum

What's the name of this drop-down menu and how can I do it with React? It's urgent and for my job.

Use Chrome webpage inspection you want to view the HTML source code. Right-click the page and click on “View Page Source,” or press Ctrl + U

Brainmer:
Use Chrome webpage inspection you want to view the HTML source code. Right-click the page and click on “View Page Source,” or press Ctrl + U

OG.

Brainmer:
Use Chrome webpage inspection you want to view the HTML source code. Right-click the page and click on “View Page Source,” or press Ctrl + U

No this is a Figma File..How can I develop this ?

JSXyoungboy:
No this is a Figma File..How can I develop this ?

You'll probably have to use CSS border radius

JSXyoungboy:
No this is a Figma File..How can I develop this ?

Follow this steps

https://www.figma.com/community/plugin/747985167520967365/Figma-to-HTML%2C-CSS%2C-React-%26-more!

This is the kind of designs you see and start cursing the designer.

tensazangetsu20:
This is the kind of designs you see and start cursing the designer.

I wonder what those curved lines are meant for. They're not useful to the UX the highlighted color already does the job.

u can achieve that with parent element border and child element border and their border-radius .... also with the list bullets

Yup, u can add designs to list bullets



Parent element has a border-right

Child element has a border left with down border- radius(x) child element list bullet bad white background


Oh hover child element list bullet has border radius 50% with No background

Child element li has a border on hover



Example skeleton below.

JSXyoungboy:
No this is a Figma File..How can I develop this ?

Twitter implements something similar for replies/threads. Maybe you should inspect Twitter.

Same with Reddit.

JSXyoungboy:
What's the name of this drop-down menu and how can I do it with React? It's urgent and for my job.

You can view the source code of that component on figma then you implement on your css

JoyousFurnitire:
Twitter implements something similar for replies/threads. Maybe you should inspect Twitter.

Same with Reddit.

not same tho

GREATIGBOMAN:
u can achieve that with parent element border and child element border and their border-radius .... also with the list bullets

Yup, u can add designs to list bullets



Parent element has a border-right

Child element has a border left with down border- radius(x) child element list bullet bad white background


Oh hover child element list bullet has border radius 50% with No background

Child element li has a border on hover



Example skeleton below.

Same thing I said, good to know it worked for you

GREATIGBOMAN:
not same tho

I actually used the word "similar"

JSXyoungboy:
No this is a Figma File..How can I develop this ?

Loooool. Not every figma concept can be realized programmatically.
Me I would just understand the idea and design a simple drop down.

Rgade:
Loooool. Not every figma concept can be realized programmatically.
Me I would just understand the idea and design a simple drop down.

animaapp can convert any design to code but it is expensive to export to react or vuejs .

JoyousFurnitire:
I actually used the word "similar"

And I used the word "same"

GREATIGBOMAN:
And I used the word "same"

Abeg

Brainmer:
animaapp can convert any design to code but it is expensive to export to react or vuejs .

Expensive? Like computing wise?

Create a file name it dataList.js create another file name it sidebar.js inside sidebar map the list of arrays

GREATIGBOMAN:
u can achieve that with parent element border and child element border and their border-radius .... also with the list bullets

Yup, u can add designs to list bullets



Parent element has a border-right

Child element has a border left with down border- radius(x) child element list bullet bad white background


Oh hover child element list bullet has border radius 50% with No background

Child element li has a border on hover



Example skeleton below.

How did you learn this boss

creating those curved lines will be really really time consuming with CSS. just create the dropdown

Playermayweda:
How did you learn this boss

Omo men dey oh.