EXPANDING HOVER MENU

@code_candy

18.1K followers · usually 31.0K views a post

Views

271.7K

Likes

19.0K

Comments

125

Shares

1.7K

Selling · SaaS › Developer Tool

Code Candy Landseen in 5 videos →https://codecandyland.com/ ↗

Why it worked

The video demonstrates a visually appealing and functional UI element using clean code, appealing to developers and designers interested in front-end development techniques. The clear presentation of the CSS code alongside the animated menu provides educational value and showcases the creator's expertise.

Summary

This video demonstrates an expanding hover menu created with CSS. The menu features icons and text labels that appear and animate smoothly on hover, showcasing a clean and interactive user interface design.

Structure

1Title card: Expanding Hover Menu
2Demonstration of the initial menu state
3Hovering over 'Dashboard' reveals the label
4Hovering over 'Projects' reveals the label
5Hovering over 'Messages' reveals the label
6

More from @code_candy

Their other posts in the index, biggest breakout first.

Hovering over 'Settings' reveals the label

7Hovering over 'Log out' reveals the label

8Menu returns to initial state

Product placement

The video showcases a web development project, specifically an 'Expanding Hover Menu', which is likely a component or tutorial offered by the creator's website, Code Candy Land.

On-screen text

EXPANDING HOVER MENU style.css .menu-item { width: 52px; height: 52px; display: flex; align-items: center; gap: 0.75rem; overflow: hidden; border-radius: 90px; transition: width .45s cubic-bezier(.22, 1, .36, 1), background .3s ease, box-shadow .3s ease; } .menu-item:hover { width: 160px; background: rgba(255, 255, 255, 0.12); box-shadow: 0 0 28px rgba(0, 229, 255, 0.22); } .menu-label { opacity: 0; transform: translateX(-8px); transition: opacity .25s ease, max-width .45s ease, transform .35s ease; } .menu-item:hover .menu-label { opacity: 1; max-width: 100px; transform: translateX(0); }