A11y navigation — toc & map

dabblet.css

/**
 * A11y navigation — toc & map
 */

.menu {
  background: #333;
}
.menu li {
  position: relative;
}
.menu, .menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu .closer {
  display: none;
}
.menu a {
  color: #DDD;
  display: block;
  padding: .5em 1em;
  text-decoration: none;
  text-shadow: 0 -1px #000;
}
.menu li,
.menu .title,
.menu .menu {
  display: -moz-inline-box; display: inline-block; *display: inline; *zoom: 1;
}
.toc .menu {
  display: none;
}
.toc li {
  display: block;
}
.toc:hover .menu {
  display: block;
  position: absolute;
}

@media (max-width: 960px) {
  .menu li,
  .menu .title,
  .map .menu {
    display: block;
  }
  .toc:hover .menu {
    position: static;
    display: none;
  }
  
  .menu .menu {
    border-bottom: 1px solid #000;
    display: none;
  }
  
  /* Links */
  .menu .title {
    border-bottom: 1px solid #000;
    text-align: center;
  }
  .menu .closer .title {
    background: #222;
    text-shadow: 0 1px #666;
  }
  
  /* Targeted */
  .menu li:target > .menu {
    display: block;
  }
  .menu li:target ~ .closer {
    display: block;
  }
}

dabblet.html

      <!-- !Primary navigation -->
      <nav role="navigation">
        <ul class="menu">
          
          <!-- Table of content -->
          <li id="toc" class="toc">
            <a href="#toc" class="title" tabindex="1">Table of content</a>
            <ul class="menu">
              <li><a href="#grids">Grids</a></li>
              <li><a href="#tabs">Tabs</a></li>
              <li><a href="#buttons">Buttons</a></li>
              <li><a href="#messages">Messages</a></li>
            </ul>
          </li>
          
          <!-- Site map -->
          <li id="map" class="map">
            <a href="#map" class="title">Navigation</a>
            <ul class="menu">
              <li><a href="#">Home</a></li>
              <li><a href="#">Some section</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </li>
          
          <li class="closer"><a href="#" class="title" aria-hidden="true">▴</a>
        </ul>
      </nav>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}