aboutsummaryrefslogtreecommitdiff
path: root/_posts/2019-04-26-minimal-css-menu.md
diff options
context:
space:
mode:
authorBradley Taunt <bt@btxx.org>2024-01-22 13:06:19 -0500
committerBradley Taunt <bt@btxx.org>2024-01-22 13:06:19 -0500
commitd2e4da10c806d815eded44ade076babb78802c16 (patch)
tree7494261e22f3255926204164449c7345f5b500e5 /_posts/2019-04-26-minimal-css-menu.md
Initial commit to new cgit platform
Diffstat (limited to '_posts/2019-04-26-minimal-css-menu.md')
-rw-r--r--_posts/2019-04-26-minimal-css-menu.md62
1 files changed, 62 insertions, 0 deletions
diff --git a/_posts/2019-04-26-minimal-css-menu.md b/_posts/2019-04-26-minimal-css-menu.md
new file mode 100644
index 0000000..cb18c5e
--- /dev/null
+++ b/_posts/2019-04-26-minimal-css-menu.md
@@ -0,0 +1,62 @@
+---
+title: 'Minimal CSS: Dropdown Menu'
+date: 2019-04-26 00:00:00 Z
+layout: post
+description: Creating CSS menu dropdowns with as little code as possible
+summary: Simple demo on how to develop CSS menu dropdowns with as little code as possible,
+ while still maintaining proper accessibility support.
+redirect_from: "/2019/04/26/minimal-css-menu/"
+---
+
+*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
+```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
+```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).
+
+* footnotes will be placed here. This line is necessary
+{:footnotes} \ No newline at end of file