From dcfb172704f3afb68a30425029ec834be2883274 Mon Sep 17 00:00:00 2001 From: bt Date: Sat, 8 Jun 2024 13:22:19 -0400 Subject: More content porting, on-going markdown changes for lowdown support --- build/minimal-css-menu/index.html | 68 +++++++++++++++++++++++---------------- 1 file changed, 40 insertions(+), 28 deletions(-) (limited to 'build/minimal-css-menu/index.html') diff --git a/build/minimal-css-menu/index.html b/build/minimal-css-menu/index.html index 57ddc3c..8e44de5 100644 --- a/build/minimal-css-menu/index.html +++ b/build/minimal-css-menu/index.html @@ -1,62 +1,74 @@ - + Minimal CSS: Dropdown Menu - - + + +
-

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.

+ +

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>
+
+
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 */
+
+
CSS

+
+
/* resets - optional */
 ul { list-style: none; padding: 0; }
 ul li { display: inline-block; position: relative; }
 
-/* minimal dropdown CSS */
-ul li > ul {
+/* minimal dropdown CSS */
+ul li > ul {
     left: -9999px;
     position: absolute;
     visibility: hidden;
 }
-ul li:hover > ul, ul li:focus-within > ul {
+ul li:hover > ul, ul li:focus-within > ul {
     left: 0;
     visibility: visible;
 }
 

-
Live demo on CodePen

+
+
Live demo on CodePen

+
 
Feel free to check out the live demo on CodePen here.