html - 汉堡按钮在点击时移动

问题描述

我的汉堡按钮有问题。当我按下汉堡按钮时，它的位置会移动。我希望它在单击时保持在同一个位置。

我在 jsfiddle 上发布了我的所有代码。

const nav           = document.querySelector('nav');
const toggleButton  = document.querySelector('.menu-button');
const links         = document.querySelector('.links');

toggleButton.addEventListener('click', () => {
    nav.classList.toggle('nav--active');
    links.classList.toggle('links--active');
});

<nav>
        <a href="#">
            <img src="https://www.designfreelogoonline.com/wp-content/uploads/2017/05/000840-Infinity-logo-maker-Free-infinito-Logo-design-06.png" alt="">
        </a>
        <div class="menu-button">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </div>
        <div class="links">
            <ul class="locals">
                <li><a href="#">Home</a></li>
                <li><a href="#">Dining</a></li>
                <li><a href="#">Reservations</a></li>
                <li><a href="#">Menu</a></li>
            </ul>
            <ul class="socials">
                <li>
                    <a href="#">
                        <i class="fab fa-instagram-square"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fab fa-twitter-square"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fab fa-youtube-square"></i>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

标签： htmlcss

垂直按钮移动的原因是扩展导航栏后出现滚动条，我们可以通过强制出现滚动条来解决此问题，即使导航栏未扩展也是如此。为了解决这个问题，我们可以使用：

body 
overflow: scroll

至于水平移动，我们可以通过为菜单按钮添加一个顶部值来修复它：

top: 1.3rem

这是修复的 jsfiddle 链接：https ://jsfiddle.net/6jt4hL9v/

html - 汉堡按钮在点击时移动

问题描述

解决方案

推荐阅读