如何将响应式导航栏上的菜单图标动画化为 x 图标？

Question

我正在制作我的第一个网络应用程序，并且正在开发顶部导航栏。我将其设置为响应式，其中菜单图标仅在屏幕宽度小于 600 像素时显示。我希望一旦单击菜单图标，菜单图标就会变成 X 图标，但我不太确定如何执行此操作。

下面是我的导航栏代码。

'''

    <div class="topnav" id="myTopnav">

        <a href="#home" class="active">Home</a>

        <a href="#contact">Page2</a>

        <div class="dropdown">

            <button class="dropbtn">About

                <i class="fa fa-caret-down"></i>

            </button>

            <div class="dropdown-content">

                <a href="#">Hello</a>

        <a href="#">Salutations</a>

        <a href="#">Hi</a>

            </div>

        </div>

        <a href="javascript:void(0);" style="font-size:15px;" class="icon" 

    onclick="myFunction()">&#9776;</a>

    </div>

    <script>

        function myFunction() {

            var x = document.getElementById("myTopnav");

            if (x.className === "topnav") {

                x.className += " responsive";

            } else {

                x.className = "topnav";

            }

        }

    </script>

    </body>

    </html>

'''

谢谢你！

Answer 1

这对我有用理论CSS 提供了所有必要的动画工具。基本上发生的事情是这样的：顶线和底线必须旋转以形成 X中线必须消失X 将比汉堡包线更高、更窄，因此：顶线和中线必须垂直向右移出以保持其中心应用/* Define the shape and color of the hamburger lines */.navbar-toggler span {&nbsp; &nbsp; display: block;&nbsp; &nbsp; background-color: #4f4f4f;&nbsp; &nbsp; height: 3px;&nbsp; &nbsp; width: 25px;&nbsp; &nbsp; margin-top: 5px;&nbsp; &nbsp; margin-bottom: 5px;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; transition: all 0.35s ease-out;&nbsp; &nbsp; transform-origin: center left;}/* top line needs a little padding */.navbar-toggler span:nth-child(1) {&nbsp; &nbsp; margin-top: 0.3em;}/**&nbsp;* Animate collapse into X.&nbsp;*//* top line rotates 45 degrees clockwise and moves up and in a bit to close the center of the X in the center of the button */.navbar-toggler:not(.collapsed) span:nth-child(1) {&nbsp; &nbsp; transform: translate(15%, -33%) rotate(45deg);}/* center line goes transparent */.navbar-toggler:not(.collapsed) span:nth-child(2) {&nbsp; &nbsp; opacity: 0;}/* bottom line rotates 45 degrees counter clockwise, in, and down a bit to close the center of the X in the center of the button&nbsp; */.navbar-toggler:not(.collapsed) span:nth-child(3) {&nbsp; &nbsp; transform: translate(15%, 33%) rotate(-45deg) ;}/**&nbsp;* Animate collapse open into hamburger menu&nbsp;*//* top line moves back to initial position and rotates back to 0 degrees */.navbar-toggler span:nth-child(1) {&nbsp; &nbsp; transform: translate(0%, 0%) rotate(0deg) ;}/* middle line goes back to regular color and opacity */.navbar-toggler span:nth-child(2) {&nbsp; &nbsp; opacity: 1;}/* bottom line goes back to initial position and rotates back to 0 degrees */.navbar-toggler span:nth-child(3) {&nbsp; &nbsp; transform: translate(0%, 0%) rotate(0deg) ;}<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/><!-- Bootstrap Navigation --><nav class="navbar bg-light">&nbsp; &nbsp; &nbsp; &nbsp; <a class="navbar-toggler collapsed border-0" type="button" data-toggle="collapse" data-target="#collapsingNavbar">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span> </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span> </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span> </span>&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; <a class="navbar-brand" href="./">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Brand&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; <div class="collapse navbar-collapse" id="collapsingNavbar">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="nav navbar-nav">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href="#">About</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href="#">Contact</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </div></nav><main class="container">&nbsp; &nbsp; <h1>Content Here</h1>&nbsp; &nbsp; <p>Shrink the viewport if to expose the hamburger menu.</p></main>是什么让它发挥作用具体来说，由于顶线和底线旋转 45 度形成 X，它们的中心线占据宽度的 70%，因此它们必须移入 15%。这可以使用毕达哥拉斯定理来计算。碰巧，我们的汉堡菜单是 26x21 像素，即宽比高 24%，但是当您将线条移动到位并考虑线条高度（此处定义为 3px）时，X 最终变为 20x20 正方形）。在这个特定的实现中，我们将每条线的旋转点定义为中左。这会影响我们将线向上移动的程度，因为线的高度约为 3px，它们每条线都会向 X 的高度添加约 (2.1/2)=1.05px，或者约 X 高度的 33%。因此，33% 是它们必须垂直向外移动的距离，以便两条线在 X 的中心相交并形成 20x20px 的正方形。定制X 总是会形成一个正方形，因此要找出将它们移动多少，您只需要知道条形的宽度和高度<span>以及生成的汉堡包图标的高度。将这些数字代入这个方程：或者在代码中：const line_width = 26; // pxconst line_height = 3; // pxconst hamburger_height = 21; // pxconst x_width = x_height = 0.8 * line_width;const line_move_y_percent = 100 * (line_width - x_width) / (2 * line_height)const line_move_right_percent = 100 * (x_height - hamburger_height) / (2 * line_height)

Answer 2

简单动画菜单按钮的代码超文本标记语言<button class="menu-btn" id="menu-icon">&nbsp; <div class="btn-line"></div></button>CSS.menu-btn {&nbsp; width: 40px;&nbsp; height: 40px;&nbsp; background: none;&nbsp; border: 0;}.menu-btn,.btn-line {&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; justify-content: center;&nbsp; align-items: center;}.btn-line,.btn-line::before,.btn-line::after {&nbsp; width: 35px;&nbsp; height: 5px;&nbsp; border-radius: 4px;&nbsp; background: white;&nbsp; transition: all .5s;}.btn-line {&nbsp; position: relative;}.btn-line::before,.btn-line::after {&nbsp; position: absolute;&nbsp; content: '';&nbsp; top: -11px;}.btn-line::after {&nbsp; top: 11px;}.close > .btn-line {&nbsp; transform: rotate(225deg);&nbsp; background: red;}.close > .btn-line::before,.close > .btn-line::after {&nbsp; top: 0;&nbsp; transform: rotate(90deg);&nbsp; background: red;}JSconst btn = document.getElementById('menu-icon');btn.addEventListener('click', (e) => {&nbsp; e.target.classList.toggle('close');});