Gcobani Mkontwana

Gcobani Mkontwana

  • 1.1k
  • 974
  • 52.7k

button aria-popup with Dashboard container/header

Aug 14 2020 8:53 AM
Hi Team
 
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
  1. <center>  
  2.         <div class="ic-Dashboard-header_layout">  
  3.             <h1 class="ic-Dashboard-header_title">  
  4.                 <span class="hidden-phone">Dashboard</span>  
  5.             </h1>  
  6.         <!---Some extra button here-->  
  7.         <div class="menu_button">  
  8.             <a id="menubutton" role="button" href="#" aria-haspopup="true" aria-expanded="false" aria-controls="menu2"></a>  
  9.   
  10.             <!--lists of menu within a button-->  
  11.             <ul id="meu2" role="menu" arial-labelledby="menubutton">  
  12.                 <li role="none">  
  13.                     <a role="menuitem" href="https://www.w3.org/">Dashboard View</a>  
  14.                 </li>  
  15.                 <li role="none">  
  16.                     <a role="menuitem" href="https://www.w3.org/TR/wai-aria-implementation/">Card View</a>  
  17.                 </li>  
  18.                 <li role="none">  
  19.                     <a role="menuitem" href="https://www.w3.org/TR/accname-aam-1.1">Recent Activity</a>  
  20.                 </li>  
  21.                   
  22.             </ul>  
  23.   
  24.             <!--Popu using jquery render dom-->  
  25.             <script type="text/javascript">  
  26.                 window.onload = function () { var menubutton = new MenuButton(document.getElementById('menubutton')); menubutton.init(); }  
  27.             </script>  
  28.         </div>  
  29.   
  30.         </div>  
  31.   
  32.         <!--Content page header-->  
  33.   
  34.         <section class="content-header-fluid">  
  35.         </section>  
  36.     </center>     
  37.   
  38. <!--Core JS file-->  
  39. <script src="w3.org/TR/2016/WD-wai-aria-practises-1.1-20161224/examples/menu-button-2/js/PopupMenuLinks.js"></script>  
  40. <script type="text/javascript"></script>  
 

Brought to you by:

Answers (2)