From dc6db80fa72286704849ef61ee0e5ccb5841cb09 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Tue, 2 Jul 2024 14:28:49 -0400 Subject: Conversion to barf for testing purposes --- _posts/2020-03-31-stripe-menu-css.md | 38 ------------------------------------ 1 file changed, 38 deletions(-) delete mode 100644 _posts/2020-03-31-stripe-menu-css.md (limited to '_posts/2020-03-31-stripe-menu-css.md') diff --git a/_posts/2020-03-31-stripe-menu-css.md b/_posts/2020-03-31-stripe-menu-css.md deleted file mode 100644 index 2ad4867..0000000 --- a/_posts/2020-03-31-stripe-menu-css.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -layout: post -title: "Stripe Menu Dropdowns (CSS)" -date: 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 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](https://stripe.com)) - -
- Stripe default menu -
Stripe's default menu dropdown (using both CSS & JavaScript) (direct link to image)
-
- -### Our recreation ([CodePen Demo](https://codepen.io/bradleytaunt/full/ExjMjLL)) - -
- Stripe menu recreated -
Our recreation with pure CSS (zero JavaScript) (direct link to image)
-
- -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](https://codepen.io/bradleytaunt/pen/ExjMjLL) -- cgit v1.2.3-54-g00ecf