Responsive 3D Hinged Menu with Hover Effects and Accessibility

Responsive 3D Hinged Menu with Hover Effects and AccessibilityResponsive 3D Hinged Menu with Hover Effects and Accessibility

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Manjesh Yadav

• Oct 21

Click Menu and your page tips back like a hinged lid, then drops below big numbered links, contact details and a language switch.

• A smooth 3D tilt on a spring • Hover a link and the rest fade while an arrow rolls in • Works on desktop, tablet and phone • Keyboard and screen reader friendly

Try it live: https://hingemenu.framer.website/

Completed work

Interaction Design UI Design Claude Framer Framer Website Design

TRUEFRAME

max

• Oct 21

does the spring tilt hold up on older phones or does it get choppy?

Manjesh Yadav

• Oct 21

Yep, it’s smooth on all the phones I tested, even older ones. On really small screens (under 5 inches) the tilted image under the header is a little hard to see, but everything else works fine!

Dmytro Zelinskyi

pro

• Nov 6

Solar Energy Website

A thin lime circle tells you which two words this page is about.

The headline sits over a sunset photo of a panel field. The "Get started" and "Explore innovations" buttons share the circle's lime, so the eye moves from the circled words straight to the next step.

Large faded capitals repeat those two words across the sky, faint enough to stay inside the photo. On mobile they break onto two lines, and the headline and button stack above two frosted cards.

Only two words of "Solar Energy for Your Home and Business" are lime, and the whole page follows them.

#SolarEnergy #RenewableEnergy #CleanTech #WebDesign #LandingPage #HeroSection #UIDesign #ResponsiveDesign #MobileDesign #FigmaDesign

Completed work