{"id":1284,"date":"2024-11-26T15:22:57","date_gmt":"2024-11-26T15:22:57","guid":{"rendered":"https:\/\/codingtutorials.in\/?p=1284"},"modified":"2025-02-17T03:58:19","modified_gmt":"2025-02-17T03:58:19","slug":"draggable-circular-navigation-menu-in-html-css-javascript","status":"publish","type":"post","link":"https:\/\/codingtutorials.in\/draggable-circular-navigation-menu-in-html-css-javascript\/","title":{"rendered":"Draggable Circular Navigation Menu in HTML CSS & JavaScript"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Draggable Circular Navigation Menu<\/strong><\/a> are a sleek and dynamic interface feature that can significantly improve the user experience on websites and apps. This interactive menu design integrates modern functionality with aesthetic appeal, providing users an intuitive way to navigate content. Let us look into the specifications of draggable navigation menu, its features, benefits and implementation details using the given HTML, CSS and JavaScript codes.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

What is Draggable Circular Navigation Menu?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

A draggable circular navigation menu is a movable, interactive menu that allows users to reposition it within the viewport using drag-and-drop gestures. Unlike traditional static menus, this feature introduces flexibility and customization, empowering users to customize the interface according to their preferences. This special menu design also includes animated icons and a toggle button to expand or collapse the menu, keeping the interface clutter-free.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Key Features of Provided Code Circular Navigation Menu<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
  • Toggle Button for Menu Expansion<\/strong>:<\/li><\/ul>

    The menu includes a circular toggle button with a plus icon (bx bx-plus<\/code>), allowing users to expand or collapse the navigation options.<\/p>

    The toggle button rotates upon interaction, providing an intuitive visual cue.<\/p>

    • Circular Icon Design<\/strong>:<\/li><\/ul>

      Each navigation option is represented as a circular button with an icon using the Boxicons<\/strong> library.<\/p>

      The icons rotate and change their position dynamically when the menu is opened.<\/p>

      • Draggable Behavior<\/strong>:<\/li><\/ul>

        Users can click and drag the menu vertically on the screen.<\/p>

        Constraints ensure that the menu remains within the viewport, preventing it from disappearing off-screen.<\/p>

        • Responsive Animation<\/strong>:<\/li><\/ul>

          Smooth transitions and animations enhance the overall aesthetic, making the menu visually appealing and engaging.<\/p>

          • Dynamic Styling<\/strong>:<\/li><\/ul>

            The combination of CSS transformations, transitions, and hover effects creates a modern, polished interface.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

            \n\t\t\t\t
            \n\t\t\t\t\t

            HTML Structure<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
            \n\t\t\t\t
            \n\t\t\t\t\t\t\t\t\t

            The HTML structure is concise and organizes the elements for a draggable circular navigation menu. Major components include:<\/p>

            • A <nav><\/code> element that houses the entire navigation menu.<\/li>
            • Individual <span><\/code> tags for each menu item, wrapped within the .nav-content<\/code> container.<\/li>
            • A toggle button for expanding or collapsing the menu.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
              \n\t\t\t\t
              \n\t\t\t\t\t\t\t
              \n\t\t\t
              \n\t\t\t\t\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title> Draggable Navigation Menu<\/title>\r\n  <link rel=\"stylesheet\" href=\"style.css\">\r\n  <!-- Boxicons CSS -->\r\n  <link href='https:\/\/unpkg.com\/boxicons@2.1.1\/css\/boxicons.min.css' rel='stylesheet'>\r\n<\/head>\r\n<body>\r\n  <nav>\r\n    <div class=\"nav-content\">\r\n      <div class=\"toggle-btn\">\r\n        <i class='bx bx-plus'><\/i>\r\n      <\/div>\r\n      <span style=\"--i:1;\">\r\n        <a href=\"#\"><i class='bx bxs-home'><\/i><\/a>\r\n      <\/span>\r\n      <span style=\"--i:2;\">\r\n        <a href=\"#\"><i class='bx bxs-camera'><\/i><\/a>\r\n      <\/span>\r\n      <span style=\"--i:3;\">\r\n        <a href=\"#\"><i class='bx bxs-alarm' ><\/i><\/a>\r\n      <\/span>\r\n      <span style=\"--i:4;\">\r\n        <a href=\"#\"><i class='bx bxs-map' ><\/i><\/a>\r\n      <\/span>\r\n      <span style=\"--i:5;\">\r\n        <a href=\"#\"><i class='bx bxs-cog' ><\/i><\/a>\r\n      <\/span>\r\n    <\/div>\r\n  <\/nav>\r\n <\/body>\r\n<\/html><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cef40b4 elementor-widget elementor-widget-heading\" data-id=\"cef40b4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CSS Styling<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3a8a41a elementor-widget elementor-widget-text-editor\" data-id=\"3a8a41a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The CSS defines the look and feel of the menu:<\/p><ul><li>The <code>body<\/code> background is styled in a vibrant blue-violet color, ensuring high contrast with the white navigation elements.<\/li><li>The <code>nav<\/code> element is styled to be draggable with <code>position: absolute<\/code>, allowing it to move vertically.<\/li><li>Circular buttons use <code>border-radius: 50%<\/code> and shadows for a modern look.<\/li><li>The menu expansion is achieved with CSS transitions and custom <code>--i<\/code> properties for precise positioning of icons.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc4f22e elementor-widget elementor-widget-code-highlight\" data-id=\"fc4f22e\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp> *{\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\nbody{\r\n  height: 100vh;\r\n  background: blueviolet;\r\n  overflow: hidden;\r\n}\r\nnav{\r\n  position: absolute;\r\n  top: 20px;\r\n  right: 0;\r\n  width: 80px;\r\n  height: 300px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  cursor: grab;\r\n}\r\nnav .nav-content{\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transform: rotate(-45deg);\r\n}\r\n.nav-content .toggle-btn,\r\n.nav-content span a{\r\n  height: 60px;\r\n  width: 60px;\r\n  background: #fff;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 50%;\r\n  box-shadow: 0 0 20px rgba(0,0,0,0.2);\r\n}\r\n.nav-content .toggle-btn{\r\n  font-size: 35px;\r\n  color: #0e2431;\r\n  z-index: 100;\r\n  cursor: pointer;\r\n  transform: rotate(-225deg);\r\n  transition: all 0.6s ease;\r\n}\r\nnav.open .toggle-btn{\r\n  transform: rotate(0deg);\r\n}\r\n.nav-content span{\r\n  position: absolute;\r\n  transition: all 0.6s ease;\r\n  opacity: 0;\r\n}\r\nnav.open .nav-content span{\r\n  transform: rotate(calc(var(--i) * (360deg\/8))) translateY(120px);\r\n  opacity: 1;\r\n}\r\n.nav-content span a{\r\n  text-decoration: none;\r\n  transform: rotate(45deg);\r\n}\r\n.nav-content span a i{\r\n  font-size: 24px;\r\n  color: #0e2431;\r\n  transform: rotate(calc(var(--i) * (360deg\/ -8)));\r\n  opacity: 0.8;\r\n  transition: 0.2s;\r\n}\r\n.nav-content span a:hover i{\r\n  opacity: 1;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6e7bae6 e-flex e-con-boxed e-con e-parent\" data-id=\"6e7bae6\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-41048f1 elementor-widget elementor-widget-heading\" data-id=\"41048f1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">JavaScript Functionality<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e150cc0 e-flex e-con-boxed e-con e-parent\" data-id=\"e150cc0\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0d60f8f elementor-widget elementor-widget-text-editor\" data-id=\"0d60f8f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The JavaScript code introduces interactivity:<\/p><ul><li><strong>Toggle Functionality<\/strong>: A <code>click<\/code> event listener toggles the <code>open<\/code> class on the <code>nav<\/code> element, controlling the menu item&#8217;s expansion and animation.<\/li><li><strong>Drag-and-Drop Interaction<\/strong>:<ul><li><code>mousedown<\/code>, <code>mousemove<\/code>, and <code>mouseup<\/code> events track mouse movement and adjust the <code>top<\/code> position of the <code>nav<\/code>.<\/li><li>The <code>onDrag<\/code> function calculates the menu&#8217;s vertical position and ensures it stays within bounds using <code>window.innerHeight<\/code> and <code>navHeight<\/code>.<\/li><\/ul><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ae1d3a1 elementor-widget elementor-widget-code-highlight\" data-id=\"ae1d3a1\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\/\/ getting HTML elements\r\n  const nav = document.querySelector(\"nav\"),\r\n        toggleBtn = nav.querySelector(\".toggle-btn\");\r\n\r\n    toggleBtn.addEventListener(\"click\" , () =>{\r\n      nav.classList.toggle(\"open\");\r\n    });\r\n\r\n  \/\/ js code to make draggable nav\r\n  function onDrag({movementY}) { \/\/movementY gets mouse vertical value\r\n    const navStyle = window.getComputedStyle(nav), \/\/getting all css style of nav\r\n          navTop = parseInt(navStyle.top), \/\/ getting nav top value & convert it into string\r\n          navHeight = parseInt(navStyle.height), \/\/ getting nav height value & convert it into string\r\n          windHeight = window.innerHeight; \/\/ getting window height\r\n\r\n    nav.style.top = navTop > 0 ? `${navTop + movementY}px` : \"1px\";\r\n    if(navTop > windHeight - navHeight){\r\n      nav.style.top = `${windHeight - navHeight}px`;\r\n    }\r\n  }\r\n\r\n  \/\/this function will call when user click mouse's button and  move mouse on nav\r\n  nav.addEventListener(\"mousedown\", () =>{\r\n    nav.addEventListener(\"mousemove\", onDrag);\r\n  });\r\n\r\n  \/\/these function will call when user relase mouse button and leave mouse from nav\r\n  nav.addEventListener(\"mouseup\", () =>{\r\n    nav.removeEventListener(\"mousemove\", onDrag);\r\n  });\r\n  nav.addEventListener(\"mouseleave\", () =>{\r\n    nav.removeEventListener(\"mousemove\", onDrag);\r\n  });<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-829e9b0 e-flex e-con-boxed e-con e-parent\" data-id=\"829e9b0\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-409985a elementor-widget elementor-widget-heading\" data-id=\"409985a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Extending Functionality<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1c7c0a9 e-flex e-con-boxed e-con e-parent\" data-id=\"1c7c0a9\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0b024e0 elementor-widget elementor-widget-text-editor\" data-id=\"0b024e0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>For advanced features, consider:<\/p><ul><li><strong>Mobile Responsiveness<\/strong>: Add touch event for drag functionality on touchscreen.<\/li><li><strong>Custom Themes<\/strong>: Allow users to switch between different color themes.<\/li><li><strong>Accessibility Features<\/strong>: Ensure keyboard navigation and ARIA roles for better inclusivity.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9b4c8fd elementor-widget elementor-widget-heading\" data-id=\"9b4c8fd\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d08e47 elementor-widget elementor-widget-text-editor\" data-id=\"2d08e47\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Draggable navigation menus are a versatile and user-centric design element that enriches the user experience by combining functionality with visual appeal. The provided implementation shows a robust approach to creating menus that provide flexibility, style, and interactivity. Whether for a portfolio site, web application, or creative project, this feature can elevate your design and leave a lasting impression on users.<span style=\"color: var( --e-global-color-text ); letter-spacing: 0px;\">\u00a0<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c32a291 elementor-widget elementor-widget-shortcode\" data-id=\"c32a291\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style type=\"text\/css\">\r\n\t\t#dae-shortcode1311-download-wrapper {\r\n\t\t\tbackground: url() !important;\r\n\t\t\tbackground-attachment: scroll !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-download-file-image {\r\n\t\t\twidth: 40% !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-file-image {\r\n\t\t\twidth: 20% !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-download-title {\r\n\t\t\tfont-size: 40px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-download-text {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-download-text h1,\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-download-text h2,\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-download-text h3,\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-download-text h4,\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-download-text h5 {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-download-button {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t\tbackground: none !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-download-button:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-label {\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-icon {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px 0 0 10px !important;\r\n\t\t\t-moz-border-radius: 10px 0 0 10px !important;\r\n\t\t\t-webkit-border-radius: 10px 0 0 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-field {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tbackground: #f9f9f9 !important;\r\n\t\t\tborder-radius: 0 10px 10px 0 !important;\r\n\t\t\t-moz-border-radius: 0 10px 10px 0 !important;\r\n\t\t\t-webkit-border-radius: 0 10px 10px 0 !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-select-icon {\r\n\t\t\ttop: calc(50% - 7.5px) !important;\r\n\t\t\tright: 15px !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-field::-webkit-input-placeholder,\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-field::placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-field::-ms-input-placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-checkbox-text {\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tfont-size: 12px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-checkbox-text a {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-checkbox-text a:hover {\r\n\t\t\tcolor: #0081c1 !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-submit {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-submit:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0081c1 !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-loading {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-message {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-error {\r\n\t\t\tcolor: #dd1111 !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-success {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-category-interests h4,\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-input-wrap-interest label {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: flex-start !important;\r\n\t\t\t-webkit-justify-content: flex-start !important;\r\n\t\t\t-moz-justify-content: fle-start !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-download-title,\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-download-text,\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-label,\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-message,\r\n\t\t#dae-shortcode1311-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper.dae-shortcode-download-wrapper-wide {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode1311-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-title,\r\n\t\t#dae-shortcode1311-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-text,\r\n\t\t#dae-shortcode1311-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode1311-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode1311-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-label,\r\n\t\t#dae-shortcode1311-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-message,\r\n\t\t#dae-shortcode1311-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t<\/style>\r\n\t\t<div id=\"dae-shortcode1311-download-wrapper\" class=\"dae-shortcode-download-wrapper\">\r\n\t\t\t\r\n\t\t\t<div class=\"dae-shortcode-download-content-wrapper\">\r\n\t\t\t\t<h2 class=\"dae-shortcode-download-title\">Dragged Navigation Menu Source Code<\/h2>\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"dae-shortcode-download-button\">\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-icon\"><i class=\"fas fa-download\"><\/i><\/span>\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-text\">FREE DOWNLOAD<\/span>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"dae-shortcode-register-wrapper\">\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-label\">Send download link to:<\/p>\r\n\t\t\t\t\t<form class=\"dae-shortcode-register-form\" method=\"post\" novalidate=\"novalidate\">\r\n\t\t\t\t\t\t<input type=\"hidden\" name=\"file\" value=\"dragged-navigation-menu.zip\" \/>\r\n\t\t\t\t\t\t<div class=\"dae-shortcode-register-field-wrap\"><div class=\"dae-shortcode-register-icon\"><i class=\"fas fa-envelope\"><\/i><\/div><div class=\"dae-shortcode-register-input-wrap\"><input class=\"dae-shortcode-register-field\" type=\"email\" name=\"email\" placeholder=\"Email\" autocomplete=\"off\" \/><\/div><\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t<p>\r\n\t\t\t\t\t\t\t<input class=\"dae-shortcode-register-submit\" type=\"submit\" value=\"Send link\" \/>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t\t<p class=\"dae-shortcode-register-loading\">\r\n\t\t\t\t\t\t\t<i class=\"fas fa-spinner fa-spin\"><\/i>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t<\/form>\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-message\"><\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Draggable Circular Navigation Menu are a sleek and dynamic interface feature that can significantly improve the user experience<\/p>\n","protected":false},"author":1,"featured_media":1285,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,4],"tags":[],"class_list":["post-1284","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-htmlcss","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Draggable Circular Navigation Menu in HTML CSS &amp; JavaScript<\/title>\n<meta name=\"description\" content=\"Create your own draggable circular navigation to make your website attractive and you can add new feature to that menu.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codingtutorials.in\/draggable-circular-navigation-menu-in-html-css-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Draggable Circular Navigation Menu in HTML CSS &amp; JavaScript\" \/>\n<meta property=\"og:description\" content=\"Create your own draggable circular navigation to make your website attractive and you can add new feature to that menu.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codingtutorials.in\/draggable-circular-navigation-menu-in-html-css-javascript\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100040911374714\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-26T15:22:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-17T03:58:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/11\/New-Project.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1424\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"coding2w_newspaper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:site\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"coding2w_newspaper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Draggable Circular Navigation Menu in HTML CSS & JavaScript","description":"Create your own draggable circular navigation to make your website attractive and you can add new feature to that menu.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codingtutorials.in\/draggable-circular-navigation-menu-in-html-css-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Draggable Circular Navigation Menu in HTML CSS & JavaScript","og_description":"Create your own draggable circular navigation to make your website attractive and you can add new feature to that menu.","og_url":"https:\/\/codingtutorials.in\/draggable-circular-navigation-menu-in-html-css-javascript\/","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100040911374714","article_published_time":"2024-11-26T15:22:57+00:00","article_modified_time":"2025-02-17T03:58:19+00:00","og_image":[{"width":2560,"height":1424,"url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/11\/New-Project.webp","type":"image\/webp"}],"author":"coding2w_newspaper","twitter_card":"summary_large_image","twitter_creator":"@_CodingAcademy_","twitter_site":"@_CodingAcademy_","twitter_misc":{"Written by":"coding2w_newspaper","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codingtutorials.in\/draggable-circular-navigation-menu-in-html-css-javascript\/#article","isPartOf":{"@id":"https:\/\/codingtutorials.in\/draggable-circular-navigation-menu-in-html-css-javascript\/"},"author":{"name":"coding2w_newspaper","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10"},"headline":"Draggable Circular Navigation Menu in HTML CSS &amp; JavaScript","datePublished":"2024-11-26T15:22:57+00:00","dateModified":"2025-02-17T03:58:19+00:00","mainEntityOfPage":{"@id":"https:\/\/codingtutorials.in\/draggable-circular-navigation-menu-in-html-css-javascript\/"},"wordCount":550,"commentCount":0,"publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"image":{"@id":"https:\/\/codingtutorials.in\/draggable-circular-navigation-menu-in-html-css-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/11\/New-Project.webp","articleSection":["HTML&amp;CSS","Javascript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codingtutorials.in\/draggable-circular-navigation-menu-in-html-css-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codingtutorials.in\/draggable-circular-navigation-menu-in-html-css-javascript\/","url":"https:\/\/codingtutorials.in\/draggable-circular-navigation-menu-in-html-css-javascript\/","name":"Draggable Circular Navigation Menu in HTML CSS & JavaScript","isPartOf":{"@id":"https:\/\/codingtutorials.in\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codingtutorials.in\/draggable-circular-navigation-menu-in-html-css-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codingtutorials.in\/draggable-circular-navigation-menu-in-html-css-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/11\/New-Project.webp","datePublished":"2024-11-26T15:22:57+00:00","dateModified":"2025-02-17T03:58:19+00:00","description":"Create your own draggable circular navigation to make your website attractive and you can add new feature to that menu.","breadcrumb":{"@id":"https:\/\/codingtutorials.in\/draggable-circular-navigation-menu-in-html-css-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codingtutorials.in\/draggable-circular-navigation-menu-in-html-css-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/draggable-circular-navigation-menu-in-html-css-javascript\/#primaryimage","url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/11\/New-Project.webp","contentUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/11\/New-Project.webp","width":2560,"height":1424,"caption":"Draggable Circular Navigation"},{"@type":"BreadcrumbList","@id":"https:\/\/codingtutorials.in\/draggable-circular-navigation-menu-in-html-css-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codingtutorials.in\/"},{"@type":"ListItem","position":2,"name":"Draggable Circular Navigation Menu in HTML CSS &amp; JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codingtutorials.in\/#website","url":"https:\/\/codingtutorials.in\/","name":"Coding Tutorials","description":"","publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"alternateName":"Coding Tutorial for Beginners","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codingtutorials.in\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codingtutorials.in\/#organization","name":"Coding Tutorials","url":"https:\/\/codingtutorials.in\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"Coding Tutorials"},"image":{"@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=100040911374714","https:\/\/x.com\/_CodingAcademy_","https:\/\/www.instagram.com\/coder_ranjeet\/","https:\/\/www.threads.net\/@coder_ranjeet"]},{"@type":"Person","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10","name":"coding2w_newspaper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","caption":"coding2w_newspaper"},"sameAs":["https:\/\/codingtutorials.in\/"],"url":"https:\/\/codingtutorials.in\/author\/coding2w_newspaper\/"}]}},"_links":{"self":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/1284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/comments?post=1284"}],"version-history":[{"count":49,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/1284\/revisions"}],"predecessor-version":[{"id":2895,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/1284\/revisions\/2895"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media\/1285"}],"wp:attachment":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media?parent=1284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/categories?post=1284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/tags?post=1284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}