Draggable Circular Navigation Menu in HTML CSS & JavaScript

byNiodTech -December 27, 2021

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 thericallly I would highly recommend you to watch the given video tutorials of our Draggagle 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]

To get the following HTML and CSS code for an Animated and Draggable Circular Navigation Menu. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

HTML CODE:

<!DOCTYPE html><!-- Coding by CodingLab | www.codinglabweb.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>

CSS CODE:

 *{   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; }

Trending

BS Button Goups - Bootstarp Learn

The SQL COUNT, AVG And SUM - SQL Learn

SQL Index - SQL Learn

BS Glyphicons - Boostrap Learn

SQL Backup Database Statement - SQL Learn

Draggable Circular Navigation Menu in HTML CSS & JavaScript

Draggable Circular Navigation Menu in HTML CSS & JavaScript

You Might Like This:

Circular Navigation Menu [Source Code]

Contact Form