Question

我似乎不了解html的俄罗斯玩偶哲学，因此，我无法正确地将css应用到所需的容器中。

以下是我想同时使用的两个模板：

我的问题是结果如下：

首先一切似乎都没问题：然后我点击汉堡包打开菜单：问题是，覆盖边框的代码部分适用于<nav>并且它似乎不会影响<section>，但它会影响<header>和{{ 1}}（你无法在屏幕截图中看到后面的内容）。

以下是代码部分：

<footer>

通过这样做我得出了这个结论：并将上面的CSS添加到我的内联部分。它通过打开菜单实现了我的期望。

那么，为什么它不影响我的部分？

这是我的HTML，如果它可以证明有用：http://pastebin.com/g7Exx64f

Answer 1

编织：http://kodeweave.sourceforge.net/editor/#89d761c4072d7ae653f1a8205392074a

我浏览了你所链接的pen中的CSS，其中一些有z-index，这意味着它堆叠在你的元素之上。

另外，您的容器可能未设置为position: fixed;，因此您的内容将随您滚动。

此外，您可以在纯CSS中切换社交网络图标的显示。您需要一个具有唯一ID的input[type=checkbox]。说#callmenu。那你需要一个label[for=callmenu]。 For用于在单击时触发复选框。

假设您要切换.social的显示。要使用复选框执行此操作，请在检查之前设置.social的CSS。

.social {
  visibility: hidden;
}

然后在选中复选框时设置您想要的样子......

#callmenu:checked ~ .social {
  visibility: hidden;
}

下面的代码段是我认为您希望实现的一个简单示例。

您可以查看使用您关联的this weave和pen的font-awesome。

/* Border Menu */
#callmenu {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
}
label[for=callmenu] {
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  font-size: 2.6752em;
  margin: 0.2em 0.7488em;
  color: #666;
}
.bgoverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: .3;
  z-index: 1;
}
.icon-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  background: #3a3a3a;
  z-index: 1;
}
.icon-menu ul {
  list-style: none;
  padding: 2.576em 0;
  text-align: center;
}
.icon-menu li {
  font-size: 0;
  padding: 0;
  margin: 0;
}
.icon-menu li a {
  color: #999;
  padding: 1.12em;
  transition: all ease-in 150ms;
}
.icon-menu li a:hover {
  color: #cecece;
}

/* When menu is checked */
#callmenu:checked ~ .icon-menu li {
  font-size: 1.76em;
  margin: 0.768em 0;
}
#callmenu:checked ~ label[for=callmenu] {
  color: #d5ebe4;
}

<input type="checkbox" id="callmenu">
<div class="bgoverlay"></div>
<div class="icon-menu">
  <ul>
    <li>
      <a href="javascript:void(0)">
        Twitter
      </a>
    </li>
    <li>
      <a href="javascript:void(0)">
        G+
      </a>
    </li>
    <li>
      <a href="javascript:void(0)">
        Facebook
      </a>
    </li>
  </ul>
</div>
<label for="callmenu">
  menu
</label>

了解模板以对其进行修改

1 个答案: