Cześć,
Mam problem z js.
Chcę zaimplementować responsywne menu. Mam na myśli to, że kiedy jestem na stronie startowej, strona startowa jest na pierwszym miejscu na liście. Jeśli jestem na stronie kontaktowej, kontakt jest pierwszy na liście.
Menu to okrąg z poruszającymi się po nim ikonami. Pierwszy element na liście znajduje się na dole koła.
Podsumowując, muszę zmienić dynamicznie listę w skrypcie js w zależności od podstrony, na której się znajduję.
Wiem, że mogę utworzyć kilka plików js i to zadziała, ale chcę spróbować w js lub HTML.
Dzięki za wszelką pomoc
Link do podglądu:stackoverflow.com/questions/68041721/responsive-menu-in-javascript
Kod źródłowy poniżej
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="t-site-header">
<div class="full_container" id="mobile_control">
<div class="bottom">
<div class="nav">
<span id="next" onclick="moon('next')" class="action"><i class="material-icons">keyboard_arrow_left</i></span>
<span id="prev" onclick="moon('prev')" class="action"><i class="material-icons">keyboard_arrow_right</i></span>
</div>
<div class="orbit">
<div class="planet_container">
<div class="planet pt earth" id="pl0">
<div class="moon" id="0">
<span></span>
</div>
</div>
<div class="planet mars" id="pl1">
<div class="moon" id="1">
<span></span>
</div>
</div>
<div class="planet jupiter" id="pl2">
<div class="moon" id="2">
<span></span>
</div>
</div>
<div class="planet saturn" id="pl3">
<div class="moon" id="3">
<span></span>
</div>
</div>
<div class="planet uranus" id="pl4">
<div class="moon" id="4">
<span></span>
</div>
</div>
<div class="planet neptune" id="pl5">
<div class="moon" id="5">
<span></span>
</div>
</div>
<div class="planet mercury" id="pl6">
<div class="moon" id="6">
<span></span>
</div>
</div>
<div class="planet venus" id="pl7">
<div class="moon" id="7">
<span></span>
</div>
</div>
</div>
<div class="name_container">
<p class="pn">Start</p>
<p class="more">READ MORE</p>
</div>
</div>
</div>
</div>
</header>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js'></script>
</body>
</html>
body {
color: #444444;
font-size: 1rem;
margin: 0;
padding: 0;
}
.t-site-header {
padding-top: 20px;
height: 30vh;
}
.full_container {
position: relative;
display: block;
width: 100vmin;
height: 100%;
margin: auto;
z-index: 100;
}
.full_container .bottom {
position: absolute;
transform: rotate(180deg);
top: 0;
width: 100%;
height: 28vh;
}
.full_container .bottom .nav {
width: 100%;
height: 40px;
padding-top: 15px;
display: block !important;
}
.full_container .bottom .nav span {
color: #999;
cursor: pointer;
}
.full_container .bottom .nav span i {
font-size: 40px;
font-weight: 200;
}
.full_container .bottom .nav span:nth-child(1) {
padding-left: 10vmin;
}
.full_container .bottom .nav span:nth-child(2) {
padding-right: 10vmin;
float: right;
}
.full_container .bottom .orbit {
position: absolute;
top: 5vh;
width: 100%;
height: 100vmin;
border-radius: 50%;
border: 3px solid #eee;
margin: auto;
left: 0;
right: 0;
}
.full_container .bottom .orbit .planet_container {
width: 100%;
height: 100%;
border-radius: 50%;
transition: transform 0.7s ease-in;
}
.full_container .bottom .orbit .planet_container .planet {
position: absolute;
border-radius: 50%;
width: 5vmin;
height: 5vmin;
transition: transform 0.4s linear;
will-change: transform;
}
.full_container .bottom .orbit .planet_container .pt {
transition: transform 0.4s ease-in;
transform: scale(1.7);
will-change: transform;
-webkit-animation: spin 0.4s;
animation: spin 0.4s;
}
/* */
.full_container .bottom .orbit .planet_container .earth {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
top: -2.5vmin;
left: 0;
right: 0;
margin: auto;
/* transform: rotate(180deg)*/
}
.full_container .bottom .orbit .planet_container .earth .mars .jupiter .saturn .uranus .neptune .mercury .venus .moon span {
top: -1vmin;
left: -1vmin;
}
.full_container .bottom .orbit .planet_container .mars {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
right: 12vmin;
top: 12vmin;
/* transform: rotate(-135deg)*/
}
.full_container .bottom .orbit .planet_container .jupiter {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
right: -2.5vmin;
bottom: 46.5vmin;
/* transform: rotate(-90deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .saturn {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
right: 12vmin;
bottom: 12vmin;
/* transform: rotate(-45deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .uranus {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
right: 0;
left: 0;
margin: auto;
bottom: -2.5vmin;
/* transform: rotate(0deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .neptune {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
left: 12vmin;
bottom: 12vmin;
/* transform: rotate(45deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .mercury {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
left: -2.5vmin;
bottom: 46.5vmin;
/* transform: rotate(90deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .venus {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
left: 12vmin;
top: 12vmin;
/* transform: rotate(135deg) scale(1.7);*/
}
.full_container .bottom .orbit .name_container {
position: absolute;
display: flex;
width: auto;
margin: auto;
left: 0;
right: 0;
top: 8vh;
text-align: center;
align-items: center;
justify-content: center;
flex-wrap: wrap;
transform: rotate(180deg);
}
.full_container .bottom .orbit .name_container .more {
width: 100%;
padding: 8px 0;
color: #bbb;
font-weight: 500;
cursor: pointer;
transition: color 0.2s;
}
.full_container .bottom .orbit .name_container .more:hover {
color: #888;
transition: color 0.3s;
}
.full_container .bottom .orbit .name_container .pn {
font-size: 25px;
color: #666;
text-transform: uppercase;
padding-bottom: 4px;
letter-spacing: 4px;
padding-left: 8px;
border-bottom: 3px solid #bbb;
}
.full_container .bottom .orbit .name_container .pn .letter {
display: inline-block;
line-height: 1em;
opacity: 0;
}
.moon {
width: 100%;
height: 100%;
-webkit-animation: planet_rotation 2s infinite linear;
animation: planet_rotation 2s infinite linear;
visibility: hidden;
}
.moon span {
width: 0.8vmin;
height: 0.8vmin;
background: black;
border-radius: 50%;
position: absolute;
}
@-webkit-keyframes planet_rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes planet_rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#pl0{
transform: rotate(180deg);
}
#pl1{
transform: rotate(225deg);
}
#pl2{
transform: rotate(270deg);
}
#pl3{
transform: rotate(315deg);
}
#pl4{
transform: rotate(360deg);
}
#pl5{
transform: rotate(405deg);
}
#pl6{
transform: rotate(450deg);
}
#pl7{
transform: rotate(495deg);
}
var element = document.getElementById('mobile_control');
var hammertime = new Hammer(element);
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
hammertime.on('swipeleft', function(ev) {
cmove("prev");
});
hammertime.on('swiperight', function(ev) {
cmove("next");
});
$(".action").on("click", function(){
cmove($(this).attr('id'));
});
$('.title').each(function(){
$(this).html("Earth".replace("<span class='letter'>$&</span>"));
});
var angle = 0;
var planet_id = 0;
function cmove(dir){
var n_planet = 8, next_id;
var prev, next;
var top = $("#pl"+ planet_id);
var orbit = $(".planet_container");
top.removeClass("pt");
if(planet_id == 0){
prev = $("#pl"+ (n_planet-1));
next = $("#pl"+ (planet_id+1)%n_planet);
}else{
prev = $("#pl"+ (planet_id-1));
next = $("#pl"+ (planet_id+1)%n_planet);
}
if(dir == "prev"){
next_id = (planet_id + 1) % n_planet;
angle -= 45;
next.addClass("pt");
planet_id++;
}else{
if(planet_id == 0){
next_id = 7;
planet_id = 7;
}else{
next_id = planet_id-1;
--planet_id;
}
angle += 45;
prev.addClass("pt");
}
$('.pn').each(function(){
$(this).html(planet[next_id].replace( "<span class='letter'>$&</span>"));
});
anime.timeline({})
.add({
targets: '.pn .letter',
translateX: [40,0],
translateZ: 0,
opacity: [0,1],
easing: "easeOutExpo",
duration: 1200,
delay: function(el, i) {
return 500 + 30 * i;
}
});
orbit.css("transform", "rotateZ(" + angle + "deg)");
}
var planet = ["Start","Contact", "First","Second", "Third", "Fourth", "Fifth", "Sixth"];
var planet0 = document.getElementById("0");
var planet1 = document.getElementById("1");
var planet2 = document.getElementById("2");
var planet3 = document.getElementById("3");
var planet4 = document.getElementById("4");
var planet5 = document.getElementById("5");
var planet6 = document.getElementById("6");
var planet7 = document.getElementById("7");
var x = 8;
function moon(direction){
if(direction == "next"){
x-=1;
}else{
x+=1;
};
if(x>=8){
x=0;
}else if(x<0){
x=7;
};
//let info = document.getElementById("info");
//info.innerHTML=x+direction;
switch (x) {
case 0:
planet0.style.visibility = "visible";
planet1.style.visibility = "hidden";
planet2.style.visibility = "hidden";
planet3.style.visibility = "hidden";
planet4.style.visibility = "hidden";
planet5.style.visibility = "hidden";
planet6.style.visibility = "hidden";
planet7.style.visibility = "hidden";
//info.innerHTML="yes";
break;
case 1:
planet0.style.visibility = "hidden";
planet1.style.visibility = "visible";
planet2.style.visibility = "hidden";
planet3.style.visibility = "hidden";
planet4.style.visibility = "hidden";
planet5.style.visibility = "hidden";
planet6.style.visibility = "hidden";
planet7.style.visibility = "hidden";
break;
case 2:
planet0.style.visibility = "hidden";
planet1.style.visibility = "hidden";
planet2.style.visibility = "visible";
planet3.style.visibility = "hidden";
planet4.style.visibility = "hidden";
planet5.style.visibility = "hidden";
planet6.style.visibility = "hidden";
planet7.style.visibility = "hidden";
break;
case 3:
planet0.style.visibility = "hidden";
planet1.style.visibility = "hidden";
planet2.style.visibility = "hidden";
planet3.style.visibility = "visible";
planet4.style.visibility = "hidden";
planet5.style.visibility = "hidden";
planet6.style.visibility = "hidden";
planet7.style.visibility = "hidden";
break;
case 4:
planet0.style.visibility = "hidden";
planet1.style.visibility = "hidden";
planet2.style.visibility = "hidden";
planet3.style.visibility = "hidden";
planet4.style.visibility = "visible";
planet5.style.visibility = "hidden";
planet6.style.visibility = "hidden";
planet7.style.visibility = "hidden";
break;
case 5:
planet0.style.visibility = "hidden";
planet1.style.visibility = "hidden";
planet2.style.visibility = "hidden";
planet3.style.visibility = "hidden";
planet4.style.visibility = "hidden";
planet5.style.visibility = "visible";
planet6.style.visibility = "hidden";
planet7.style.visibility = "hidden";
break;
case 6:
planet0.style.visibility = "hidden";
planet1.style.visibility = "hidden";
planet2.style.visibility = "hidden";
planet3.style.visibility = "hidden";
planet4.style.visibility = "hidden";
planet5.style.visibility = "hidden";
planet6.style.visibility = "visible";
planet7.style.visibility = "hidden";
break;
case 7:
planet0.style.visibility = "hidden";
planet1.style.visibility = "hidden";
planet2.style.visibility = "hidden";
planet3.style.visibility = "hidden";
planet4.style.visibility = "hidden";
planet5.style.visibility = "hidden";
planet6.style.visibility = "hidden";
planet7.style.visibility = "visible";
break;
default:
planet0.style.visibility = "visible";
planet1.style.visibility = "hidden";
planet2.style.visibility = "hidden";
planet3.style.visibility = "hidden";
planet4.style.visibility = "hidden";
planet5.style.visibility = "hidden";
planet6.style.visibility = "hidden";
planet7.style.visibility = "hidden";
};
};