toggleを使ってメニューをつくってみよう

昔からよくtoggleのをつかってサイドメニューやスマホメニュー等々を作成してきましたが
なんだか必要に迫られるたびにちょろっと調べてつくっているような気がしたので
今回は自分用の備忘録として残しておこうと思います。

ちなみに今回実装した要件としては下記。

・右側のプラスボタンを押すとサブメニューが表示
・タイトル部分をおすとページ内のアンカーリンクとして飛ぶ
・ほかのメニューが開いたら、もともと開いていたメニューは閉じる

ではさっそくデモとコードです。

See the Pen toggle_part1 by sayuri (@giraffeweb) on CodePen.light

<dl>
  <dt class="bold flexbox fw">
    <p><a href="#guide01">メニュー01</a></p>
    <span></span>
    </dt>
  <dd>
    <ul>
      <li><a href="#guide02">サブメニュー01</a></li>
      <li><a href="#guide02">サブメニュー02</a></li>
      <li><a href="#guide02">サブメニュー03</a></li>
    </ul>
  </dd>
  <dt class="bold flexbox fw">
    <p><a href="#guide01">メニュー02</a></p>
    <span></span>
    </dt>
  <dd>
    <ul>
      <li><a href="#guide02">サブメニュー01</a></li>
      <li><a href="#guide02">サブメニュー02</a></li>
      <li><a href="#guide02">サブメニュー03</a></li>
    </ul>
  </dd>
</dl>

a {
  text-decoration: none;
  color: #222;
  font-size: 14px;
  font-weight: bold;
}

.flexbox {
  display: flex;
  flex-wrap: wrap;
}

ul {
  padding: 0;
  li {
    list-style: none;
  }
}


dl {
  width: 280px;
	padding: 1em;
	background-color: #f4f4f4;
  dt {
    font-size: 1em;
    padding: 6px 0;
    border-bottom: 1px solid #ddd;
    i {
      margin-right: 5px;
    }
    &:hover {
      cursor: pointer;
    }
    &.flexbox {
      p {
        display: block;
        flex: 8;
        margin: 0;
      }
      span {
        flex: 1;
        display: block;
        position: relative;
        text-align: center;
        height: 25px;
        &:before {
          display: block;
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
          width: 15px;
          height: 1px;
          background-color: #40180A;
          transition: .2s;
          transform: rotate(90deg);
          -webkit-transform: rotate(90deg);
        }
        &:after {
          display: block;
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
          width: 15px;
          height: 1px;
          background-color: #40180A;
          transition: .3s;
        }
        &.on {
          &:before {
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
          }
          &:after {
            background-color: transparent;
          }
        }
      }
    }
  }
  dd {
    margin: 0;
    a {
      font-size: .8em;
      padding: 5px 5px 5px 20px;
      display: block;
      position: relative;
      &:before {
        content: "";
        position: absolute;
        left: 4px;
        top: 8px;
        font-size: .6em;
        font-family: "Font Awesome 5 Free";
        content: "\f054";
        font-weight: 900;
      }
    }
  }
}

$(function () {
    $('dl dd').hide();
    $('dl span').click(function () {
        $(this).parent().next().slideToggle();
        $(this).toggleClass("on");
        $('dl span').not($(this)).parent().next().slideUp();
        $('dl span').not(this).removeClass('on');
    });
});

プラスボタンが嫌な方はCSSのspan部分を好きなものに変更してみてください。

Share: