From 6b742c459266b18e2b375b35205ce8a6c02f0452 Mon Sep 17 00:00:00 2001
From: Bradley Taunt <bt@btxx.org>
Date: Thu, 6 Jun 2024 08:05:12 -0400
Subject: Initial commit

---
 posts/stripe-menu-css.md | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 posts/stripe-menu-css.md

(limited to 'posts/stripe-menu-css.md')

diff --git a/posts/stripe-menu-css.md b/posts/stripe-menu-css.md
new file mode 100644
index 0000000..4e2c2e3
--- /dev/null
+++ b/posts/stripe-menu-css.md
@@ -0,0 +1,35 @@
+# Stripe Menu Dropdowns (CSS)
+
+2020-03-31
+
+In a previous article I wrote, [Minimal CSS: Dropdown Menus](blog/minimal-css-menu), 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](https://stripe.com/) team is pretty fantastic. Their clean approach using subtle animations and minimal elements make for a pleasant experience. Unfortunately, there is <i>one problem</i> with their current dropdown menus on their main website:
+
+<b>They don't work if JavaScript is disabled.</b>
+
+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](https://stripe.com))
+
+<figure>
+    <img src="/public/images/stripe-default-menu.webp" alt="Stripe default menu">
+    <figcaption>Stripe's default menu dropdown (using both CSS & JavaScript) (<a href="/public/images/stripe-default-menu.webp">direct link to image</a>)</figcaption>
+</figure>
+
+### Our recreation ([CodePen Demo](https://codepen.io/bradleytaunt/full/ExjMjLL))
+
+<figure>
+    <img src="/public/images/stripe-recreated.webp" alt="Stripe menu recreated">
+    <figcaption>Our recreation with pure CSS (zero JavaScript) (<a href="/public/images/stripe-recreated.webp">direct link to image</a>)</figcaption>
+</figure>
+
+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 <i>steal</i> this for any and all purposes. Enjoy!
+
+[Live CodePen Example](https://codepen.io/bradleytaunt/pen/ExjMjLL)
-- 
cgit v1.2.3-54-g00ecf