From 07e4a2dafe248280b5610f8c7d09b0f30b530f54 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Mon, 10 Jun 2024 09:41:25 -0400 Subject: Initial modifications to rebuilt only changed files based on mod date, performance updates --- build/posts/stripe-menu-css/index.html | 52 ++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 build/posts/stripe-menu-css/index.html (limited to 'build/posts/stripe-menu-css/index.html') diff --git a/build/posts/stripe-menu-css/index.html b/build/posts/stripe-menu-css/index.html new file mode 100644 index 0000000..7d4d03f --- /dev/null +++ b/build/posts/stripe-menu-css/index.html @@ -0,0 +1,52 @@ + + + + + + + + Stripe Menu Dropdowns (CSS) + + + + + + + +
+

Stripe Menu Dropdowns (CSS)

+

2020-03-31

+

In a previous article I wrote, Minimal CSS: Dropdown Menus, I showed how you could create a basic menu dropdown with only 121 bytes of CSS. While this demo is great for simple text-based menu dropdowns, it doesn’t show just how complex (in a good way) you can make CSS-only menus. So, let’s do just that.

+

What we want to emulate

+

I think, like most designers, that the UI and web design work from the Stripe team is pretty fantastic. Their clean approach using subtle animations and minimal elements make for a pleasant experience. Unfortunately, there is one problem with their current dropdown menus on their main website:

+

They don’t work if JavaScript is disabled.

+

But we can easily fix that. So enough chit-chat, let’s rip-off their menu design and recreate it with only CSS!

+

Original (Stripe Website)

+

Our recreation (CodePen Demo)

+

Although our redesign is far from an exact replica (some subtle animations are missing which could always be added) - it’s still impressive what you can do with some bare-bones CSS. Just something to keep in mind the next time you decide to reach for a JavaScript library to implement a similar design.

+

See it live in action

+

Load in the CodePen below and play around with the menu dropdown. Feel free to re-use, break. share or steal this for any and all purposes. Enjoy!

+

Live CodePen Example

+ \ No newline at end of file -- cgit v1.2.3-54-g00ecf