markdown menu

md-menu.html

<script>
  vm.dirs = [];
  let hs = vm.$els.article.querySelectorAll('h1, h2, h3, h4, h5, h6');
  for (var i = 0; i < hs.length; i++) {
    hs[i].setAttribute('id', 'dir-' + i);
    vm.dirs.push({
      link: '#dir-' + i,
      text: hs[i].innerText,
      cls: 'dir-' + hs[i].localName
    });
  }

</script>

<style>
  .dirs a {
    display: block;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 16px;
  }
  
  .dirs a:hover {
    background-color: #eee;
  }
  
  .dir-h1 {
    padding-left: 0px;
  }
  
  .dir-h2 {
    padding-left: 20px;
  }
  
  .dir-h3 {
    padding-left: 40px;
  }
  
  .dir-h4 {
    padding-left: 60px;
  }
  
  .dir-h5 {
    padding-left: 80px;
  }
  
  .dir-h6 {
    padding-left: 100px;
  }

</style>