How to code a side menu in HTML/CSS framelessly while not duplicating code?

Question

I want to make a small encyclopedia with an Encarta style menu on the left side. The menu will contain 100+ entries, each of which will open their own article to the menu's right.

I am currently limited to using HTML and CSS exclusively (no PHP, no JavaScript). At the same time I do not want to use HTML frames which violate the "one URL per document" principle and break bookmarking, though if it wasn't for that, frames would indeed be the perfect solution.

Question: how can the menu be created framelessly such that its code isn't duplicated in 100+ pages?

Answer 1

Generally, I'm against writing peoples code for them, but I found this to be a unique challenge to myself, and at the same time provide one of the solutions to your question. I sincerely feel like this is a hacky way to accomplish the task, but with that in mind, take from it what you will. You will also have to do a lot more styling/validating that are beyond the questions needs.

There are a few big takeaways from this solution.

• This method doesn't give you access to URL anchors (index.html#article1). Because the core of this example is to hide the articles until needed, you can insert the anchor in the URL address bar with no results, because all articles are hidden by default. So for an encyclopedia type environment, this may not be suitable for your needs, unless that is a forgiving feature for you.
• This relies on an input (checkbox/radio) relationship, but more importantly the name attribute is a big role in how this works. This is why it feels hacky to me, but basically name it anything you want. In order for this to work, they all have to be the same name however. Name attributes are used to identify fields in form submits (input,output,select etc), all of them can have different ids when submitting forms, but same name to ensure you only get 1 value. This is the same principal in a nutshell with the radio buttons, even though are you aren't submitting anything anywhere.
• input[type="radio"]:checked+article takes advantage of selectors. It breaks down below. Note, this is arbitrary in the direction I took, it can follow many other hierarchy standards provided you use proper selectors
  • input | every input
  • [type="radio"] | which has a type attribute equal to "radio"
  • :checked | only inputs of radio type that are currently checked
  • + | selector for selecting only elements with a direct sibling (so only checked inputs that have an article directly next to it)

You can review a demo in the snippet below:

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>