Need an Eye-caching Website - Contact Me Today !


Draggable Circular Navigation Menu

  • 58
  • 30-Jan-2023
  • Codepen

  • Details


    <!DOCTYPE html>
    <html lang="en">
        <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='' rel='stylesheet'>
          <div class="nav-content">
            <div class="toggle-btn">
              <i class='bx bx-plus'></i>
            <span style="--i:1;">
              <a href="#"><i class='bx bxs-home'></i></a>
            <span style="--i:2;">
              <a href="#"><i class='bx bxs-camera'></i></a>
            <span style="--i:3;">
              <a href="#"><i class='bx bxs-alarm'></i></a>
            <span style="--i:4;">
              <a href="#"><i class='bx bxs-map'></i></a>
            <span style="--i:5;">
              <a href="#"><i class='bx bxs-cog'></i></a>
        <script src="script.js"></script>


    *{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;} .toggle-btn{transform: rotate(0deg);}.nav-content span{position: absolute;transition: all 0.6s ease;opacity: 0;} .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;}


    // getting HTML elements
    const nav = document.querySelector("nav"),
          toggleBtn = nav.querySelector(".toggle-btn");
      toggleBtn.addEventListener("click" , () =>{
    // 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(, // 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
  = navTop > 0 ? `${navTop + movementY}px` : "1px";
      if(navTop > windHeight - navHeight){ = `${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);


Sagar Kumar
Typically replies within an hour

Hi there 👋

How can I help you?