Dynamic Radial Menu Using Javascript

Developer
Parth Viroja
Size
3,008 Kb
Views
30,360
  1. Dynamic Radial Menu Using Javascript Previews
  2. Dynamic Radial Menu Using Javascript HTML Codes
  3. Dynamic Radial Menu Using Javascript CSS Codes
  4. Dynamic Radial Menu Using Javascript JS Codes

How do I make an dynamic radial menu using javascript?

Its a simple and light weight javascript use for create radial menu. What is a dynamic radial menu using javascript? How do you make a dynamic radial menu using javascript? This script and codes were developed by Parth Viroja on 03 September 2022, Saturday.

Dynamic Radial Menu Using Javascript Previews
IQ Test

Dynamic Radial Menu Using Javascript - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dynamic Radial Menu Using Javascript</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="ring-wrapper"> <ul class="ring"> <li><a href=""><i class="fa fa-home"></i></a></li> <li><a href=""><i class="fa fa-bell"></i></a></li> <li><a href=""><i class="fa fa-cog"></i></a></li> </ul> <div class="ring-middle"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Dynamic Radial Menu Using Javascript - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
::-webkit-selection { background: transparent;
}
::-moz-selection { background: transparent;
}
::selection { background: transparent;
}
*,
*::before,
*::after { padding: 0; margin: 0; outline: none; list-style-type: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; -box-sizing: border-box;
}
html { width: 100%; height: 100%;
}
body { padding:40px; font-family: "Lato"; font-weight: 300; font-size: 1.2em; background-color: crimson; letter-spacing: 1px;
}
h1 { padding: 20px; font-weight: 300; color: #fff; text-align: center;
}
a,a:active{ color:#000;
}
span { font-size: inherit; font-weight: inherit; line-height: inherit; opacity: 0.5;
}
section { display: block; padding: 20px; margin-bottom: 20px; min-height: 200px; background: ghostwhite;
}
.ring-wrapper { position: relative; display:block; width:380px; height:380px; overflow: hidden;
}
.ring { position: absolute; top: 50px; bottom: 50px; left: 50px; right: 50px; display: block; border-radius: 100%; background: rgba(255, 255, 255, 1);
}
.ring-middle { position: absolute; top: 80px; bottom: 80px; left: 80px; right: 80px; display: block; z-index: 1; border-radius: 100%; background: crimson;
}
.ring li { position: absolute; width: 80px; height: 80px; line-height: 80px; margin-left: 0px; margin-top: 0px; text-align: center; font-size: 2em; background: rgba(255, 255, 255, 1); border-radius: 100%;
}
.ring li span,
.ring li i,
.ring li a { display: inline-block; margin: 0 auto; width: inherit; height: inherit; cursor: pointer;
}
.ring li:hover span { color: #999;
}

Dynamic Radial Menu Using Javascript - Script Codes JS Codes

var x = document.getElementsByClassName("ring");
var page = document.getElementsByClassName("page");
for (var i = 0; i < x.length; i++) { x[i].parentElement.style.height = x[i].parentElement.offsetWidth + "px"; circle(x[i]);
}
function circle(element) { var offsetRad = null; var targetRad = 0; var previousRad = 0; try { element.addEventListener('mousedown', down); drawmenu(); } catch (err) { console.log("Interaction not found"); } function down(event) { offsetRad = getRotation(event); previousRad = offsetRad; window.addEventListener('mousemove', move); window.addEventListener('mouseup', up); } function move(event) { var newRad = getRotation(event); targetRad += (newRad - previousRad); previousRad = newRad; var degree = (targetRad / Math.PI * 180); element.style.transform = 'rotate(' + degree + 'deg)'; } function up() { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); } function getRotation(event) { var pos = mousePos(event, element); var x = pos.x - element.clientWidth * .5; var y = pos.y - element.clientHeight * .5; return Math.atan2(y, x); } function mousePos(event, currentElement) { var canvasX = 0; var canvasY = 0; canvasX = event.pageX - currentElement.offsetLeft; canvasY = event.pageY - currentElement.offsetTop; return { x: canvasX, y: canvasY }; } function drawmenu() { var items = element.querySelectorAll('li'); var a = 50; var b = 50; for (var i = 0, l = items.length; i < l; i++) { items[i].style.left = (a - b * Math.cos(-0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)) + "%"; items[i].style.top = (a + b * Math.sin(-0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)) + "%"; items[i].style.marginTop = "-" + ((items[i].offsetHeight / 2)) + "px"; items[i].style.marginLeft = "-" + ((items[i].offsetWidth / 2)) + "px"; } }
}
Dynamic Radial Menu Using Javascript - Script Codes
Dynamic Radial Menu Using Javascript - Script Codes
Home Page Home
Developer Parth Viroja
Username parthviroja
Uploaded September 03, 2022
Rating 3
Size 3,008 Kb
Views 30,360
Do you need developer help for Dynamic Radial Menu Using Javascript?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Parth Viroja (parthviroja) Script Codes
Name
Right side menu tab with icon
Css Dropdown Design
Contextmenu using Jquery
Filter, sort grid item
Responsive Card Design
Custom checkbox and radio with menu
Ubuntu Terminal
MY CV
Treeview using Angular
Card border collspan
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!