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

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

  •  0
  • user54097  · 技术社区  · 10 月前

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

    navbar issue

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

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

    我正在使用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 月前
        1
  •  1
  •   Samuel Izevbizua    10 月前

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

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