(master): Incremental: Update introduction text. Add left-collapsing menu.

Author: Joe Crick

index.html

@@ -43,6 +43,9 @@
                     <li class="pure-menu-item">
                         <a href="#dropdown" class="pure-menu-link">Dropdown</a>
                     </li>
+                    <li class="pure-menu-item">
+                        <a href="#menu" class="pure-menu-link">Menu</a>
+                    </li>
                     <li class="pure-menu-item">
                         <a href="#modal" class="pure-menu-link">Modal</a>
                     </li>
@@ -83,8 +86,7 @@ <h2 class="content-subhead">Pure CSS</h2>
 
                     <p>
                         <a href="https://purecss.io/">Pure CSS</a> is a great set of small, responsive CSS modules. As
-                        their docs say, it is tiny.
-                        The entire set of modules is only 3.8KB* (minified and gzipped).
+                        their docs say, it is tiny. The entire set of modules is only 3.8KB* (minified and gzipped).
                     </p>
                     <p>
                         Pure CSS is responsive out of the box.
@@ -101,9 +103,9 @@ <h2 class="content-subhead">Pure CSS</h2>
                     </p>
                     <h2 class="content-subhead">Pure CSS Components<a class="content-link"></a></h2>
                     <p>
-                        Pure CSS doesn't have any components, so I wrote some. My goal is to get parity with
-                        Bootstrap's menu of components. Please note, this is still a work in
-                        progress. The usual cautions apply.
+                        Pure CSS doesn't have many components, so I wrote some. And some of the components they have
+                        are missing some useful functionality (unless you add in some JS). <em>Please note, this is still a work in
+                        progress. The usual cautions apply</em>.
                     </p>
                     <p>
                         Like Pure CSS, Pure.CSS Components is very small. It is only 2KB* (minified and zipped). Each
@@ -541,6 +543,43 @@ <h2 class="content-subhead">Dropdown</h2>
                     </div>
 
 
+                </div>
+
+                <div class="content menu-content">
+                    <a name="menu"></a>
+                    <h2 class="content-subhead">Collapsing Menu</h2>
+
+                    <p>
+                        The menu on the left side of this page is an example of a left-side collapsing menu. The
+                        collapsing menu builds off of the <a href="#dropdown"><strong>dropdown</strong></a> component, and
+                        Pure CSS' <strong>menu</strong> . As a stand-alone module, the collapsing
+                        menu requires both <strong>dropdown.css</strong> and <strong>menu.css</strong> .
+                    </p>
+
+<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">
+&lt;div class=<span style="color: #a31515">&quot;pcssc-collapsing-menu pcssc-menu-left&quot;</span>&gt;
+    &lt;a class=<span style="color: #a31515">&quot;pure-menu-heading&quot;</span> href=<span style="color: #a31515">&quot;#top&quot;</span>&gt;Pure
+        &lt;div class=<span style="color: #a31515">&quot;small-caps&quot;</span>&gt;components&lt;/div&gt;
+    &lt;/a&gt;
+    &lt;div tabindex=<span style="color: #a31515">&quot;0&quot;</span> class=<span style="color: #a31515">&quot;menu-link dropdown&quot;</span>&gt;
+        &lt;span&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;ul class=<span style="color: #a31515">&quot;dropdown-content pure-menu-list pure-menu&quot;</span>&gt;
+        &lt;li class=<span style="color: #a31515">&quot;pure-menu-item&quot;</span>&gt;
+            &lt;a href=<span style="color: #a31515">&quot;#installation&quot;</span> class=<span style="color: #a31515">&quot;pure-menu-link&quot;</span>&gt;Installation&lt;/a&gt;
+        &lt;/li&gt;
+        &lt;li class=<span style="color: #a31515">&quot;pure-menu-item menu-item-divided&quot;</span>&gt;
+            &lt;a href=<span style="color: #a31515">&quot;#accordion&quot;</span> class=<span style="color: #a31515">&quot;pure-menu-link&quot;</span>&gt;Accordion&lt;/a&gt;
+        &lt;/li&gt;
+        &lt;li class=<span style="color: #a31515">&quot;pure-menu-item&quot;</span>&gt;
+            &lt;a href=<span style="color: #a31515">&quot;#alert&quot;</span> class=<span style="color: #a31515">&quot;pure-menu-link&quot;</span>&gt;Alert&lt;/a&gt;
+        &lt;/li&gt;
+    &lt;/ul&gt;
+&lt;/div&gt;
+</pre></div>
+
+
+
                 </div>
 
                 <div class="content modal-content">