html - 如何在不重复代码的情况下无框架地在 HTML/CSS 中编写侧边菜单代码？

Question

<分区>

Answer 1

一般来说，我反对为他们编写代码，但我发现这对我自己来说是一个独特的挑战，同时也为您的问题提供了一种解决方案。我真诚地觉得这是完成任务的一种 hacky 方式，但考虑到这一点，请从中获取你想要的东西。您还必须做更多超出问题需要的样式/验证。

这个解决方案有几个重要的收获。

• 此方法不允许您访问 URL anchor (index.html#article1)。因为这个例子的核心是隐藏文章直到需要，所以你可以在 URL 地址栏中插入 anchor 没有结果，因为默认情况下所有文章都是隐藏的。因此，对于百科全书类型的环境，这可能不适合您的需求，除非这对您来说是一个宽容的功能。
• 这依赖于输入(复选框/单选框)关系，但更重要的是 name 属性 在其工作方式中起着重要作用。这就是为什么我觉得它很老套，但基本上可以随意命名。但是，为了使其工作，它们都必须是相同的名称。 Name 属性 用于标识表单提交中的字段(input、output、select 等)，所有这些提交表单时可以有不同的 ID，但名称相同以确保您只获得 1 个值。简而言之，这与单选按钮的原则相同，即使您没有在任何地方提交任何内容。
• input[type="radio"]:checked+article 利用了选择器。它在下面分解。请注意，这在我选择的方向上是任意的，如果您使用适当的选择器，它可以遵循许多其他层次结构标准
  • 输入 |每一次输入
  • [type=" radio "] |它的类型属性等于“radio”
  • :选中|仅当前选中的 radio 类型的输入
  • + |用于仅选择具有直接兄弟元素的选择器(因此仅检查紧邻有文章的输入)

您可以在下面的代码片段中查看演示:

html,
body {
  height: 100%;
  margin: 0;
  background: darkgrey;
}

nav {
  display: inline-block;
  height: 100%;
  width: 20%;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.5);
}

nav ul {
  list-style: none;
  padding: 0;
  width: 100%;
  text-indent: 20px;
  color: white;
}

nav ul li {
  width: 100%;
  height: 40px;
}

nav ul li label {
  display: inline-block;
  float: left;
  color: #FFF;
  width: 100%;
  height: 100%;
  line-height: 40px;
  cursor: pointer;
}

nav ul li:hover { background: grey; }

article {
  display: none;
  position: absolute;
  height: 100%;
  width: 80%;
}

input[type="radio"] {  display: none; }

input[type="radio"]:checked+article {
  display: inline-block;
}

<nav>
  <ul>
    <li><label for="article1">1</label></li>
    <li><label for="article2">2</label></li>
    <li><label for="article3">3</label></li>
    <li><label for="article4">4</label></li>
    <li><label for="article5">5</label></li>
    <li><label for="article6">6</label></li>
    <li><label for="article7">7</label></li>
    <li><label for="article8">8</label></li>
    <li><label for="article9">9</label></li>
    <li><label for="article10">10</label></li>
    <li><label for="article11">11</label></li>
    <li><label for="article12">12</label></li>
    <li><label for="article13">13</label></li>
    <li><label for="article14">14</label></li>
    <li><label for="article15">15</label></li>
    <li><label for="article16">16</label></li>
    <li><label for="article17">17</label></li>
    <li><label for="article18">18</label></li>
    <li><label for="article19">19</label></li>
    <li><label for="article20">20</label></li>
  </ul>
</nav>
<input type="radio" name="hacky" id="article1" />
<article>
  <p>This is article 1. I am like all the other articles, but I am #1.</p>
</article>
<input type="radio" name="hacky" id="article2" />
<article>
  <p>This is article 2. I am like all the other articles, but I am #2.</p>
</article>
<input type="radio" name="hacky" id="article3" />
<article>
  <p>This is article 3. I am like all the other articles, but I am #3.</p>
</article>
<input type="radio" name="hacky" id="article4" />
<article>
  <p>This is article 4. I am like all the other articles, but I am #4.</p>
</article>
<input type="radio" name="hacky" id="article5" />
<article>
  <p>This is article 5. I am like all the other articles, but I am #5.</p>
</article>
<input type="radio" name="hacky" id="article6" />
<article>
  <p>This is article 6. I am like all the other articles, but I am #6.</p>
</article>
<input type="radio" name="hacky" id="article7" />
<article>
  <p>This is article 7. I am like all the other articles, but I am #7.</p>
</article>
<input type="radio" name="hacky" id="article8" />
<article>
  <p>This is article 8. I am like all the other articles, but I am #8.</p>
</article>
<input type="radio" name="hacky" id="article9" />
<article>
  <p>This is article 9. I am like all the other articles, but I am #9.</p>
</article>
<input type="radio" name="hacky" id="article10" />
<article>
  <p>This is article 10. I am like all the other articles, but I am #10.</p>
</article>
<input type="radio" name="hacky" id="article11" />
<article>
  <p>This is article 11. I am like all the other articles, but I am #11.</p>
</article>
<input type="radio" name="hacky" id="article12" />
<article>
  <p>This is article 12. I am like all the other articles, but I am #12.</p>
</article>
<input type="radio" name="hacky" id="article13" />
<article>
  <p>This is article 13. I am like all the other articles, but I am #13.</p>
</article>
<input type="radio" name="hacky" id="article14" />
<article>
  <p>This is article 14. I am like all the other articles, but I am #14.</p>
</article>
<input type="radio" name="hacky" id="article15" />
<article>
  <p>This is article 15. I am like all the other articles, but I am #15.</p>
</article>
<input type="radio" name="hacky" id="article16" />
<article>
  <p>This is article 16. I am like all the other articles, but I am #16.</p>
</article>
<input type="radio" name="hacky" id="article17" />
<article>
  <p>This is article 17. I am like all the other articles, but I am #17.</p>
</article>
<input type="radio" name="hacky" id="article18" />
<article>
  <p>This is article 18. I am like all the other articles, but I am #18.</p>
</article>
<input type="radio" name="hacky" id="article19" />
<article>
  <p>This is article 19. I am like all the other articles, but I am #19.</p>
</article>
<input type="radio" name="hacky" id="article20" />
<article>
  <p>This is article 20. I am like all the other articles, but I am #20.</p>
</article>