I need some help around below logic, i have a header(Dashboard). I want this header be filled with my button aria-popup but this must show little at the end not be filled/expanded. here is my attempt
- <center>
- <div class="ic-Dashboard-header_layout">
- <h1 class="ic-Dashboard-header_title">
- <span class="hidden-phone">Dashboard</span>
- </h1>
-
- <div class="menu_button">
- <a id="menubutton" role="button" href="#" aria-haspopup="true" aria-expanded="false" aria-controls="menu2"></a>
-
-
- <ul id="meu2" role="menu" arial-labelledby="menubutton">
- <li role="none">
- <a role="menuitem" href="https://www.w3.org/">Dashboard View</a>
- </li>
- <li role="none">
- <a role="menuitem" href="https://www.w3.org/TR/wai-aria-implementation/">Card View</a>
- </li>
- <li role="none">
- <a role="menuitem" href="https://www.w3.org/TR/accname-aam-1.1">Recent Activity</a>
- </li>
-
- </ul>
-
-
- <script type="text/javascript">
- window.onload = function () { var menubutton = new MenuButton(document.getElementById('menubutton')); menubutton.init(); }
- </script>
- </div>
-
- </div>
-
-
-
- <section class="content-header-fluid">
- </section>
- </center>
-
-
- <script src="w3.org/TR/2016/WD-wai-aria-practises-1.1-20161224/examples/menu-button-2/js/PopupMenuLinks.js"></script>
- <script type="text/javascript"></script>