时间戳

首页 > 解决方案 > 如何仅使用 HTML 和 CSS 制作汉堡菜单

html - 如何仅使用 HTML 和 CSS 制作汉堡菜单

问题描述

所以我正在看这个 [youtube hamburger menu tutorial][1]，CSS 中的 ::before 和 ::after 方面不会显示额外的 2 行。这从 20 分钟开始。

这是我的工作代码：

.menu-wrap .hamburger > div {
    position: relative;
    width: 100%;
    height: 2px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

1行从此出现。现在为了得到另外两行，我写了这个：

.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: -10px;
    width: 100;
    height: 2px;
    background: inherit;
}

.menu-wrap .hamburger > div::after {
    top: 10px;
}

顶部和底部的其他 2 行不显示。这是我的 HTML：

    <input type="checkbox" class="toggler">
    <div class="hamburger"><div></div></div>
    <div class="menu">
        <div>
            <div>
                <ul>
                <li><a [routerLink]="''">Home</a></li>
                <li><a [routerLink]="'/profile'">Profile</a></li>
                <li><a [routerLink]="'/stlcoffee'">StL Coffee</a></li>
                <li><a [routerLink]="'/reviews'">Reviews</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>```
 

Thank you!!

  [1]: https://www.youtube.com/watch?v=DZg6UfS5zYg&t=297s

标签： htmlcssangularhamburger-menu

解决方案

推荐阅读