サイトマップのツリーを折り畳めるようにする

　サイトマップをツリー形式で作りましたが、ツリーの一部分を折り畳めたほうが使い勝手がいいような気がします。

　HTML5 のタグに折り畳みができる details タグがあるので、これをを使うことにしました。ツリーの表現は、css を使って ul タグのリストで表現しています。例えば、次のような HTML になります。

<ul>
  <li>サイトトップ
    <ul>
      <li><a href="/aaa.html">ご挨拶</a><li>
      <li><a href="/labo/">研究室</a>
        <ul>
          <li><a href="/labo/bbb.html">アニメ</a></li>
          <li><a href="/labo/ccc.html">ゲーム</a></li>
        </ul>
      </li>
      <li><a href="/blog/">ブログ</a>
        <ul>
          <li><a href="/blog/aaa.html">研究員A</a></li>
          <li><a href="/blog/bbb.html">研究員B</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

　次のように表示されます。

これを折り畳めるように details タグを使っていきます。

<ul>
  <li><details open><summary>サイトトップ</summary>
    <ul>
      <li><a href="/aaa.html">ご挨拶</a><li>
      <li><details open><summary><a href="/labo/">研究室</a></summary>
        <ul>
          <li><a href="/labo/bbb.html">アニメ</a></li>
          <li><a href="/labo/ccc.html">ゲーム</a></li>
        </ul>
      </details></li>
      <li><details open><summary><a href="/blog/">ブログ</a></summary>
        <ul>
          <li><a href="/blog/aaa.html">研究員A</a></li>
          <li><a href="/blog/bbb.html">研究員B</a></li>
        </ul>
      </details></li>
    </ul>
  </details></li>
</ul>

　次のように表示されます。▼をクリックすると畳まれます。

　details タグに open 属性を付けているのは、はじめに開いた状態で表示したいからです。open 属性を付けないと、初期状態は折り畳まれています。

　ちなみに、css は以下のようになります。ツリー表示したい ul タグ全体を div タグで囲み、囲んだ div タグのクラスに tree を指定します。

.tree {
	position: relative;
	margin-top: 0px;
	padding: 20px;
}
.tree ul {
	padding-left: 20px;
	list-style: none;
}
.tree ul li {
	margin-top: 0;
	position: relative;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 20px;
	box-sizing: border-box;
}
.tree ul li::before {
	position: absolute;
	top: 15px;
	left: 0px;
	width: 15px;
	height: 1px;
	margin: auto;
	content: '';
	background-color: black;
}
.tree ul li::after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0px;
	width: 1px;
	height: 100%;
	content: '';
	background-color: black;
}
.tree ul li:last-child::after {
	height: 15px;
}

web サイト

Posted by sirius