Menubar Navigation Example: Make single page and improve implementation of APG coding practices

examples/index.html

@@ -51,7 +51,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td><code>banner</code></td>
             <td>
               <ul>
-                <li><a href="treeview/treeview-navigation.html">Navigation Treeview</a></li>
+                <li><a href="menubar/menubar-navigation.html">Navigation Menubar</a></li>
                 <li><a href="landmarks/banner.html">Banner Landmark</a></li>
               </ul>
             </td>
@@ -98,6 +98,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td><code>contentinfo</code></td>
             <td>
               <ul>
+                <li><a href="menubar/menubar-navigation.html">Navigation Menubar</a></li>
                 <li><a href="treeview/treeview-navigation.html">Navigation Treeview</a></li>
                 <li><a href="landmarks/contentinfo.html">Contentinfo Landmark</a></li>
               </ul>
@@ -222,6 +223,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td><code>navigation</code></td>
             <td>
               <ul>
+                <li><a href="menubar/menubar-navigation.html">Navigation Menubar</a></li>
                 <li><a href="treeview/treeview-navigation.html">Navigation Treeview</a></li>
                 <li><a href="landmarks/navigation.html">Navigation Landmark</a></li>
               </ul>
@@ -468,6 +470,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td>
               <ul>
                 <li><a href="disclosure/disclosure-navigation.html">Disclosure for Navigation Menus</a></li>
+                <li><a href="menubar/menubar-navigation.html">Navigation Menubar</a></li>
                 <li><a href="treeview/treeview-navigation.html">Navigation Treeview</a></li>
               </ul>
             </td>
@@ -612,6 +615,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="menu-button/menu-button-actions-active-descendant.html">Actions Menu Button  Using aria-activedescendant</a></li>
                 <li><a href="menu-button/menu-button-actions.html">Actions Menu Button  Using element.focus()</a></li>
                 <li><a href="menu-button/menu-button-links.html">Navigation Menu Button</a></li>
+                <li><a href="menubar/menubar-navigation.html">Navigation Menubar</a></li>
                 <li><a href="radio/radio-activedescendant.html">Radio Group  Using aria-activedescendant</a></li>
                 <li><a href="radio/radio.html">Radio Group  Using Roving tabindex</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
@@ -671,6 +675,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
           </tr>
           <tr>
             <td><code>aria-owns</code></td>
+            <td><a href="menubar/menubar-navigation.html">Navigation Menubar</a></td>
             <td><a href="treeview/treeview-navigation.html">Navigation Treeview</a></td>
           </tr>
           <tr>

examples/menubar/css/menubar-navigation.css

@@ -1,13 +1,51 @@
+.page header {
+  border: #005a9c solid 2px;
+  background: #005a9c;
+  color: white;
+  text-align: center;
+}
+
+.page header .title {
+  font-size: 2.5em;
+  font-weight: bold;
+  font-family: serif;
+}
+
+.page header .tagline {
+  font-style: italic;
+}
+
+.page .main {
+  padding-top: 1em;
+  padding-left: 5%;
+  padding-right: 5%;
+  padding-bottom: 5em;
+  border-left: 2px solid #eee;
+  border-right: 2px solid #eee;
+}
+
+.page footer {
+  border: #005a9c solid 2px;
+  background: #005a9c;
+  font-family: serif;
+  color: white;
+  font-style: italic;
+  padding-left: 1em;
+}
+
+.page nav {
+  margin: 0;
+  padding: 0;
+  border: 2px solid #eee;
+}
+
 .menubar-navigation {
   margin: 0;
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
   padding: 7px;
   font-size: 110%;
   list-style: none;
   background-color: #eee;
   border: #eee solid 1px;
-  border-radius: 5px;
 }
 
 .menubar-navigation li {
@@ -31,15 +69,20 @@
   display: block;
   width: 12em;
   margin: 0;
+  padding: 6px;
+  padding-left: 9px;
+  background-color: #eee;
+  border: 0 solid #eee;
+  color: black;
 }
 
-.menubar-navigation [role="menuitem"],
-.menubar-navigation [role="separator"] {
+.menubar-navigation > li > [role="menuitem"] {
+  display: inline-block;
   padding: 6px;
+  padding-bottom: 9px;
   background-color: #eee;
   border: 0 solid #eee;
   color: black;
-  border-radius: 5px;
 }
 
 .menubar-navigation [role="menuitem"] svg {
@@ -65,18 +108,13 @@
   transform: rotate(90deg) translate(5px, -5px);
 }
 
-.menubar-navigation > li > [role="menuitem"] {
-  display: inline-block;
-}
-
 .menubar-navigation [role="menu"] {
   display: none;
   position: absolute;
   margin: 0;
   padding: 0;
   padding: 7px 4px;
   border: 2px solid #034575;
-  border-radius: 5px;
   background-color: #eee;
 }
 
@@ -87,28 +125,66 @@
 
 .menubar-navigation [role="separator"] {
   padding-top: 3px;
-  background-image: url("../images/separator.svg");
+  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cline x1='0' y1='6' x2='12' y2='6' style='stroke:black;stroke-width:1' /%3E%3C/svg%3E%0A");
   background-position: center;
   background-repeat: repeat-x;
 }
 
+/* aria-current styling */
+
+.menubar-navigation [role="menu"] [role="menuitem"].aria-current-path,
+.menubar-navigation [role="menu"] [role="menuitem"][aria-current] {
+  padding-left: 4px;
+  border-left: 5px solid #034575;
+  background-color: #ccc;
+}
+
+.menubar-navigation > li > [role="menuitem"][aria-current],
+.menubar-navigation > li > [role="menuitem"].aria-current-path {
+  padding-bottom: 4px;
+  border-bottom: 5px solid #034575;
+  background-color: #ccc;
+}
+
 /* focus styling */
 
 .menubar-navigation.focus {
   padding: 6px;
   border: #034575 solid 2px;
 }
 
-.menubar-navigation [role="menuitem"][aria-expanded="true"],
-.menubar-navigation [role="menuitem"]:focus,
-.menubar-navigation [role="menuitem"]:hover {
-  background: #034575;
-  color: #fff;
+.menubar-navigation [role="menu"] [aria-expanded="true"],
+.menubar-navigation [role="menu"] [role="menuitem"]:focus,
+.menubar-navigation [role="menu"] [role="menuitem"]:hover {
   outline: none;
+  padding: 4px;
+  padding-left: 7px;
+  border: 2px solid #034575;
+}
+
+.menubar-navigation [role="menu"] [aria-expanded="true"].aria-current-path,
+.menubar-navigation [role="menu"] [role="menuitem"].aria-current-path:focus,
+.menubar-navigation [role="menu"] [role="menuitem"].aria-current-path:hover,
+.menubar-navigation [role="menu"] [role="menuitem"][aria-current]:focus,
+.menubar-navigation [role="menu"] [role="menuitem"][aria-current]:hover {
+  padding-left: 4px;
+  border-left: 5px solid #034575;
+}
+
+.menubar-navigation > li > [aria-expanded="true"],
+.menubar-navigation > li > [role="menuitem"]:focus,
+.menubar-navigation > li > [role="menuitem"]:hover {
+  outline: none;
+  padding: 4px;
+  padding-bottom: 7px;
+  border: 2px solid #034575;
 }
 
-.menubar-navigation [role="menuitem"]:focus,
-.menubar-navigation [role="menuitem"]:hover {
-  padding: 2px;
-  border: 4px solid #034575;
+.menubar-navigation > li > [aria-expanded="true"].aria-current-path,
+.menubar-navigation > li > [role="menuitem"].aria-current-path:focus,
+.menubar-navigation > li > [role="menuitem"].aria-current-path:hover,
+.menubar-navigation > li > [role="menuitem"][aria-current]:focus,
+.menubar-navigation > li > [role="menuitem"][aria-current]:hover {
+  padding-bottom: 4px;
+  border-bottom: 5px solid #034575;
 }