Minimal css for clickable pure CSS collapsible tree menu

by Keith Elias

HTML

<!-- 2014/05/01 9:31:11 - Minimal css for clickable pure CSS/HTML collapsible tree menu  -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lt IE 9]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
  <meta charset="utf-8">
  <link href="/statcode/menu.css" rel="stylesheet" type="text/css" />
</head>


<body>

<ol id="menutree">
  <li>

    <label class="menu_label" for="c1">Menu Gen14 Am0a1</label>
    <input type="checkbox" id="c1" />                             <!-- input must follow label for safari -->
    <ol>
      <li>
        <label for="c2" class="menu_label">Menu Am1a1</label>
        <input type="checkbox" id="c2" />
        <ol>
          <li class="page"><a href="#">Page Ap1a1</a></li>
          <li class="page"><a href="#">Page Ap1a2</a></li>
          <li class="page"><a href="#">Page Ap1a3</a></li>
        </ol>
      </li>
      <li>
        <label for="c3" class="menu_label">Menu Am1b1</label>
        <input type="checkbox" id="c3" />
        <ol>
          <li class="page"><a href="#">Page Ap1b1</a></li>

          <li>
            <label for="c4" class="menu_label">Menu Am2b1 </label>
            <input type="checkbox" id="c4" />
            <ol>
              <li class="page"><a href="#">Page Ap2b1</a></li>
            </ol></li>
        </ol></li>
    </ol></li>

  <li>
    <label class="menu_label" for="c5">Menu Bm0a1</label>
    <input type="checkbox" id="c5" />
    <ol>
      <li>
        <label for="c6" class="menu_label">Menu Bm1a1</label>
        <input type="checkbox" id="c6" />
        <ol>
          <li class="page"><a href="#">Page Bp1a1</a></li>
        </ol>
      </li>
      <li>
        <label for="c7" class="menu_label">Menu Bm1b1</label>
        <input type="checkbox" id="c7" />
        <ol>
          <li class="page"><a href="#">Page Bp1b1</a></li>
          <li>
            <label for="c8" class="menu_label">Menu...

CSS

/* Minimal css for clickable pure CSS collapsible tree menu */
/* As specific as possible to prevent interference with other code */

#menutree li {
   list-style: none;          /* all list item li dots invisible */
         }

   li .menu_label + input[type=checkbox] {
      opacity: 0;             /* checkboxes invisible and use no space */
     }                        /* display: none; is better but fails in ie8 */

    li .menu_label {
      cursor: pointer;        /* cursor changes when you mouse over this class */
    }                         /* could add the many user-select: none; commands here */

      li .menu_label + input[type=checkbox] + ol > li
         {
            display: none;         /* prevents sublists below unchecked labels from displaying */
         }

      li .menu_label + input[type=checkbox]:checked + ol > li
         {
           display: block;         /* display submenu on click */
         }