Author: | Francesca Vago |
---|---|
Views Total: | 1,865 views |
Official Page: | Go to website |
Last Update: | March 11, 2019 |
License: | MIT |
Preview:

Description:
An interactive radial toggle menu built using JavaScript and CSS3 transitions & 2D transforms.
How to use it:
Load the Font Awesome Iconic Font for menu icons.
<link rel="stylesheet" href="/path/to/font-awesome.min.css">
Create the HTML for the radial menu.
<div class="menu" id="menu"> <a href="#"> <i class="fa fa-microphone"></i> </a> <a href="#"> <i class="fa fa-user"></i> </a> <a href="#"> <i class="fa fa-video-camera"></i> </a> <a href="#"> <i class="fa fa-envelope"></i> </a> <a href="#"> <i class="fa fa-camera"></i> </a> <a href="#"> <i class="fa fa-bell"></i> </a> </div>
Create an element to toggle the radial menu.
<div class="toggle" id="toggle" onclick="menu-expand()"> <i class="fa fa-plus" id="plus"></i> </div>
The primary CSS & CSS styles.
.toggle { background-color: #c87f8a; text-align: center; height: 100px; width: 100px; border-radius: 50%; position: absolute; margin: auto; top: 0px; bottom: 0px; left: 0px; right: 0px; } .fa-plus{ font-size: 60px; color: white; display: block; margin-top: 20px; transition: 0.7s; } .menu { background-color: white; height: 100px; width: 100px; transform: scale(0); border-radius: 50%; border-style: double; border-color: #c87f8a; position: absolute; margin: auto; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: -1; transition: 0.7s; } #menu a { display: inline-block; position: absolute; font-size: 15px; color: #BBBBBB; }
Arrange the menu icons around the toggle button.
#menu a:nth-child(1){ top: 6px; left: 45px; } #menu a:nth-child(2){ top: 24px; left: 77px; } #menu a:nth-child(3){ top: 58px; left: 76px; } #menu a:nth-child(4){ top: 78px; left: 42px; } #menu a:nth-child(5){ top: 58px; left: 10px; } #menu a:nth-child(6){ top: 23px; left: 12px; } #menu a:hover { color: #c87f8a; }
The main JavaScript to activate the radial menu.
var i=0; function expand(){ if(i==0){ document.getElementById("menu").style.transform="scale(3)"; document.getElementById("plus").style.transform="rotate(45deg)"; i=1; } else{ document.getElementById("menu").style.transform="scale(0)"; document.getElementById("plus").style.transform="rotate(0deg)"; i=0; } }