Question

我有一个汉堡包图标设置为“display：none;”当我在页面上达到一定宽度时，我希望它再次出现。我该怎么做？

////＆lt; - HTML - ＆gt; \\\\

    <section class="topMenu container row u-full-width">
    <section class="twelve columns center">
        <header>
            <ul class="topMenuList">
                <li><a href="index.html">Home</a></li>
                <li><a href="#MCSA">MCSA</a></li>
                <li><a href="#MCSE">MCSE</a></li>
                <li><a href="#MTA">MTA</a></li>
                <li><a href="#SQL">SQL</a></li>
                <li><a href="#Programming">Programming</a></li>
                <li><a href="#Office">Office</a></li>
                <li><a href="#DesktopSupport">Desktop Support</a></li>
                <li><a href="#Server">Server</a></li>
                <li><a href="#Classroom">Classroom</a></li>
                <li><a href="#FreeBrochure">Free e-Brochure</a></li>
                <li><a href="contact.html">FREEPHONE: 0800 677 1232</a></li>
            </ul>
            <a href="#"><div class="hamburger"></div></a>
        </header>
    </section>
</section>

////＆lt; - CSS - ＆gt; \\\\

 .hamburger {
    display: none;
    content: url('../images/iconHamburger.png');
}


    @media only screen and (max-width: 850px) {
    header ul li a{
        display: none;
    }

.hamburger {
    content: url('../images/iconHamburger.png');
}

我正在尝试创建一个响应式菜单，当屏幕显示一定大小时，菜单将消失，并被一个图标替换，该图标将放下菜单。

Answer 1

.hamburger {
    display: none;
    content: url('../images/iconHamburger.png');
}


    @media only screen and (max-width: 850px) {
    header ul li a{
        display: none;
    }


.hamburger {
    content: url('../images/iconHamburger.png');
    display: block;
  }
}

Answer 2

将display：block添加到你的hambuger类

@media only screen and (max-width: 850px) {
    header ul li a {
        display: none;
    }
    .hamburger {
        display: block;
}
}

当屏幕达到一定宽度（像素）时显示图像

2 个答案: