Add example of disclosure navigation menu with top-level links (pull #…

…1614) * Adds another version of the mythical university navigation that includes links for the top-level pages. * Satisfies one of the steps in the plan for improving navigation patterns described in issue #89. Co-authored-by: Matt King <[email protected]>
w3c · Mar 3, 2021 · a060577 · a060577
1 parent dec293c
commit a060577
Show file tree

Hide file tree

Showing 11 changed files with 1,074 additions and 170 deletions.
diff --git a/aria-practices.html b/aria-practices.html
@@ -1228,7 +1228,8 @@ <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>
+          <li><a href="examples/disclosure/disclosure-navigation.html">Disclosure (Show/Hide) Navigation Menu</a></li>
+          <li><a href="examples/disclosure/disclosure-navigation-hybrid.html">Disclosure (Show/Hide) Navigation Menu with Top-Level Links</a></li>
         </ul>
       </section>
 

diff --git a/examples/disclosure/css/disclosure-navigation.css b/examples/disclosure/css/disclosure-navigation.css
@@ -3,6 +3,7 @@
   display: flex;
   list-style-type: none;
   padding: 0;
+  margin: 0;
 }
 
 .disclosure-nav ul {
@@ -16,12 +17,18 @@
   min-width: 200px;
   padding: 0;
   position: absolute;
+  top: 100%;
 }
 
 .disclosure-nav li {
   margin: 0;
 }
 
+.disclosure-nav > li {
+  display: flex;
+  position: relative;
+}
+
 .disclosure-nav ul a {
   border: 0;
   color: #000;
@@ -43,14 +50,20 @@
   position: relative;
 }
 
-.disclosure-nav button {
+.disclosure-nav button,
+.disclosure-nav .main-link {
   align-items: center;
+  background-color: transparent;
   border: 1px solid transparent;
   border-right-color: #ccc;
   display: flex;
   padding: 1em;
 }
 
+.disclosure-nav .main-link {
+  border-right-color: transparent;
+}
+
 .disclosure-nav button::after {
   content: "";
   border-bottom: 1px solid #000;
@@ -61,7 +74,12 @@
   transform: rotate(45deg);
 }
 
-.disclosure-nav button:focus {
+.disclosure-nav .main-link + button::after {
+  margin-left: 0;
+}
+
+.disclosure-nav button:focus,
+.disclosure-nav .main-link:focus {
   border-color: #005a9c;
   outline: 5px solid rgba(0, 90, 156, 0.75);
   position: relative;
@@ -87,3 +105,29 @@
 .disclosure-page-content h3 {
   margin-top: 0.5em;
 }
+
+.sample-header {
+  border: #005a9c solid 2px;
+  background: #005a9c;
+  color: white;
+  text-align: center;
+}
+
+.sample-header .title {
+  font-size: 2.5em;
+  font-weight: bold;
+  font-family: serif;
+}
+
+.sample-header .tagline {
+  font-style: italic;
+}
+
+.sample-footer {
+  border: #005a9c solid 2px;
+  background: #005a9c;
+  font-family: serif;
+  color: white;
+  font-style: italic;
+  padding-left: 1em;
+}
diff --git a/examples/disclosure/disclosure-faq.html b/examples/disclosure/disclosure-faq.html
@@ -38,8 +38,9 @@ <h1>Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</h1
       <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>
+      <a href="disclosure-navigation.html">Example Disclosure Navigation Menu</a>
     </li>
+    <li><a href="disclosure-navigation-hybrid.html">Example Disclosure Navigation Menu with Top-Level Links</a></li>
   </ul>
   <section>
     <div class="example-header">

diff --git a/examples/disclosure/disclosure-img-long-description.html b/examples/disclosure/disclosure-img-long-description.html
@@ -37,8 +37,9 @@ <h1>Example Disclosure (Show/Hide) for Image Description</h1>
       <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>
+      <a href="disclosure-navigation.html">Example Disclosure Navigation Menu</a>
     </li>
+    <li><a href="disclosure-navigation-hybrid.html">Example Disclosure Navigation Menu with Top-Level Links</a></li>
   </ul>
   <section>
     <div class="example-header">