创建响应式汉堡菜单

时间：2021-07-22 12:49:46

标签： html css responsive hamburger-menu

我在我的网站上取得了很大进展，但问题是我的汉堡菜单没有显示，请问有人知道是什么原因造成的吗？ 我尝试了不同的东西，调试等等，但我不能让它再次出现-_- 所以如果有人知道为什么，并有解释我是一个接受者我完全迷失了我知道该怎么做lol

然后，如果您对我的代码有其他建设性的批评，我当然是接受者，提前感谢您给我时间

$('.m-nav-toggle').click(function(e) {
    e.preventDefault();
    $('.m-right').toggleClass('is-open');
    $('m-nav-toggle').toggleClass('is-open');
})
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,900;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');

.menu {
    background: #757de8;
    width: 100%;
    height: 66px;
    line-height: 66px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.m-left {
    float: left;
}

.logo {
    margin: 0;
    padding: 0;
}

.m-right {
    float: right;
}

.m-links {
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0;
    margin: 0 15px;
    font-family: 'Lato', sans-serif;
    transition: all 0.3s ease-in-out;
    border-bottom: 2px solid transparent;
    padding-bottom: 3px;
}

.m-links:hover {
    border-color: #fff;
}

.m-links i {
    margin-right: 5px;
}

.m-nav-toggle {
    width: 40px;
    height: 66px;
    display: none;
    align-items: center;
    float: right;
    cursor: pointer;
}

span.m-nav-toggle-icon,
span.m-toggle-icon:before,
span.m-toggle-icon:after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background: #fff;
    position: relative;
    transition: all 0.3s ease-in-out;
}

span.m-toggle-icon:before {
    top: 12px;
}

span.m-toggle-icon:after {
    top: -14px;
}

.m-right.is-open {
    transform: translateX(0);
}

.m-nav-toggle.is-open span.m-toggle-icon {
    background: transparent;
}

.m-nav-toggle.is-open span.m-toggle-icon:before, .m-nav-toggle.is-open span.m-toggle-icon:after {
    transform-origin: center;
    transform: rotate(45deg);
    top: 0;
}

@media only screen and (max-width: 950px) {
    .m-right {
        position: absolute;
        top: 66px;
        right: 0;
        width: 200px;
        height: 100%;
        background: #757de8;
        transform: translateX(100%);
        transition: all 0.3s ease-in-out;
    }

    .m-links {
        display: block;
        text-align: center;
        padding: 0;
        margin: 0 20px;
        height: 55px;
    }

    .m-nav-toggle.is-open span.m-toggle-icon:before {
        transform: rotate(-45deg);
    }

    .m-nav-toggle {
        display: flex;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
        integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
        crossorigin="anonymous" 
        referrerpolicy="no-referrer"
></script>

<script src="https://kit.fontawesome.com/8b1b202200.js" crossorigin="anonymous"></script>

<header role="header">
    <nav class="menu" role="navigation">
        <div class="inner">
            <img class="fit-picture" src="img/logo.svga">
            <div class="m-left"></div>

            <div class="m-right">
                <a href="" class="m-links"><i class="fas fa-home"></i> Home</a>
                <a href="" class="m-links"><i class="fas fa-book"></i> Documentation</a>
                <a href="" class="m-links"><i class="fas fa-comments"></i> Feedback</a>
                <a href="" class="m-links"><i class="fas fa-handshake"></i> Partners</a>
                <a href="" class="m-links"><i class="fas fa-envelope"></i> Contact</a>
            </div>
            
            <div class="m-nav-toggle">
                <span class="m-toggle-icon"></span>
            </div>
        </div>
    </nav>
</header>

文件：normalize.css：

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.inner {
  width: 80%;
  margin: auto;
}

enter code here

1 个答案:

答案 0 :(得分：0)

“m-toggle-icon”类需要“width:100%”，它将被显示。这是因为它的父级有“display: flex”。

工作示例：

$('.m-nav-toggle').click(function(e) {
    e.preventDefault();
    $('.m-right').toggleClass('is-open');
    $('m-nav-toggle').toggleClass('is-open');
})
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,900;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');

.menu {
    background: #757de8;
    width: 100%;
    height: 66px;
    line-height: 66px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.m-left {
    float: left;
}

.logo {
    margin: 0;
    padding: 0;
}

.m-right {
    float: right;
}

.m-links {
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0;
    margin: 0 15px;
    font-family: 'Lato', sans-serif;
    transition: all 0.3s ease-in-out;
    border-bottom: 2px solid transparent;
    padding-bottom: 3px;
}

.m-links:hover {
    border-color: #fff;
}

.m-links i {
    margin-right: 5px;
}

.m-nav-toggle {
    width: 40px;
    height: 66px;
    display: none;
    align-items: center;
    float: right;
    cursor: pointer;
}

span.m-nav-toggle-icon,
span.m-toggle-icon:before,
span.m-toggle-icon:after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background: #fff;
    position: relative;
    transition: all 0.3s ease-in-out;
}

span.m-toggle-icon:before {
    top: 12px;
}

span.m-toggle-icon:after {
    top: -14px;
}

.m-right.is-open {
    transform: translateX(0);
}

.m-nav-toggle.is-open span.m-toggle-icon {
    background: transparent;
}

.m-nav-toggle.is-open span.m-toggle-icon:before, .m-nav-toggle.is-open span.m-toggle-icon:after {
    transform-origin: center;
    transform: rotate(45deg);
    top: 0;
}

@media only screen and (max-width: 950px) {
    .m-right {
        position: absolute;
        top: 66px;
        right: 0;
        width: 200px;
        height: 100%;
        background: #757de8;
        transform: translateX(100%);
        transition: all 0.3s ease-in-out;
    }

    .m-links {
        display: block;
        text-align: center;
        padding: 0;
        margin: 0 20px;
        height: 55px;
    }

    .m-nav-toggle.is-open span.m-toggle-icon:before {
        transform: rotate(-45deg);
    }

    .m-nav-toggle {
        display: flex;
    }
}

.m-toggle-icon { 
    width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
        integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
        crossorigin="anonymous" 
        referrerpolicy="no-referrer"
></script>

<script src="https://kit.fontawesome.com/8b1b202200.js" crossorigin="anonymous"></script>

<header role="header">
    <nav class="menu" role="navigation">
        <div class="inner">
            <img class="fit-picture" src="img/logo.svga">
            <div class="m-left"></div>

            <div class="m-right">
                <a href="" class="m-links"><i class="fas fa-home"></i> Home</a>
                <a href="" class="m-links"><i class="fas fa-book"></i> Documentation</a>
                <a href="" class="m-links"><i class="fas fa-comments"></i> Feedback</a>
                <a href="" class="m-links"><i class="fas fa-handshake"></i> Partners</a>
                <a href="" class="m-links"><i class="fas fa-envelope"></i> Contact</a>
            </div>
            
            <div class="m-nav-toggle">
                <span class="m-toggle-icon"></span>
            </div>
        </div>
    </nav>
</header>

相关问题
最新问题