-
-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Martin Muda
committed
Nov 14, 2023
1 parent
4088b17
commit f8cba78
Showing
1 changed file
with
133 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,142 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="../assets/css/orbit-base.min.css" type="text/css" defer/> | ||
| <link rel="stylesheet" href="../assets/css/orbit-theme.min.css" type="text/css" defer/> | ||
| <title>Orbit - o-container</title> | ||
| <link rel="stylesheet" href="../assets/css/orbit-base.min.css" type="text/css" defer /> | ||
| <link rel="stylesheet" href="../assets/css/orbit-theme.min.css" type="text/css" defer /> | ||
| <title>Orbit - Radial menu</title> | ||
| <style> | ||
| .o-container { | ||
| width: 500px; | ||
| aspect-ratio: 1; | ||
| position: absolute; | ||
| } | ||
|
|
||
| .o-sector { | ||
| background-color: rgb(128, 128, 128); | ||
| border-color: black; | ||
| --o-width: 12px; | ||
| --o-sector-gap: 10px; | ||
|
|
||
|
|
||
| } | ||
|
|
||
| .o-core .o-content { | ||
| position: relative; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <main class="o-container-query-enabled"> | ||
| <section class="o-container" id="menu"> | ||
| <div class="o-core" class="header"> | ||
| <div class="o-orbiter" | ||
| style="border:2px solid white ;background-color: rgb(53, 53, 53); --o-diameter: 60px"> | ||
| <div class="o-content"><span class="text">a</span></div> | ||
| </div> | ||
|
|
||
| </div> | ||
| <div class="o-orbit o-offset-225" style="box-shadow: 0 3px 5px rgb(0 0 0 / 0.5);"> | ||
| <div class="o-sector"> | ||
| <div class="o-content"><span class="text">a</span></div> | ||
| </div> | ||
| <div class="o-sector"> | ||
| <div class="o-content"><span class="text">b</span></div> | ||
| </div> | ||
| <div class="o-sector"> | ||
| <div class="o-content"><span class="text">c</span></div> | ||
| </div> | ||
| <div class="o-sector"> | ||
| <div class="o-content"><span class="text">d</span></div> | ||
| </div> | ||
| </div> | ||
| <div class="o-orbit"> | ||
| <div class="o-orbit o-offset-225 o-limit-90" style="--o-radius-2: 110px"> | ||
| <div class="o-sector"> | ||
| <div class="o-content"><span class="text">a</span></div> | ||
| </div> | ||
| <div class="o-sector"> | ||
| <div class="o-content"><span class="text">b</span></div> | ||
| </div> | ||
| <div class="o-sector"> | ||
| <div class="o-content"><span class="text">c</span></div> | ||
| </div> | ||
| <div class="o-sector"> | ||
| <div class="o-content"><span class="text">d</span></div> | ||
| </div> | ||
| </div> | ||
| <div class="o-orbit o-offset-45 o-limit-90" style="--o-sector-gap: 0px;--o-radius-2: 110px"> | ||
| <div class="o-sector" style="--o-sector-gap: -1px;"> | ||
| <div class="o-content"><span class="text">a</span></div> | ||
| </div> | ||
| <div class="o-sector" style="--o-sector-gap: -1px;"> | ||
| <div class="o-content"><span class="text">b</span></div> | ||
| </div> | ||
| <div class="o-sector"> | ||
| <div class="o-content"><span class="text">a</span></div> | ||
| </div> | ||
| <div class="o-sector"> | ||
| <div class="o-content"><span class="text">b</span></div> | ||
| </div> | ||
| <div class="o-sector"> | ||
| <div class="o-content"><span class="text">c</span></div> | ||
| </div> | ||
| <div class="o-sector"> | ||
| <div class="o-content"><span class="text">d</span></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </section> | ||
| </main> | ||
| <script> | ||
| // Make the DIV element draggable: | ||
| dragElement(document.getElementById("menu")); | ||
|
|
||
| function dragElement(elmnt) { | ||
| var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; | ||
| if (document.getElementById(elmnt.id + "header")) { | ||
| // if present, the header is where you move the DIV from: | ||
| document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown; | ||
| } else { | ||
| // otherwise, move the DIV from anywhere inside the DIV: | ||
| // elmnt.onmousedown = dragMouseDown; | ||
| } | ||
|
|
||
| function dragMouseDown(e) { | ||
| e = e || window.event; | ||
| e.preventDefault(); | ||
| // get the mouse cursor position at startup: | ||
| pos3 = e.clientX; | ||
| pos4 = e.clientY; | ||
| document.onmouseup = closeDragElement; | ||
| // call a function whenever the cursor moves: | ||
| document.onmousemove = elementDrag; | ||
| } | ||
|
|
||
| function elementDrag(e) { | ||
| e = e || window.event; | ||
| e.preventDefault(); | ||
| // calculate the new cursor position: | ||
| pos1 = pos3 - e.clientX; | ||
| pos2 = pos4 - e.clientY; | ||
| pos3 = e.clientX; | ||
| pos4 = e.clientY; | ||
| // set the element's new position: | ||
| elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; | ||
| elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; | ||
| } | ||
|
|
||
| function closeDragElement() { | ||
| // stop moving when mouse button is released: | ||
| document.onmouseup = null; | ||
| document.onmousemove = null; | ||
| } | ||
| } | ||
| </script> | ||
| </body> | ||
|
|
||
| </html> |