Перейти к содержимому



Adobe muse: Не могу разместить нужный мне код сразу после Body

#1 Evg82
Evg82
  • Пользователь
  • 1 сообщений
  • Репутация: 0
0

Отправлено 20 июня 2020 - 09:24

Всем привет!
Только на тильду не отсылайте.
Надо именно в adobe muse
В общем есть код нужного мне меню от стороннего разработчика. есть css js и сам html
Данное меню работает, если сразу html располагается после body

Но когда через программу adobe muse делаю, то кусок кода меню ставится внутри других div и меню не работает…
Пробовал и через виджет ставить. и отдельно слой для виджета выделять и ставить его в иерархии самым первым- не помогло. сначала много строчек кода после body div и прочее а потом мой кусок кода ставится…

Я не могу понять можно ли оставив код на том месте куда его ставит прога, заставить как -то работать, сделав изменения если надо в css js и в самом html коде меню…

 

Вот код html

<div id="hamburger-open"><span class="spans" id="spanOne"></span><span class="spans" id="spanTwo"></span><span class="spans" id="spanThree"></span></div>
<div class="modal-menu">
  <h2 class="menuitem"><a href="/index.html">Главная</a></h2>
  <h2 class="menuitem"><a href="/o_tovare.html">О товаре</a></h2>
  <h2 class="menuitem"><a href="/otziv.html">Отзывы</a></h2>
  <h2 class="menuitem"><a href="/faq.html">Вопросы и ответы</a></h2>
  <h2 class="menuitem"><a href="/o_kompanii.html">О нас</a></h2>
</div>
  <script src='https://cdn.jsdelivr.net/mojs/0.265.6/mo.min.js'></script>
    <script  src="/supermenu/js/index.js"></script>

есть еще css и js 

 

Так вот через прогу мой код ставится не сразу после тега body и от этого не работает. Вручную перенесу- работает/ Смотри вложение.

 

Как сделать чтобы код либо сразу ставился после body

 

либо что то в css прописать js  может надо править?

 

Код css

a, a:link, a:visited, a:focus, a:hover, a:active{
  color:olive;
  text-decoration:none; 
}
#hamburger-open {
  z-index: 1;
  position: relative;
  margin-left: 75%;
  margin-top: 2%;
  width: 30px;
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.spans {
  width: 100%;
  height: 10%;
  background-color: #111820;
  border-radius: 500px;
  opacity: 1;
  transition-property: background-color, transform, opacity;
  transition-duration: 0.5s;
  transition-delay: 0.5s;
}
.white {
  background-color: #f5f5f5;
  transition-duration: 0.5s;
  transition-delay: none;
}
.spanOneRotate {
  transform: translateY(9px) rotate(-45deg);
  transition-property: background-color, transform;
  transition-duration: 0.5s;
  transition-delay: 0.5s;
}
.spanTwoRotate {
  transform: rotate(45deg);
  transition-property: background-color, transform;
  transition-duration: 0.5s;
  transition-delay: 0.5s;
}
.spanThreeHide {
  transition-property: background-color, opacity;
  opacity: 0;
  transition-duration: 0.5s;
  transition-delay: 0.5s;
}
.modal-menu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 50vw;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.5s;
  transition-delay: 0s;
}
.menuitem {
  position: relative;
  font-family: "Karla", sans-serif;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  color: #a5a5a5;
  height: 75px;
  transition-property: opacity;
  transition-duration: 0.5s;
  transition-delay: 0;
}
.menuitem:after {
  content: "";
  position: absolute;
  width: 100%;
  top: 45%;
  left: -6px;
  background-color: #111820;
  height: 1px;
  z-index: -1;
  transition-property: all;
  transition-duration: 0.5s;
}
.menuitem:nth-of-type(1):hover:after {
  background-color: #ff4338;
  transform: scaleY(20) translateY(-60%);
}
.menuitem:nth-of-type(2):hover:after {
  background-color: #3cd52e;
  transform: scaleY(20) translateY(-60%);
}
.menuitem:nth-of-type(3):hover:after {
  background-color: #00b3e3;
  transform: scaleY(20) translateY(-60%);
}
.menuitem:nth-of-type(4):hover:after {
  background-color: #ff4338;
  transform: scaleY(20) translateY(-60%);
}
.menuitem:nth-of-type(5):hover:after {
  background-color: #7e14d5;
  transform: scaleY(20) translateY(-60%);
}
.menuitem:hover {
  color: #f5f5f5;
}
.show {
  opacity: 1;
  transition-property: all;
  transition-duration: 0.5s;
  transition-delay: 1s;
}

и js
 

var timelineOpen = new mojs.Timeline({ speed: 1.5 });
var timelineClose = new mojs.Timeline({ speed: 2 });
var _strokeWidth;
var RADIUS = 15;
var hamburger = document.querySelector("#hamburger-open");
var spans = document.getElementsByClassName("spans");
var spanOne = document.querySelector("#spanOne");
var spanTwo = document.querySelector("#spanTwo");
var spanThree = document.querySelector("#spanThree");
var modalMenu = document.querySelector(".modal-menu");
var burst1 = new mojs.Burst({
  parent: hamburger,
  x: "50%",
  y: "50%",
  angle: { 0: 90 },
  radius: { 30: 45 },
  count: 3,
  children: {
    shape: "circle",
    radius: RADIUS,
    scale: { 1: 0 },
    fill: ["#ff4338", "#00b3e3", "#3cd52e"],
    duration: 2000,
    easing: "quad.out"
  }
});
var burst2 = new mojs.Burst({
  parent: hamburger,
  x: "50%",
  y: "50%",
  angle: { 0: 90 },
  radius: { 30: 45 },
  count: 3,
  children: {
    shape: "circle",
    radius: RADIUS,
    scale: { 0: 1 },
    strokeWidth: { 1: 3 },
    opacity: { 1: 0 },
    fill: "transparent",
    stroke: ["#ff4338", "#00b3e3", "#3cd52e"],
    duration: 2000,
    easing: "quad.out"
  }
});
// OPEN
var openBackground = new mojs.Shape({
  fill: "#111820",
  scale: { 0: 8.5 },
  radius: 200,
  delay: 1000,
  easing: "cubic.out",
  backwardEasing: "ease.out",
  duration: 2000
});
burst1.el.style.zIndex = 2;
// check if the hamburger's been crossed
let cross = spanOne.classList.contains("white");
//timeline with burst and background open
timelineOpen.add(burst1, burst2, openBackground);
//timeline with background close
timelineClose.add(openBackground);
//click on the hamburger
hamburger.addEventListener("click", function(e) {
  // check if the menu is a cross
  var cross = spanOne.classList.contains("white");
  modalMenu.classList.toggle("show");
  if (cross) {
    timelineClose.playBackward();
    for (var i = 0; i < spans.length; i++) {
      spans[i].classList.remove("white");
    }
    spanOne.classList.remove("spanOneRotate");
    spanTwo.classList.remove("spanTwoRotate");
    spanThree.classList.remove("spanThreeHide");
  } else {
    timelineOpen.play();
    for (var i = 0; i < spans.length; i++) {
      spans[i].classList.add("white");
    }
    spanOne.classList.add("spanOneRotate");
    spanTwo.classList.add("spanTwoRotate");
    spanThree.classList.add("spanThreeHide");
  }
});

Может существуют способы быть строчки кода приоритетными независимо от местоположения? Может какой виджет у adobe muse есть?


 

 

  • 0



Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
DeHuC_64 DeHuC_64 1-й за Июнь
Очков активности: 33 0 тем, 22 сообщения, 1 балл репутации
Сайт: russiangreat.ru
ТОП самых активных за этот месяц
  • Фотография BLIK
    #1

    BLIK
    Очков активности: 33 0 тем, 11 сообщений, 2 балла репутации

  • Фотография DeHuC_64
    #2

    DeHuC_64 (russiangreat.ru)
    Очков активности: 22.5 Вне конкурса за определение пользователя месяца

  • Фотография BuxarNET
    #3

    BuxarNET
    Очков активности: 18 1 тема, 9 сообщений, 1 балл репутации

  • Фотография HITMAN84
    #4

    HITMAN84
    Очков активности: 16.5 2 темы, 5 сообщений, 1 балл репутации

  • Фотография vetalbon
    #5

    vetalbon
    Очков активности: 10.5 0 тем, 7 сообщений, 1 балл репутации

  • Фотография Teves
    #6

    Teves
    Очков активности: 7.5 0 тем, 5 сообщений, 1 балл репутации

  • Фотография Constantine
    #7

    Constantine (constantinablog.ru)
    Очков активности: 6 1 тема, 1 сообщение, 1 балл репутации

  • Фотография Silver
    #8

    Silver
    Очков активности: 6 0 тем, 4 сообщения, 1 балл репутации

  • Фотография miketomlin
    #9

    miketomlin
    Очков активности: 6 0 тем, 4 сообщения, 1 балл репутации

  • Фотография imvaisov
    #10

    imvaisov
    Очков активности: 4.5 1 тема, 0 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Поддержите форум! =)
Топ 5 участников по репутации

Оформление форума – IPBSkins.ru