aboutsummaryrefslogtreecommitdiff
path: root/build/minimal-css-menu
diff options
context:
space:
mode:
authorbt <bt@btxx.org>2024-06-08 13:22:19 -0400
committerbt <bt@btxx.org>2024-06-08 13:22:19 -0400
commitdcfb172704f3afb68a30425029ec834be2883274 (patch)
tree02ac480745db802d7af03f3213a0c568322170e3 /build/minimal-css-menu
parente146f8a64c793c337999ce316b16ebe5fe6f2dab (diff)
More content porting, on-going markdown changes for lowdown support
Diffstat (limited to 'build/minimal-css-menu')
-rw-r--r--build/minimal-css-menu/index.html68
1 files changed, 40 insertions, 28 deletions
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 @@
<!doctype html>
-<html lang="en" id="top">
+<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<title>Minimal CSS: Dropdown Menu</title>
- <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
- <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style>
+ <link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
+ <link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
+<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
</head>
<nav>
- <a href="#menu">Menu &darr;</a>
+ <a href="#menu">Menu &darr;</a>
</nav>
<main>
-<h1>Minimal CSS: Dropdown Menu</h1>
+<h1 id="minimal-css-dropdown-menu">Minimal CSS: Dropdown Menu</h1>
+
<p>2019-04-26</p>
-<p>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.</p>
+
+<p>I love the idea of stripping away as much CSS as possible, while still maintaining the original UI concept. Let&#8217;s build out a demo example with a simple menu dropdown element.</p>
+
<p>Interesting facts about our final CSS menu:</p>
+
<ul>
<li>Total weight 121 bytes minified! (not including any resets etc.)</li>
<li>No complex HTML structures</li>
<li>Accessibility support</li>
</ul>
-<p>Now to see the final code in all it's glory:</p>
-<h3>HTML</h3>
-<pre><code>&lt;nav&gt;
- &lt;ul&gt;
- &lt;li&gt;&lt;a href=&quot;&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
- &lt;li&gt;&lt;a href=&quot;&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
- &lt;li&gt;&lt;a href=&quot;&quot;&gt;Services&lt;/a&gt;
- &lt;ul&gt;
- &lt;li&gt;&lt;a href=&quot;&quot;&gt;Design&lt;/a&gt;&lt;/li&gt;
- &lt;li&gt;&lt;a href=&quot;&quot;&gt;Development&lt;/a&gt;&lt;/li&gt;
- &lt;li&gt;&lt;a href=&quot;&quot;&gt;Custom Pizzas&lt;/a&gt;&lt;/li&gt;
- &lt;/ul&gt;
- &lt;/li&gt;
- &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
- &lt;/ul&gt;
-&lt;/nav&gt;
+
+<p>Now to see the final code in all it&#8217;s glory:</p>
+
+<h3 id="html">HTML</h3>
+
+<pre><code>&#60;nav&#62;
+ &#60;ul&#62;
+ &#60;li&#62;&#60;a href=""&#62;Home&#60;&#47;a&#62;&#60;&#47;li&#62;
+ &#60;li&#62;&#60;a href=""&#62;About&#60;&#47;a&#62;&#60;&#47;li&#62;
+ &#60;li&#62;&#60;a href=""&#62;Services&#60;&#47;a&#62;
+ &#60;ul&#62;
+ &#60;li&#62;&#60;a href=""&#62;Design&#60;&#47;a&#62;&#60;&#47;li&#62;
+ &#60;li&#62;&#60;a href=""&#62;Development&#60;&#47;a&#62;&#60;&#47;li&#62;
+ &#60;li&#62;&#60;a href=""&#62;Custom Pizzas&#60;&#47;a&#62;&#60;&#47;li&#62;
+ &#60;&#47;ul&#62;
+ &#60;&#47;li&#62;
+ &#60;li&#62;&#60;a href=""&#62;Contact&#60;&#47;a&#62;&#60;&#47;li&#62;
+ &#60;&#47;ul&#62;
+&#60;&#47;nav&#62;
</code></pre>
-<h3>CSS</h3>
-<pre><code>/* resets - optional */
+
+<h3 id="css">CSS</h3>
+
+<pre><code>&#47;* resets - optional *&#47;
ul { list-style: none; padding: 0; }
ul li { display: inline-block; position: relative; }
-/* minimal dropdown CSS */
-ul li &gt; ul {
+&#47;* minimal dropdown CSS *&#47;
+ul li &#62; ul {
left: -9999px;
position: absolute;
visibility: hidden;
}
-ul li:hover &gt; ul, ul li:focus-within &gt; ul {
+ul li:hover &#62; ul, ul li:focus-within &#62; ul {
left: 0;
visibility: visible;
}
</code></pre>
-<h2>Live demo on CodePen</h2>
+
+<h2 id="live-demo-on-codepen">Live demo on CodePen</h2>
+
<p>Feel free to check out the live demo on CodePen <a href="https://codepen.io/bradleytaunt/pen/MRLevy">here</a>.</p>
<footer role="contentinfo">
<h2>Menu Navigation</h2>