Question

使用此移动页面：

http://mockup.comule.com/（可能包含弹出窗口！）

目前仅适用于移动方面。在移动视图中，黄色菜单＆＃39;汉堡＆＃39;图标显示。我从其他地方复制了CSS。在使用之前，单词＆＃39; Menu＆＃39;取而代之。我没有删除这个词 - 图标被替换/覆盖了它。

html标记仍会显示“＆＃39;菜单”字样。在场：

菜单

新添加的CSS：

.handle {
    background-color: #990000;
    font-size: 0;
    line-height: 0;text-align:right;
    padding: .75rem .5rem;
    display:block;
}

.handle:after {
    content: "";
    border-color: yellow;
    border-style: solid none double;
    border-width: 4px 0 12px;
    display: block;
    height: 4px;
    width: 2rem;
}

我想要的是菜单图标显示在栏的右侧和单词＆＃39;菜单＆＃39;重新出现在左边。

为了实现这一目标需要改变什么？

提前致谢。

Answer 1

左侧是“菜单”，右侧是菜单图标，请尝试以下操作：

.handle:after {
    content: "";
    border-color: yellow;
    border-style: solid none double;
    border-width: 4px 0 12px;
    display: block;
    height: 4px;
    width: 2rem;
    float: right;
    margin-top: -4px;
}


.handle {
    background-color: #990000;
    text-align: left;
    padding: .75rem .5rem;
    display: block;
    line-height: 1.5em;
    text-transform: uppercase;
    font: 90%/1.3em Arial, Helvetica, sans-serif;
    color: white;
    font-size: 1em;
}

对于右侧的“菜单”和左侧的图标，请尝试以下操作：

.handle:after {
    content: "";
    border-color: yellow;
    border-style: solid none double;
    border-width: 4px 0 12px;
    display: block;
    height: 4px;
    width: 2rem;
    float: left;
    margin-top: -4px;
}


.handle {
    background-color: #990000;
    text-align: right;
    padding: .75rem .5rem;
    display: block;
    line-height: 1.5em;
    text-transform: uppercase;
    font: 90%/1.3em Arial, Helvetica, sans-serif;
    color: white;
    font-size: 1em;
}

另外只是告知，我不确定“.handle：after”中的“margin-top：-4px”，它将是-4px或-18px，尝试一下，让我知道哪些有效。

移动菜单图标问题

1 个答案: