Menú emergente radial con JavaScript y CSS3-circleMenu

Vista prévia

Descripción

circleMenu es una sencilla, ligera, biblioteca de JavaScript libre de dependencia que le ayuda a crear un menú emergente radial con una superposición de pantalla completa para sus aplicaciones Web.

Haga clic en el icono de palanca de navegación que verá varios elementos de menú popup alrededor del icono de cierre. Utiliza las transformaciones y transiciones CSS3 para animaciones de menú suaves.

Funcionamiento

Agregue la hoja de estilos Circle-menu. CSS y JavaScript Circle-menu. js en su documento HTML.

<link href="css/circle-menu.css" rel="stylesheet">
<script src="js/src/circleMenu.js"></script>

La estructura HTML para el menú de navegación radial.

<nav class="c-circle-menu js-menu">

<button class="c-circle-menu__toggle js-menu-toggle">


<span>Toggle</span>

</button>

<ul class="c-circle-menu__items">


<li class="c-circle-menu__item">



<a href="#" class="c-circle-menu__link">




<img src="img/house.svg" alt="">



</a>


</li>


<li class="c-circle-menu__item">



<a href="#" class="c-circle-menu__link">




<img src="img/photo.svg" alt="">



</a>


</li>


<li class="c-circle-menu__item">



<a href="#" class="c-circle-menu__link">




<img src="img/pin.svg" alt="">



</a>


</li>


<li class="c-circle-menu__item">



<a href="#" class="c-circle-menu__link">




<img src="img/search.svg" alt="">



</a>


</li>


<li class="c-circle-menu__item">



<a href="#" class="c-circle-menu__link">




<img src="img/tools.svg" alt="">



</a>


</li>

</ul>

<div class="c-circle-menu__mask js-menu-mask"></div>
</nav>

Inicialice el circleMenu y ya terminamos.

var el = '.js-menu';
var myMenu = cssCircleMenu(el);