Add disclosure menu example for issue 1028

aria-practices.html

@@ -1216,6 +1216,7 @@ <h4>Examples</h4>
         <ul>
           <li><a href="examples/disclosure/disclosure-img-long-description.html">Disclosure (Show/Hide) of Image Description</a></li>
           <li><a href="examples/disclosure/disclosure-faq.html">Disclosure (Show/Hide) of Answers to Frequently Asked Questions</a></li>
+          <li><a href="examples/disclosure/disclosure-navigation.html">Disclosure (Show/Hide) for Navigation Menus</a></li>
         </ul>
       </section>
 

examples/disclosure/css/disclosure-navigation.css

@@ -0,0 +1,89 @@
+.disclosure-nav {
+  background-color: #eee;
+  display: flex;
+  list-style-type: none;
+  padding: 0;
+}
+
+.disclosure-nav ul {
+  background-color: #eee;
+  border: 1px solid #005a9c;
+  border-top-width: 5px;
+  border-radius: 0 0 4px 4px;
+  display: block;
+  list-style-type: none;
+  margin: 0;
+  min-width: 200px;
+  padding: 0;
+  position: absolute;
+}
+
+.disclosure-nav li {
+  margin: 0;
+}
+
+.disclosure-nav ul a {
+  border: 0;
+  color: #000;
+  display: block;
+  margin: 0;
+  padding: 0.5em 1em;
+  text-decoration: underline;
+}
+
+.disclosure-nav ul a:hover,
+.disclosure-nav ul a:focus {
+  background-color: #ddd;
+  margin-bottom: 0;
+  text-decoration: none;
+}
+
+.disclosure-nav ul a:focus {
+  outline: 5px solid rgba(0, 90, 156, 0.75);
+  position: relative;
+}
+
+.disclosure-nav button {
+  align-items: center;
+  border: 1px solid transparent;
+  border-right-color: #ccc;
+  display: flex;
+  padding: 1em;
+}
+
+.disclosure-nav button::after {
+  content: "";
+  border-bottom: 1px solid #000;
+  border-right: 1px solid #000;
+  height: 0.5em;
+  margin-left: 0.75em;
+  width: 0.5em;
+  transform: rotate(45deg);
+}
+
+.disclosure-nav button:focus {
+  border-color: #005a9c;
+  outline: 5px solid rgba(0, 90, 156, 0.75);
+  position: relative;
+}
+
+.disclosure-nav button:hover,
+.disclosure-nav button[aria-expanded=true] {
+  background-color: #005a9c;
+  color: #fff;
+}
+
+.disclosure-nav button:hover::after,
+.disclosure-nav button[aria-expanded=true]::after {
+  border-color: #fff;
+}
+
+/* Styles for example page content section */
+.disclosure-pagecontent {
+  border: 1px solid #ccc;
+  padding: 1em;
+}
+
+.disclosure-pagecontent h3 {
+  margin-top: 0.5em;
+}

examples/disclosure/disclosure-faq.html

@@ -38,6 +38,9 @@ <h1>Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</h1
     <li>
       <a href="disclosure-img-long-description.html">Example Disclosure (Show/Hide) for an Image Description</a>
     </li>
+    <li>
+      <a href="disclosure-navigation.html">Example Disclosure for Navigation Menus</a>
+    </li>
   </ul>
   <section>
     <h2 id="ex_label">Example</h2>

examples/disclosure/disclosure-img-long-description.html

@@ -36,6 +36,9 @@ <h1>Example Disclosure (Show/Hide) for Image Description</h1>
     <li>
       <a href="disclosure-faq.html">Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a>
     </li>
+    <li>
+      <a href="disclosure-navigation.html">Example Disclosure for Navigation Menus</a>
+    </li>
   </ul>
   <section>
     <h2 id="ex_label">Example</h2>