Logo
LiveChat

Loading..

Create Draggable Navigation Button by Using HTML CSS and JS

Draggable navigation button

Creating a draggable navigation button using HTML, CSS, and JavaScript involves defining a button element that can be clicked and dragged around the webpage. Here's a step-by-step guide on how to create one:

  1. HTML: Create the structure for the draggable button in your HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Create Draggable Navigation Button by Using HTML CSS and JS | Assignment Hippo</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />

</head>
<body>
  <nav>
    <div class="content">
      <div class="main-button">
        <i class='bx bx-plus'></i>
      </div>
      <span style="--i:1;">
        <a href="#"><i class='bx bxs-user'></i></a>
      </span>
      <span style="--i:2;">
        <a href="#"><i class='bx bxs-phone'></i></a>
      </span>
      <span style="--i:3;">
        <a href="#"><i class='bx bxs-notification' ></i></a>
      </span>
      <span style="--i:4;">
        <a href="#"><i class='bx bxs-music' ></i></a>
      </span>
      <span style="--i:5;">
        <a href="#"><i class='bx bxs-video' ></i></a>
      </span>
    </div>
  </nav>
</body>
</html>

2. CSS: Style the button and container in your CSS file (styles.css).


     *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body{
        height: 100vh;
        background: #fff;
        overflow: hidden;
      }
      nav{
        position: absolute;
        top: 20px;
        right: 0;
        width: 80px;
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: grab;
      }
      nav .content{
        display: flex;
        align-items: center;
        justify-content: center;
        transform: rotate(-45deg);
      }
      .content .main-button,
      .content span a{
        height: 60px;
        width: 60px;
        background: #a3d9f1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        box-shadow: 0 0 20px rgba(0,0,0,0.2);
      }
      .content .main-button{
        font-size: 35px;
        color: #0e2431;
        z-index: 100;
        cursor: pointer;
        transform: rotate(-225deg);
        transition: all 0.6s ease;
      }
      nav.open .main-button{
        transform: rotate(0deg);
      }
      .content span{
        position: absolute;
        transition: all 0.6s ease;
        opacity: 0;
      }
      nav.open .content span{
        transform: rotate(calc(var(--i) * (360deg/8))) translateY(120px);
        opacity: 1;
      }
      .content span a{
        text-decoration: none;
        transform: rotate(45deg);
      }
      .content span a i{
        font-size: 24px;
        color: #0e2431;
        transform: rotate(calc(var(--i) * (360deg/ -8)));
        opacity: 0.8;
        transition: 0.2s;
      }
      .content span a:hover i{
        opacity: 1;
      }

3. JavaScript: Implement the drag functionality in your JavaScript file (script.js).


const nav = document.querySelector("nav"),
toggleBtn = nav.querySelector(".main-button");

toggleBtn.addEventListener("click" , () =>{
nav.classList.toggle("open");
});


function onDrag({movementY}) { 
const navStyle = window.getComputedStyle(nav), 
  navTop = parseInt(navStyle.top), 
  navHeight = parseInt(navStyle.height),
  windHeight = window.innerHeight; 

nav.style.top = navTop > 0 ? `${navTop + movementY}px` : "1px";
if(navTop > windHeight - navHeight){
nav.style.top = `${windHeight - navHeight}px`;
}
}


nav.addEventListener("mousedown", () =>{
nav.addEventListener("mousemove", onDrag);
});


nav.addEventListener("mouseup", () =>{
nav.removeEventListener("mousemove", onDrag);
});
nav.addEventListener("mouseleave", () =>{
nav.removeEventListener("mousemove", onDrag);
});

This code sets up a button that can be dragged around the webpage when clicked and dragged with the mouse. The button's position is updated based on the mouse movement, and the cursor style changes to indicate dragging. Release the mouse button to stop dragging.

Make sure to place the HTML, CSS, and JavaScript in separate files and adjust the file paths accordingly in your HTML file.