1

Требуется, чтобы при наведении мыши на каждый пункт меню буквы в нём слева направо постепенно заменялись на заглавные. А когда мышь уходит с пункта, так же постепенно заменялись строчными. Я придумал только как сделать это через массив:

<body>
  <div class="menu">
    <ul>
      <li><a id="menuone" href="https://google.com/">home</a></li>
      <li><a id="menuone1" href="https://microsoft.com/ru-ru">about</a></li>
      <li><a id="menuone2" href="https://ru.stackoverflow.com/">test</a></li>
    </ul>
    <script type="text/javascript">
      let menus = document.getElementById('menuone');

      let mass = ['home', 'Home', 'HOme', 'HOMe', 'HOME'];

      let b = 0,
        startn, startm, isMouseHover = false;

      menus.addEventListener("mouseover", function(event) {
        isMouseHover = true;
        clearInterval(startm);
        b = b + 1;
        if (b == mass.length) {
          b = 4;
        }
        event.target.textContent = mass[b];
        startn = setInterval(ssp, 1000 / 5);
      }, false);

      function ssp() {
        b = b + 1;
        if (b >= mass.length) {
          b = 4;
        }
        menus.innerHTML = mass[b];
      }
      menus.addEventListener("mouseleave", function(event) {
        isMouseHover = false;
        clearInterval(startn);
        b = b - 1;
        if (b <= 0) {
          b = 0;
          clearInterval(startm);
        }
        event.target.textContent = mass[b];
        startm = setInterval(ssm, 1000 / 5);
      }, false);

      function ssm() {
        b = b - 1;
        if (b <= 0) {
          b = 0;
        }
        menus.innerHTML = mass[b];
      }
    </script>

  </div>
</body>

Но такой способ не подходит. Как можно реализовать такое меню иначе? Заранее благодарю.

3
  • 1
    "Но такой способ не подходит." - кому не подходит и почему?
    – user176262
    27 дек 2021 в 14:28
  • Не важно кому не подходит, суть то не в этом) Мне, например, так как чтобы изменить 1 пункт меню требуется менять весь массив, слышал что есть более легкие способы реализации данного меню, поэтому и спросил у людей совета.
    – Илья
    27 дек 2021 в 14:32
  • Раз спрашиваю - значит важно.
    – user176262
    27 дек 2021 в 15:22

2 ответа 2

4

Вариант на CSS, правда в одну сторону.

let links = document.querySelectorAll('#nav a'),
    delay = 100;

[...links].map(e => {
  let split = e.innerText.split(''),
      html = '';
  split.map((e, i) => {
    html += `<span style="animation-delay: ${delay * i}ms;">${e}</span>`;
  });
  e.innerHTML = html;
});
#nav a {
  text-decoration: none;
  font-size: 20px;
}

#nav a:hover > span {
  text-transform: lowercase;
  animation: toUpper .1s linear forwards;
}

@keyframes toUpper {
  from {text-transform: lowercase;}
  to {text-transform: uppercase;}
}
<ul id="nav">
  <li><a href="#">home</a></li>
  <li><a href="#">about</a></li>
  <li><a href="#">test</a></li>
</ul>

2

.menu ul li a {
  font-size: 24pt;
}
<body>
  <div class="menu">
    <ul>
      <li><a id="menuone" href="https://google.com/">home, sweet home</a></li>
      <li><a id="menuone1" href="https://microsoft.com/ru-ru">about apples</a></li>
      <li><a id="menuone2" href="https://ru.stackoverflow.com/">the walrus and the carpenter</a></li>
    </ul>
    <script type="text/javascript">
      let menus = document.querySelectorAll('.menu ul li a');

      menus.forEach(el => el.addEventListener("mouseover", function(event) {
        clearInterval(event.target.startMore);
        clearInterval(event.target.startLess);
        event.target.startMore = setInterval(moreUpper, 1000 / 5, event.target);
      }, false));

      function moreUpper(el) {
        let text = el.textContent;
        let upper = text.toUpperCase();
        if (text == upper) {
          clearInterval(el.startMore);
          return;
        }
        text = text.split('');
        upper = upper.split('');
        for (let i = 0; i < text.length; i++) {
          if (text[i] != upper[i]) {
            text[i] = upper[i];
            el.textContent = text.join('');
            return;
          }
        }
      }

      menus.forEach(el => el.addEventListener("mouseleave", function(event) {
        clearInterval(event.target.startMore);
        clearInterval(event.target.startLess);
        event.target.startLess = setInterval(lessUpper, 1000 / 5, event.target);
      }, false));

      function lessUpper(el) {
        let text = el.textContent;
        let lower = text.toLowerCase();
        if (text == lower) {
          clearInterval(el.startLess);
          return;
        }
        text = text.split('');
        lower = lower.split('');
        for (let i = text.length - 1; i >= 0; i--) {
          if (text[i] != lower[i]) {
            text[i] = lower[i];
            el.textContent = text.join('');
            return;
          }
        }
      }
    </script>

  </div>
</body>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.