diff options
author | Bradley Taunt <bt@btxx.org> | 2024-07-02 14:28:49 -0400 |
---|---|---|
committer | Bradley Taunt <bt@btxx.org> | 2024-07-02 14:28:49 -0400 |
commit | dc6db80fa72286704849ef61ee0e5ccb5841cb09 (patch) | |
tree | 9235d796229d49211c27a07b9d18585d503baa94 /_posts/2019-04-26-minimal-css-menu.md | |
parent | 088c87bcb58be576308da503d4f11a68843c5013 (diff) |
Conversion to barf for testing purposes
Diffstat (limited to '_posts/2019-04-26-minimal-css-menu.md')
-rw-r--r-- | _posts/2019-04-26-minimal-css-menu.md | 58 |
1 files changed, 0 insertions, 58 deletions
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 - - - <nav> - <ul> - <li><a href="">Home</a></li> - <li><a href="">About</a></li> - <li><a href="">Services</a> - <ul> - <li><a href="">Design</a></li> - <li><a href="">Development</a></li> - <li><a href="">Custom Pizzas</a></li> - </ul> - </li> - <li><a href="">Contact</a></li> - </ul> - </nav> - - -### 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). |