Draggable Circular Navigation Menu
Aug 17, 2021
Live Preview
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Draggable Navigation Menu </title>
<link rel="stylesheet" href="style.css">
<!-- Boxicons CSS -->
<link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<nav>
<div class="nav-content">
<div class="toggle-btn">
<i class='bx bx-plus'></i>
</div>
<span style="--i:1;">
<a href="#"><i class='bx bxs-home'></i></a>
</span>
<span style="--i:2;">
<a href="#"><i class='bx bxs-camera'></i></a>
</span>
<span style="--i:3;">
<a href="#"><i class='bx bxs-alarm'></i></a>
</span>
<span style="--i:4;">
<a href="#"><i class='bx bxs-map'></i></a>
</span>
<span style="--i:5;">
<a href="#"><i class='bx bxs-cog'></i></a>
</span>
</div>
</nav>
<script src="script.js"></script>
</body>
</html>style.css
*{margin: 0;padding: 0;box-sizing: border-box;}body{height: 100vh;background: #17a2b8;overflow: hidden;}nav{position: absolute;top: 20px;right: 0;width: 80px;height: 300px;display: flex;align-items: center;justify-content: center;cursor: grab;}nav .nav-content{display: flex;align-items: center;justify-content: center;transform: rotate(-45deg);}.nav-content .toggle-btn, .nav-content span a{height: 60px;width: 60px;background: #fff;display: flex;align-items: center;justify-content: center;border-radius: 50%;box-shadow: 0 0 20px rgba(0,0,0,0.2);}.nav-content .toggle-btn{font-size: 35px;color: #0e2431;z-index: 100;cursor: pointer;transform: rotate(-225deg);transition: all 0.6s ease;}nav.open .toggle-btn{transform: rotate(0deg);}.nav-content span{position: absolute;transition: all 0.6s ease;opacity: 0;}nav.open .nav-content span{transform: rotate(calc(var(--i) * (360deg/8))) translateY(120px);opacity: 1;}.nav-content span a{text-decoration: none;transform: rotate(45deg);}.nav-content span a i{font-size: 24px;color: #0e2431;transform: rotate(calc(var(--i) * (360deg/ -8)));opacity: 0.8;transition: 0.2s;}.nav-content span a:hover i{opacity: 1;}script.js
// getting HTML elements
const nav = document.querySelector("nav"),
toggleBtn = nav.querySelector(".toggle-btn");
toggleBtn.addEventListener("click" , () =>{
nav.classList.toggle("open");
});
// js code to make draggable nav
function onDrag({movementY}) { //movementY gets mouse vertical value
const navStyle = window.getComputedStyle(nav), //getting all css style of nav
navTop = parseInt(navStyle.top), // getting nav top value & convert it into string
navHeight = parseInt(navStyle.height), // getting nav height value & convert it into string
windHeight = window.innerHeight; // getting window height
nav.style.top = navTop > 0 ? `${navTop + movementY}px` : "1px";
if(navTop > windHeight - navHeight){
nav.style.top = `${windHeight - navHeight}px`;
}
}
//this function will call when user click mouse's button and move mouse on nav
nav.addEventListener("mousedown", () =>{
nav.addEventListener("mousemove", onDrag);
});
//these function will call when user relase mouse button and leave mouse from nav
nav.addEventListener("mouseup", () =>{
nav.removeEventListener("mousemove", onDrag);
});
nav.addEventListener("mouseleave", () =>{
nav.removeEventListener("mousemove", onDrag);
});