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/minimal-css-menu.md | |
parent | 088c87bcb58be576308da503d4f11a68843c5013 (diff) |
Conversion to barf for testing purposes
Diffstat (limited to 'posts/minimal-css-menu.md')
-rw-r--r-- | posts/minimal-css-menu.md | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/posts/minimal-css-menu.md b/posts/minimal-css-menu.md new file mode 100644 index 0000000..a343e81 --- /dev/null +++ b/posts/minimal-css-menu.md @@ -0,0 +1,55 @@ +# Minimal CSS: Dropdown Menu + +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). |