【pug】ドロップダウンメニュー用の書き方覚書

メニューを構成する変数を作っておく。

-
  var headerMenu = [
    {
      pageLink: '',
      pageName: 'ホーム'
    },
    {
      pageLink: 'about',
      pageName: '会社概要',
      childMenu: [
        {
          pageLink: 'philosophy.html',
          pageName: '企業理念'
        },
        {
          pageLink: 'message.html',
          pageName: 'トップメッセージ'
        },
        {
          pageLink: 'history.html',
          pageName: '沿革'
        }
      ]
    },
    {
      pageLink: 'recruit',
      pageName: '採用情報',
      childMenu: [
        {
          pageLink: 'message.html',
          pageName: 'メッセージ'
        },
        {
          pageLink: 'person.html',
          pageName: '社員紹介'
        },
        {
          pageLink: 'guideline.html',
          pageName: '募集要項'
        }
      ]
    },
    {
      pageLink: 'news',
      pageName: 'お知らせ'
    }
  ];

展開するためのコード

ul.list-menu
  - for (var i = 0; i < headerMenu.length; i++)
    li
      a(href=headerMenu[i]['pageLink'] + '/')
        | #{headerMenu[i]['pageName']}
      if headerMenu[i]['childMenu']!=null
        ul.list-menu__child
          - for (var j = 0; j < headerMenu[i]['childMenu'].length; j++)
            li
              a(href=headerMenu[i]['pageLink'] + '/' + headerMenu[i]['childMenu'][j]['pageLink'])
                | #{headerMenu[i]['childMenu'][j]['pageName']}

子階層は親と同じディレクトリを想定しているが、この辺は臨機応変に。

出力結果

<ul class="list-menu">
  <li><a href="/">ホーム</a>
  </li>
  <li><a href="about/">会社概要</a>
    <ul class="list-menu__child">
      <li><a href="about/philosophy.html">企業理念</a></li>
      <li><a href="about/message.html">トップメッセージ</a></li>
      <li><a href="about/history.html">沿革</a></li>
    </ul>
  </li>
  <li><a href="recruit/">採用情報</a>
    <ul class="list-menu__child">
      <li><a href="recruit/message.html">メッセージ</a></li>
      <li><a href="recruit/person.html">社員紹介</a></li>
      <li><a href="recruit/guideline.html">募集要項</a></li>
    </ul>
  </li>
  <li><a href="news/">お知らせ</a>
  </li>
</ul>

今回ドロップダウン用ということで書いたけど、PC用のメニュー・スマホ用のメニューの出し分けを行うことが多々あるので、変数で管理しておけば修正箇所が少なくて済む。