代码之家 › 专栏 › 技术社区 › user54097

滚动菜单项上的导航栏动画文本徽标

navbar tailwind-css menu text animation

user54097 · 技术社区 · 10 月前

我有一个独特的问题,我希望有人能帮忙解决。这是正在发生的事情的.gif。

正如你所看到的,当徽标设置动画时,它会左右移动菜单项,我尝试过使用导航栏开始、导航栏中心和导航栏结束来分隔它们,以防止这种情况发生,但正如你所见,我所做的一切都没有用。

我需要徽标保持动态,而不会左右移动菜单项。

我正在使用Tailwind CSS。

这是导航栏的代码:

document.getElementById('menu-toggle').addEventListener('click', function() {
    const menu = document.querySelector('.mobile-menu');
    menu.classList.toggle('active');
});

  .mobile-menu {
    transition: all 1s ease-in-out;
  }

  .mobile-links {
    color: #ffffff;
    font-size: 1.5rem;
  }

  .mobile-links:hover {
    color: #fffb00;
    font-size: 1.5rem;
  }

  .dark .mobile-links {
    color: #dbdbdb;
    font-size: 1.5rem;
  }

  .dark .mobile-links:hover {
    color: #ffdc16;
    font-size: 1.5rem;
  }

  .menulinks {
    color: #ffffff;
    font-size: 1rem;
  }

  .menulinks:hover {
    color: #fffb00;
    font-size: 1rem;
  }

  .dark .menulinks {
    color: #d4d3d3;
    font-size: 1rem;
  }

  .dark .menulinks:hover {
    color: #ff00d4;
    font-size: 1rem;

<nav class="menux glassmorphism p-4 backdrop-blur-2xl">
      <div class="container mx-auto flex flex-wrap justify-between items-center">
        <div class="navbar-start text-3xl font-bold logo-fire" aria-labelledby="Explode Logo"><h4 data-value="EXPLODE">EXPLODE</h4></div>
            <div class="navbar-center">
              <ul class="hidden md:flex md:space-x-6">
                <li><a href="#" class="text-center transition menulinks" aria-labelledby="Home">Home</a></li>
                <li><a href="#" class="text-center transition menulinks" aria-labelledby="About">About</a></li>
                <li><a href="#" class="text-center transition menulinks" aria-labelledby="Services">Services</a></li>
                <li><a href="#" class="text-center transition menulinks" aria-labelledby="Contact">Contact</a></li>
              </ul>
            </div>
        <div class="navbar-end">
              <div class="flex items-center">
                <label aria-label="Dark Mode Toggle" class="toggle-switch">
                  <input type="checkbox" id="darkModeToggle">
                  <span class="toggle-slider">
                    <span class="toggle-icons">
                      <span class="sun-icon">âï¸</span>
                      <span class="moon-icon">ð</span>
                    </span>
                  </span>
                </label>
                <button id="menu-toggle" class="md:hidden mm-icon ml-4">
                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
                  </svg>
                </button>
              </div>
          <div class="mobile-menu md:hidden mt-4">
            <ul class="space-y-2">
              <li><a href="#" class="block py-2 text-center transition mobile-links" aria-labelledby="Home">ð  Home</a></li>
              <li><a href="#" class="block py-2 text-center transition mobile-links" aria-labelledby="About">ð About</a></li>
              <li><a href="#" class="block py-2 text-center transition mobile-links" aria-labelledby="Services">ð¹ Services</a></li>
              <li><a href="#" class="block py-2 text-center transition mobile-links" aria-labelledby="Contact">ð Contact</a></li>
            </ul>
          </div>
        </div>
      </div>
    </nav>

提前感谢。

1 回复 | 直到 10 月前

Samuel Izevbizua 10 月前

尝试为具有以下内容的徽标容器设置固定宽度 aria-labelledby="Explode Logo" 。如果没有固定宽度,则自动采用动态宽度,这可能会导致旁边的其他元素调整其宽度以适应整个导航栏,从而导致布局的变化。

提供更多的CSS来触发动画并针对徽标容器会有所帮助