From 6b742c459266b18e2b375b35205ce8a6c02f0452 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Thu, 6 Jun 2024 08:05:12 -0400 Subject: Initial commit --- build/minimal-css-menu/index.html | 81 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 build/minimal-css-menu/index.html (limited to 'build/minimal-css-menu/index.html') diff --git a/build/minimal-css-menu/index.html b/build/minimal-css-menu/index.html new file mode 100644 index 0000000..57ddc3c --- /dev/null +++ b/build/minimal-css-menu/index.html @@ -0,0 +1,81 @@ + + + + + + + Minimal CSS: Dropdown Menu + + + + + + +
+

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:

+ +

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.

+ \ No newline at end of file -- cgit v1.2.3-54-g00ecf