diff options
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). |