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/2019-04-26-minimal-css-menu.md | 58 ----------------------------------- 1 file changed, 58 deletions(-) delete mode 100644 _posts/2019-04-26-minimal-css-menu.md (limited to '_posts/2019-04-26-minimal-css-menu.md') diff --git a/_posts/2019-04-26-minimal-css-menu.md b/_posts/2019-04-26-minimal-css-menu.md deleted file mode 100644 index ec90cb4..0000000 --- a/_posts/2019-04-26-minimal-css-menu.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -layout: post -title: "Minimal CSS: Dropdown Menu" -date: 2019-04-26 ---- - - -I love the idea of stripping away as much CSS as possible, while still maintaining the original UI concept. Let's build out a demo example with a simple menu dropdown element. - -Interesting facts about our final CSS menu: - -- Total weight 121 bytes minified! (not including any resets etc.) -- No complex HTML structures -- Accessibility support - -Now to see the final code in all it's glory: - -### HTML - - - - - -### CSS - - - /* resets - optional */ - ul { list-style: none; padding: 0; } - ul li { display: inline-block; position: relative; } - - /* minimal dropdown CSS */ - ul li > ul { - left: -9999px; - position: absolute; - visibility: hidden; - } - ul li:hover > ul, ul li:focus-within > ul { - left: 0; - visibility: visible; - } - - -## Live demo on CodePen - -Feel free to check out the live demo on CodePen [here](https://codepen.io/bradleytaunt/pen/MRLevy). -- cgit v1.2.3-54-g00ecf