Hello friend I hope you are doing awesome. Today in this blog you will learn How to make a Draggable Circular Navigation Menu using HTML CSS and JavaScript. As you know there are lots of Navigation Designs I have created with responsive features and hover animations. Till I have not created circular navigation menu with draggable features.
Circular Navigation Menu is combination of the various navigation links in circle shape. It is the latest and popular shape of the navigation menu because it take less space on the screen and has good user experience.
Lest have a look on the given image of our circular navigation menu or you can call it half circle navigation menu. Overall there are five navigation links and one toggle button in the center. Actually, at first all those navigation links are in hidden and only toggle button is appeared. When we click on that toggle button then all navigation links starts appearing with beautiful animation. We can drag this navigation menu to bottom to top, where ever we like to place.
Rather than theoretically I would highly recommend you to watch the given video tutorials of our Draggable circular navigation menu. By watching the given video you will not only saw the demo, you will also get the idea how all HTML CSS and JavaScript code are working perfectly behind this beautiful navigation menu.
Draggable Circular Navigation Menu in HTML CSS & JavaScript
I have provided all HTM CSS and JavaScript code of this Draggable Circular Navigation Menu that I have used to create. Before jumping into the source code you need to know some information of this video tutorial of this navigation menu.
As you have seen on the video tutorial of this draggable circular navigation menu using HTML CSS and JavaScript. At first we have seen on toggle button with plus icon at the right top side. When I clicked on the toggle button five navigation links appears with beautiful animation. We could drag it easily to top to bottom which make this navigatin more attractive.
To show and hide those navigation menu while click on the toggle button and to make it draggable I have used JavaScript code and other UI design are made by HTML and CSS. All fonts are brought form boxicons.
I hope now you are able to create this type of draggable circular navigation menu, if not, I have provided all the HTML CSS and JavaScript code below.
You Might Like This:
Circular Navigation Menu [Source Code]
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Draggable Navigation Menu | Codinglab</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>
// 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);
});
</script>
</body>
</html>
*{
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;
}
If you face any difficulties while creating your Draggable Navigation Menu or your code is not working as expected, you can download the source code files for this Draggable Navbar Menu for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
