Question

我希望我的网站（手机/桌面）的菜单看起来像这样：http://www.panic.lv/en/（移动时的HOME除外）桌面 - 显示链接“主页”，“工作”，“关于”和“联系人” 移动 - 没有链接，只有徽标

我跟着this instructions，但他们似乎没有完全奏效。

HTML

<div id="wrapper">
    <ul class="menu">
        <div id="home"><a href="index.html">HOME</a></div>
        <div id="works"><a href="workshome.html">WORKS</a></div>
        <div id="logo"></div>       
        <div id="about"><a href="about.html">ABOUT</a></div>
        <div id="contacts"><a href="contacts.html">CONTACTS</a></div>
    </ul>
</div>

CSS

  #wrapper {
    margin-left: 30px;
    margin-right: 30px;
    background-color: none;
    margin-top: 30px;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
}

.menu {
    width: 100%;
    height: 100%;
    background-color: none;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    padding: 0px;
}

@media screen and (min-width: 991px) {
#home {
    margin-left: 0px;
    height: 30px;
    width: 20%;
    font-family: 'Ropa Sans', sans-serif;
    color: ghostwhite;
    font-size: 15px;
    font-weight: normal;
    background-color: none;
    box-sizing: border-box;
    text-align: right;
}

#works {
    height: 30px;
    width: 20%;
    font-family: 'Ropa Sans', sans-serif;
    color: ghostwhite;
    font-size: 15px;
    background-color: none;
    box-sizing: border-box;
    text-align: center;
}


#about {
    height: 30px;
    width: 20%;
    font-family: 'Ropa Sans', sans-serif;
    color: ghostwhite;
    font-size: 15px;
    background-color: none;
    box-sizing: border-box;
    text-align: center;    
}


#contacts {
    height: 30px;
    width: 20%;
    font-family: 'Ropa Sans', sans-serif;
    color: ghostwhite;
    font-size: 15px;
    background-color: none;
    box-sizing: border-box;
    text-align: left;
    } }

Answer 1

将display: flex更改为display: none;到您现有的.menu规则，以隐藏菜单。

然后，将其添加到您的CSS文件中，将其打开到特定屏幕尺寸以上：

@media (min-width: 1000px) {
    .menu {
        display: flex;
    }
}

（尺寸，1000px，是一种填充物。取决于您是只谈论手机，还是平板电脑，或者是什么，您必须改变它）

编辑 - 上面的答案有利于隐藏整个菜单，我将其留给任何研究这个简单选项的人。以下是我从这个问题中忽略的更具体的参数。

忽略上述答案的变化。

如果您希望在对代码/其他HTML进行少量更改的情况下执行此操作，则只需将其添加到CSS中即可：

.menu div {
    display: none;
}
.menu div#logo {
    display: block; !important
}
@media (min-width: 991px) {
    .menu div {
        display: block;
    }
}

但是，我强烈建议更稳定（以后更容易编辑）的解决方案是将class="links"添加到徽标以外的每个div，然后使用以下CSS：

.menu div.links {
    display: none;
}
@media (min-width: 991px) {
    .menu div.links {
        display: block;
    }
}

Answer 2

@media screen and (max-width: 991px) {
    .menu{
        display:none;
    }
}

仅在移动设备上隐藏内容

2 个答案: