Dujour Menu Widget

An X-Tag web component.

Effect
Direction
×
        
<x-menu role="menu">
  Menu
</x-menu>
      

Attributes

open

        
<x-menu open>
  Menu is open
</x-menu>
      

position

        
<x-menu position="top|bottom|left|right">
  Menu
</x-menu>
      

effect

        
<x-menu position="slide|push">
  Menu
</x-menu>
      

Leaving off this attribute means the menu immediately shows without any visual effect.

JavaScript API

Hiding and Showing

        
var menu = document.querySelector( 'x-menu' );
menu.show();
menu.hide();
menu.toggle();