Question

在移动设备上打开菜单后，我一直有问题让我的汉堡包导航图标转换为完美的X.我确定这是一个简单的解决方案。我还没有能够弄明白。有没有更好的方法来构建移动导航？我应该使用vanilla JS而不是Jquery吗？

$(window).ready(function(){
    $('.menu-toggle').click(function(){
        //console.log(2);
        $('.main-nav').toggleClass('main-nav-open',500);
        $(this).toggleClass('open');
    });
});

*{
    margin: 0;
    padding: 0;
}

body {
    background: #f0f8ea;
    font-family: 'QuickSand',sans-serif;
}

.wrapper {
    width: 95%;
    max-width: 1000px;
    margin: 0 auto;
}

header {
    background: #e54b4b;
    color: #ebebd3;
    position: relative;
    padding: 1em 0;
}

header:after {
    content: "";
    clear: both;
    display: block;
}

.logo {
    float: left;
    font-size: 1rem;
    margin: 0;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
}

.logo span {
    font-weight: 400;
}

.main-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: #464655;
    height: 0;
    overflow: hidden;
}

.main-nav-open {
    height: auto;
}

.main-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav li {
    border-bottom: 1px solid #575766;
}

.main-nav li:last-child {
    border-bottom: none;
} 


.main-nav a {
    color: white;
    display: block;
    padding: 1em 1em;
    text-decoration: none;
    text-transform: uppercase;
}

.main-nav a:hover,
.main-nav a:focus{
    background: #e4b363;
    color: #464655; 
}


.menu-toggle {
    padding: 1em;
    position: absolute;
    top: 0.5em;
    right: 0.2em;
    cursor: pointer;
}

.hamburger,
.hamburger:before,
.hamburger:after{
    content: "";
    display: block;
    background: #ebebd3;
    height: 3px;
    width: 1.75em;
    transition: all ease-in-out 500ms;
}

.hamburger:before {
    transform: translateY(-6px);
}

.hamburger:after {
    transform: translateY(3px);
}

.open .hamburger {
    transform: rotate(45deg) ;
}

.open .hamburger:before {
    opacity: 0;
}

.open .hamburger:after {
    transform: rotate(90deg) translateY(3px);
}

@media only screen and (min-width: 700px){
    .menu-toggle {
        display: none;
    }

    .main-nav {
        height: auto;
        position: relative;
        background: transparent;
        float: right;
    }

    .main-nav li {
        display: inline-block;
        border: none;
    }

    .main-nav a {
        padding: 0;
        margin-left: 2em;
    }

    .main-nav a:hover,.main-nav a:focus {
        background: transparent;
    }

}

<html>
    <head>...</head>
    <body>    
        <header>
            <div class="wrapper">
                <h1 class="logo">Shade<span>Setters</span></h1>
                <nav class="main-nav">
                    <ul>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Testimonials</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </nav>

                <div class="menu-toggle">
                    <div class="hamburger"></div>
                </div>

            </div>
        </header>





        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    </body>
</html>

Answer 1

这应该以你的X：

为中心

.open .hamburger:after {
    transform: rotate(90deg) translateY(1px) translateX(-2px);
}

如何让我的汉堡包导航图标正确转换？

1 个答案: