From 3f6a9546ec13063d0d5bdf21d30a93d3e8aa6050 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Tue, 2 Jul 2024 14:22:21 -0400 Subject: Rebuild changes based off latest barf --- build/posts/minimal-css-menu/index.html | 84 --------------------------------- 1 file changed, 84 deletions(-) delete mode 100644 build/posts/minimal-css-menu/index.html (limited to 'build/posts/minimal-css-menu/index.html') diff --git a/build/posts/minimal-css-menu/index.html b/build/posts/minimal-css-menu/index.html deleted file mode 100644 index 3a4bac4..0000000 --- a/build/posts/minimal-css-menu/index.html +++ /dev/null @@ -1,84 +0,0 @@ - - - - - - - - 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