Menú desplegable personalizado accesible-dropmic

Vista prévia

Descripción

dropmic es una pequeña biblioteca JS de dependencia cero que anexa un menú desplegable/popup limpio mínimo a cualquier elemento cuando se desencadena.

Funcionamiento

Cargue la hoja de estilo del dropmic en el encabezado que proporcionará los estilos CSS predeterminados para el menú desplegable.

<link rel="stylesheet" href="/dropmic.css">

Crea un menú desplegable predeterminado que aparecerá en la ' parte inferior derecha ' del botón disparador.

<span class="dropmic" data-dropmic="1" role="navigation">

<button data-dropmic-btn>Bottom right (default)</button>

<div class="dropmic-menu" aria-hidden="true">


<div class="dropmic-menu__custom">Custom content</div>


<ul class="dropmic-menu__list" role="menu">




<li class="dropmic-menu__listItem" role="menuitem">






<a class="dropmic-menu__listContent" tabindex="-1" href="http://example.com">label link</a>




</li>




<li class="dropmic-menu__listItem" role="menuitem">






<button class="dropmic-menu__listContent" tabindex="-1">button</button>




</li>


</ul>

</div>
</span>

Inicialice el menú desplegable y listo.

var dropmic = new Dropmic(document.querySelector('[data-dropmic="1"]'));

Añade enlaces personalizados al menú desplegable.

dropmic.addLink('link 1', 'https://wikicss.com')

Establezca dinámicamente el contenido personalizado:

dropmic.setCustomContent("Custom content");

Cierra el menú desplegable manualmente:

dropmic.close();

Establecer la dirección del menú desplegable utilizando atributos HTML como se muestra a continuación:

<span class="dropmic" data-dropmic="2" data-dropmic-direction="bottom-left">

<button data-dropmic-btn>Bottom left</button>
</span>

<span class="dropmic" data-dropmic="3" data-dropmic-direction="bottom-middle">

<button data-dropmic-btn>Bottom middle</button>
</span>

<span class="dropmic" data-dropmic="4" data-dropmic-direction="top-middle">

<button data-dropmic-btn>Top middle</button>
</span>

<span class="dropmic" data-dropmic="5" data-dropmic-direction="top-left">

<button data-dropmic-btn>Top left</button>
</span>

<span class="dropmic" data-dropmic="6" data-dropmic-direction="top-right">

<button data-dropmic-btn>Top right</button>
</span>

Funciones de devolución de llamada:

var dropmic = new Dropmic(document.querySelector('[data-dropmic="1"]'),{


onOpen: function(){},


onClose: function(){},


beforeOpen: function(){},


beforeClose: function(){},
});

More API methods.

// adds a new button
dropmic.addBtn(label, callback)

// adds a new label
dropmic.addLabel(label)

// sets custom content
dropmic.setCustomContent(content)

// updates target button
dropmic.updateTargetBtn(content)

// opens the dropdown
dropmic.open()

Registro de cambios

09/22/2018

• Permite actualizar el contenido del botón de destino