Hi,
On Editor X, still starting the learn the basics. I found a menu on codepen. This one: codepen . io/alvarotrigo/pen/ExQKGoV can i add this menu to the middle of my page with the brand inside of it and the menu to be clickable to be able to navigate. Any way to integrate this please?
Your wish is not that easy to be generated, but possible.
- You will have to converst all the given CODE to the right format.
- You will have to add either an HTML-Component, or a CUSTOM-ELEMENT to your page/site.
- You will have to generate a lot of code to connect the functions of your wanted CODEPEN-MENU.
Hi Velo-Ninja,
Ok, hoped the codepen code could be integrated more easily.
For the first remark you make, what is the right format? So basicly the codepen is not reusable in Wix? Would love to have some guidance or help with this so I can make it. Thank you.
You would have to convert this to HTML-format…
- var point_count = 7;
- var circle_radius = 160;
- var pi = 3.14159;
- var n = 0;
- var dash_array = pi * circle_radius * 2;
.main
.navigation-circle
.navigation-circle__inner
svg.navigation-circle-svg.navigation-circle-svg--opaque(
version="1.1",
xmlns="http://www.w3.org/2000/svg",
x="0px",
y="0px",
viewbox=`0 0 ${circle_radius * 2} ${circle_radius * 2}`,
style=`enable-background:new 0 0 ${circle_radius * 2} ${circle_radius * 2}`
)
circle(
cx=`${circle_radius}`,
cy=`${circle_radius}`,
r=`${circle_radius - 2}`,
fill="none",
stroke-width="1",
stroke="#c644fc",
stroke-linecap="round",
stroke-miterlimit="10",
style="stroke-dashoffset: 0; stroke-dasharray: none"
)
svg.navigation-circle-svg.navigation-circle-svg--mask(
version="1.1",
xmlns="http://www.w3.org/2000/svg",
x="0px",
y="0px",
viewbox=`0 0 ${circle_radius * 2} ${circle_radius * 2}`,
style=`enable-background:new 0 0 ${circle_radius * 2} ${circle_radius * 2}`
)
circle#mask-circle(
cx=`${circle_radius}`,
cy=`${circle_radius}`,
r=`${circle_radius - 2}`,
fill="none",
stroke-width="2",
stroke="#c644fc",
stroke-linecap="round",
stroke-miterlimit="10",
style=`stroke-dasharray:${dash_array}px;`
)
ul.navigation-circle__list
while n < point_count
- n++;
li.navigation-circle-list-item
a.navigation-circle-list-item__point(
onclick=`onClick(${n})`,
onmouseenter=`calculateOffset(${n})`,
onMouseLeave="onMouseLeave()"
)
.navigation-circle-list-item__meta
h3.navigation-circle-list-item__title Item #
= n
h4.navigation-circle-list-item__subtitle It just goes round and round
- You would also have to convert and integrate CSS into the HTML-file…
$color_primary: #c644fc;
$color_secondary: #f7f7f7;
$color_background: #000;
$point_count: 7;
$point_radius: 16px;
$circle_radius: 160px;
$start_anim_delta: 5;
* {
margin: 0;
padding: 0;
border: 0;
outline: none;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
html,
body {
height: 100vh;
width: 100vw;
background-color: $color_background;
background: linear-gradient(#1f1f21, $color_background);
}
.main {
display: flex;
height: 100vh;
width: 100vw;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-items: center;
}
.navigation-circle {
display: block;
position: relative;
height: $circle_radius * 2;
width: $circle_radius * 2;
margin: auto;
&__inner {
display: block;
position: relative;
height: 100%;
width: 100%;
}
&__list {
display: block;
position: absolute;
height: $circle_radius * 2;
width: $circle_radius * 2;
transform: rotate(-90deg);
animation: #{1 + (($point_count / $start_anim_delta) - 1 / $start_anim_delta)}s
cubic-bezier(0.25, -0.25, 0.35, 1) 0 1 animate-in-list forwards;
}
}
.navigation-circle-svg {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: rotateZ(-90deg);
&--opaque {
opacity: 0.5;
}
&--mask {
circle {
transition: all 0.5s ease;
transition-delay: 0.5s;
animation: #{1 +(($point_count / $start_anim_delta) - 1 / $start_anim_delta)}s
ease 0 1 animate-in-svg-circle-mask backwards;
}
}
}
.navigation-circle-list-item {
display: block;
position: absolute;
height: 0;
width: calc(50% + #{$point_radius});
top: 50%;
left: 50%;
list-style: none;
transform-origin: 0 0;
&__point {
display: block;
position: absolute;
height: $point_radius * 2;
width: $point_radius * 2;
top: -#{$point_radius};
right: 2px;
cursor: pointer;
transform: scale(0);
&:before {
content: "•";
display: block;
position: absolute;
height: $point_radius * 2;
width: $point_radius * 2;
top: 0;
color: $color_primary;
background-color: $color_background;
font-size: 12px;
font-weight: 400;
line-height: $point_radius * 2;
text-align: center;
border: 2px solid $color_primary;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 0px $color_primary;
transform: scale(0.75);
transition: all 0.5s ease;
}
&:after {
content: "";
display: block;
position: absolute;
height: 1px;
width: 0px;
top: 18px;
left: 31px;
background-color: $color_primary;
transition: all 0.5s ease;
}
}
&__meta {
display: block;
position: absolute;
overflow: hidden;
opacity: 0;
transform-origin: center;
margin-left: 78px;
min-width: 68px;
padding: 4px;
}
&__title {
display: block;
color: $color_secondary;
text-align: left;
font-size: 10px;
border-bottom: 1px solid $color_secondary;
padding-bottom: 4px;
margin-bottom: 6px;
}
&__subtitle {
display: block;
color: $color_secondary;
text-align: center;
font-weight: 200;
font-size: 8px;
}
}
@for $i from 1 through $point_count {
.navigation-circle-list-item:nth-of-type(#{$i}) {
transform: rotateZ(calc((360deg / #{$point_count}) * #{$i}));
}
.navigation-circle-list-item:nth-of-type(#{$i})
.navigation-circle-list-item__meta {
$angle: 360deg / $point_count * $i;
$rotateZ: 90 - $angle;
transform: rotateZ(#{$rotateZ});
}
.navigation-circle-list-item:nth-of-type(#{$i})
.navigation-circle-list-item__point {
animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) #{$i / $start_anim_delta - 1 /
$start_anim_delta}s 1 animate-in-list-item-point forwards;
}
}
.navigation-circle-list-item:hover .navigation-circle-list-item__point:before {
transform: scale(1);
font-size: $point_radius;
}
.navigation-circle-list-item:hover .navigation-circle-list-item__point:after {
width: $point_radius * 2;
left: $point_radius * 2 + 2;
}
.navigation-circle-list-item:hover .navigation-circle-list-item__meta {
opacity: 1;
}
.navigation-circle-list-item:active .navigation-circle-list-item__point:before,
.navigation-circle-list-item.active .navigation-circle-list-item__point:before {
transform: scale(0.85);
color: $color_background;
box-shadow: inset 0px 0px 0px $point_radius $color_primary;
border-color: transparent;
}
.navigation-circle-list-item:active .navigation-circle-list-item__point:after,
.navigation-circle-list-item.active .navigation-circle-list-item__point:after {
width: $point_radius * 2 + 2;
left: $point_radius * 2;
}
.navigation-circle-list-item:active .navigation-circle-list-item__meta,
.navigation-circle-list-item.active .navigation-circle-list-item__meta {
opacity: 1;
}
@keyframes animate-in-list {
0% {
transform: rotate(-540deg);
}
100% {
transform: rotate(-90deg);
}
}
@keyframes animate-in-svg-circle-mask {
0% {
stroke-dashoffset: 1005;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes animate-in-list-item-point {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
- You would have to integrate the JS-file inside HTML…
const pointCount = 7;
const circleRadius = 160;
const startAnimDelta = 5;
const circumference = Math.PI * circleRadius * 2;
var selectedItemIndex = -1;
var circlePath = document.getElementById("mask-circle");
/**
* @description On Mouse Leave event handler for points
*/
const onMouseLeave = () => {
let index = selectedItemIndex !== -1 ? selectedItemIndex : 0;
calculateOffset(index);
};
/**
* @description On Click event handler for points
* @param {Number} index - Index of list item
*/
const onClick = (index) => {
//If already selected, deselect
selectedItemIndex = selectedItemIndex === index ? -1 : index;
calculateOffset(index);
//Find active item, deselect
let activeListItem = document.querySelectorAll(
".navigation-circle-list-item.active"
);
if (activeListItem.length > 0) activeListItem[0].classList.remove("active");
//Find new item by index, select
let listItem = document.querySelectorAll(
".navigation-circle-list-item:nth-of-type(" + selectedItemIndex + ")"
);
if (listItem.length > 0) listItem[0].classList.add("active");
};
/**
* @description - Calculate offset for circle path by index of list item
* @param {Number} index - Index of list item
*/
const calculateOffset = (index = 0) => {
let offset = 0;
if (index !== 0) offset = (circumference / pointCount) * (pointCount - index);
circlePath.style.strokeDashoffset = `${offset}px`;
};
// INTRO
let buffer = 500;
let delay =
1000 * (1 + pointCount / startAnimDelta - 1 / startAnimDelta) + buffer;
setTimeout(() => onClick(1), delay);
After you have done everything… you would get your first CHECK-POINT.
Your menu would start to be visible and working, but still wouldn’t be dynamic to be useable.
- Next step would be to generate code, to connect the HTML-MENU with your wix-page.
After you have coded all these steps, you would be able to use your HTM-Menu from CODE-PEN.
Allright this gives me a good start, let’s see if I can get this to work 
Thanks a lot!
No problem, good luck.
For converting into HTML (your first step). On codepen it is HTML, so this isn’t the right format?
Only Js- seems to have the right format, but is not included inside HTML.
If you need solution to make it work, you can find my email in my profile.
Do you already have some PROGRESS???
See if a web dev can figure this out… next week I’ll be seeing where we are with this. Thanks a lot buddy, keep you informed.
Tell me when you are online, i will give you an quick access, to show you something.
Your working CODE-PEN-MEU on a WIX-SITE…
Step-One done!
But you still would have to do STEP-2!
Step-2: Connecting CODE-PEN-MENU with Wix-Site!
hi Velo-Ninja,
The mechanics of yours seems to work. Can I use that one and integrate it to mine? -Then I can focus on the step 2 of this… Wonderfull help btw, thanks a lot!
You should understand, that this is normaly a SERVICE.
But this time, you will get it for free.
PART-1:
<html>
<head>
<title> </title>
<style>
@charset "UTF-8";
* {
margin: 0;
padding: 0;
border: 0;
outline: none;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
html,
body {
height: 100vh;
width: 100vw;
background-color: #000;
background: linear-gradient(#1f1f21, #000);
}
.main {
display: flex;
height: 100vh;
width: 100vw;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-items: center;
}
.navigation-circle {
display: block;
position: relative;
height: 320px;
width: 320px;
margin: auto;
}
.navigation-circle__inner {
display: block;
position: relative;
height: 100%;
width: 100%;
}
.navigation-circle__list {
display: block;
position: absolute;
height: 320px;
width: 320px;
transform: rotate(-90deg);
animation: 2.2s cubic-bezier(0.25, -0.25, 0.35, 1) 0 1 animate-in-list forwards;
}
.navigation-circle-svg {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: rotateZ(-90deg);
}
.navigation-circle-svg--opaque {
opacity: 0.5;
}
.navigation-circle-svg--mask circle {
transition: all 0.5s ease;
transition-delay: 0.5s;
animation: 2.2s ease 0 1 animate-in-svg-circle-mask backwards;
}
.navigation-circle-list-item {
display: block;
position: absolute;
height: 0;
width: calc(50% + 16px);
top: 50%;
left: 50%;
list-style: none;
transform-origin: 0 0;
}
.navigation-circle-list-item__point {
display: block;
position: absolute;
height: 32px;
width: 32px;
top: -16px;
right: 2px;
cursor: pointer;
transform: scale(0);
}
.navigation-circle-list-item__point:before {
content: "•";
display: block;
position: absolute;
height: 32px;
width: 32px;
top: 0;
color: #c644fc;
background-color: #000;
font-size: 12px;
font-weight: 400;
line-height: 32px;
text-align: center;
border: 2px solid #c644fc;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 0px #c644fc;
transform: scale(0.75);
transition: all 0.5s ease;
}
.navigation-circle-list-item__point:after {
content: "";
display: block;
position: absolute;
height: 1px;
width: 0px;
top: 18px;
left: 31px;
background-color: #c644fc;
transition: all 0.5s ease;
}
.navigation-circle-list-item__meta {
display: block;
position: absolute;
overflow: hidden;
opacity: 0;
transform-origin: center;
margin-left: 78px;
min-width: 68px;
padding: 4px;
}
.navigation-circle-list-item__title {
display: block;
color: #f7f7f7;
text-align: left;
font-size: 10px;
border-bottom: 1px solid #f7f7f7;
padding-bottom: 4px;
margin-bottom: 6px;
}
.navigation-circle-list-item__subtitle {
display: block;
color: #f7f7f7;
text-align: center;
font-weight: 200;
font-size: 8px;
}
.navigation-circle-list-item:nth-of-type(1) {
transform: rotateZ(calc((360deg / 7) * 1));
}
.navigation-circle-list-item:nth-of-type(1) .navigation-circle-list-item__meta {
transform: rotateZ(38.5714285714deg);
}
.navigation-circle-list-item:nth-of-type(1) .navigation-circle-list-item__point {
animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) 0s 1 animate-in-list-item-point forwards;
}
Part-2:
.navigation-circle-list-item:nth-of-type(2) {
transform: rotateZ(calc((360deg / 7) * 2));
}
.navigation-circle-list-item:nth-of-type(2) .navigation-circle-list-item__meta {
transform: rotateZ(-12.8571428571deg);
}
.navigation-circle-list-item:nth-of-type(2) .navigation-circle-list-item__point {
animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) 0.2s 1 animate-in-list-item-point forwards;
}
.navigation-circle-list-item:nth-of-type(3) {
transform: rotateZ(calc((360deg / 7) * 3));
}
.navigation-circle-list-item:nth-of-type(3) .navigation-circle-list-item__meta {
transform: rotateZ(-64.2857142857deg);
}
.navigation-circle-list-item:nth-of-type(3) .navigation-circle-list-item__point {
animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) 0.4s 1 animate-in-list-item-point forwards;
}
.navigation-circle-list-item:nth-of-type(4) {
transform: rotateZ(calc((360deg / 7) * 4));
}
.navigation-circle-list-item:nth-of-type(4) .navigation-circle-list-item__meta {
transform: rotateZ(-115.7142857143deg);
}
.navigation-circle-list-item:nth-of-type(4) .navigation-circle-list-item__point {
animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) 0.6s 1 animate-in-list-item-point forwards;
}
.navigation-circle-list-item:nth-of-type(5) {
transform: rotateZ(calc((360deg / 7) * 5));
}
.navigation-circle-list-item:nth-of-type(5) .navigation-circle-list-item__meta {
transform: rotateZ(-167.1428571429deg);
}
.navigation-circle-list-item:nth-of-type(5) .navigation-circle-list-item__point {
animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) 0.8s 1 animate-in-list-item-point forwards;
}
.navigation-circle-list-item:nth-of-type(6) {
transform: rotateZ(calc((360deg / 7) * 6));
}
.navigation-circle-list-item:nth-of-type(6) .navigation-circle-list-item__meta {
transform: rotateZ(-218.5714285714deg);
}
.navigation-circle-list-item:nth-of-type(6) .navigation-circle-list-item__point {
animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) 1s 1 animate-in-list-item-point forwards;
}
.navigation-circle-list-item:nth-of-type(7) {
transform: rotateZ(calc((360deg / 7) * 7));
}
.navigation-circle-list-item:nth-of-type(7) .navigation-circle-list-item__meta {
transform: rotateZ(-270deg);
}
.navigation-circle-list-item:nth-of-type(7) .navigation-circle-list-item__point {
animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) 1.2s 1 animate-in-list-item-point forwards;
}
.navigation-circle-list-item:hover .navigation-circle-list-item__point:before {
transform: scale(1);
font-size: 16px;
}
.navigation-circle-list-item:hover .navigation-circle-list-item__point:after {
width: 32px;
left: 34px;
}
.navigation-circle-list-item:hover .navigation-circle-list-item__meta {
opacity: 1;
}
.navigation-circle-list-item:active .navigation-circle-list-item__point:before,
.navigation-circle-list-item.active .navigation-circle-list-item__point:before {
transform: scale(0.85);
color: #000;
box-shadow: inset 0px 0px 0px 16px #c644fc;
border-color: transparent;
}
.navigation-circle-list-item:active .navigation-circle-list-item__point:after,
.navigation-circle-list-item.active .navigation-circle-list-item__point:after {
width: 34px;
left: 32px;
}
.navigation-circle-list-item:active .navigation-circle-list-item__meta,
.navigation-circle-list-item.active .navigation-circle-list-item__meta {
opacity: 1;
}
@keyframes animate-in-list {
0% {transform: rotate(-540deg);}
100% {transform: rotate(-90deg);}
}
@keyframes animate-in-svg-circle-mask {
0% {stroke-dashoffset: 1005;}
100% {stroke-dashoffset: 0;}
}
@keyframes animate-in-list-item-point {
0% {transform: scale(0);}
100% {transform: scale(1);}
}
</style>
</head>
Part-3:
<body>
<div class="main">
<div class="navigation-circle">
<div class="navigation-circle__inner">
<svg class="navigation-circle-svg navigation-circle-svg--opaque" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 320 320" style="enable-background:new 0 0 320 320">
<circle cx="160" cy="160" r="158" fill="none" stroke-width="1" stroke="#c644fc" stroke-linecap="round" stroke-miterlimit="10" style="stroke-dashoffset: 0; stroke-dasharray: none"></circle>
</svg>
<svg class="navigation-circle-svg navigation-circle-svg--mask" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewbox="0 0 320 320" style="enable-background:new 0 0 320 320">
<circle id="mask-circle" cx="160" cy="160" r="158" fill="none" stroke-width="2" stroke="#c644fc" stroke-linecap="round" stroke-miterlimit="10" style="stroke-dasharray:1005.3088px;"></circle>
</svg>
<ul class="navigation-circle__list">
<li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(1)" onmouseenter="calculateOffset(1)" onMouseLeave="onMouseLeave()">
<div class="navigation-circle-list-item__meta">
<h3 class="navigation-circle-list-item__title">Item #1
</h3>
<h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
</div></a></li>
<li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(2)" onmouseenter="calculateOffset(2)" onMouseLeave="onMouseLeave()">
<div class="navigation-circle-list-item__meta">
<h3 class="navigation-circle-list-item__title">Item #2
</h3>
<h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
</div></a></li>
<li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(3)" onmouseenter="calculateOffset(3)" onMouseLeave="onMouseLeave()">
<div class="navigation-circle-list-item__meta">
<h3 class="navigation-circle-list-item__title">Item #3
</h3>
<h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
</div></a></li>
<li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(4)" onmouseenter="calculateOffset(4)" onMouseLeave="onMouseLeave()">
<div class="navigation-circle-list-item__meta">
<h3 class="navigation-circle-list-item__title">Item #4
</h3>
<h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
</div></a></li>
<li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(5)" onmouseenter="calculateOffset(5)" onMouseLeave="onMouseLeave()">
<div class="navigation-circle-list-item__meta">
<h3 class="navigation-circle-list-item__title">Item #5
</h3>
<h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
</div></a></li>
<li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(6)" onmouseenter="calculateOffset(6)" onMouseLeave="onMouseLeave()">
<div class="navigation-circle-list-item__meta">
<h3 class="navigation-circle-list-item__title">Item #6
</h3>
<h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
</div></a></li>
<li class="navigation-circle-list-item"><a class="navigation-circle-list-item__point" onclick="onClick(7)" onmouseenter="calculateOffset(7)" onMouseLeave="onMouseLeave()">
<div class="navigation-circle-list-item__meta">
<h3 class="navigation-circle-list-item__title">Item #7
</h3>
<h4 class="navigation-circle-list-item__subtitle">It just goes round and round</h4>
</div></a></li>
</ul>
</div>
</div>
</div>
<script>
const pointCount = 7, circleRadius = 160;
const startAnimDelta = 5, circumference = Math.PI * circleRadius * 2;
var selectedItemIndex = -1;
var circlePath = document.getElementById('mask-circle');
const onMouseLeave = () => {
let index = (selectedItemIndex !== -1) ? selectedItemIndex : 0;
calculateOffset(index);
};
const onClick = (index) => {
//If already selected, deselect
selectedItemIndex = (selectedItemIndex === index) ? -1 : index;
calculateOffset(index);
//Find active item, deselect
let activeListItem = document.querySelectorAll('.navigation-circle-list-item.active');
if (activeListItem.length > 0) activeListItem[0].classList.remove('active');
//Find new item by index, select
let listItem = document.querySelectorAll('.navigation-circle-list-item:nth-of-type(' + selectedItemIndex + ')');
if (listItem.length > 0) listItem[0].classList.add('active');
};
const calculateOffset = (index=0) => {
let offset = 0;
if (index !== 0) offset = (circumference / pointCount) * (pointCount - index);
circlePath.style.strokeDashoffset = `${offset}px`;
};
let buffer = 500;
let delay = 1000 * (1 + (pointCount / startAnimDelta) - (1 / startAnimDelta)) + buffer;
setTimeout(() => onClick(1), delay);
</script>
</body>
</html>
Good luck and have fun!!!
Appreciate it Velo-Ninja! Much appreciated buddy, love this. Thank you so much.
See you soon again, when it comes to make the connection 