jQuery編”ボックスを開く・たたむ

アニメーション機能のjQuery

MENU
  1. HOME
  2. アニメーション

メニュータブをクリック！アニメーションしながら開くよ

まずは開いた状態をHTML・CSSで作成後、さらにCSSでボックスが畳まれた状態にしておく！
そこからjQueryでプログラムを書きます。

CSSのソースコード

 #boxmenu {
  margin: 0 auto 0 auto;
  display: none;
  max-width: 960px;
}

#boxmenu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#boxmenu li {
  padding: 8px 0 8px 15px;
  border-bottom: 1px solid #ffffff;
}

.header-contents {
  position: relative;
}

#box_btn {
  position: absolute;
  top: 40px;
  right: 5px;
  border-radius: 20px;
  padding: 6px 20px 6px 20px;
  background-color: #fff;
  cursor: pointer;
}

JavaScriptのソースコードと概要

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
  $(document).ready(function () {
    $("#box_btn").on("click", function () {
      $("#boxmenu").slideToggle();
    });
  });
</script>

クリックイベント設定

$("#box_btn").on("click", function () {
クリックイベント発生後に実行されるファンクションに、今回のアニメーションを書く

$("#boxmenu").slideToggle();
slideToggleはjQueryのメソッドで、取得している要素のボックスが閉じているときは開き、開いているときは閉じます。その際に縦方向にアニメーションします。

$()で取得した要素.slideToggle(スピード)


javaScriptが搭載されていないブラウザやjavaScriptをオフにしていると非表示コンテンツを閲覧させる術がなくなります。
対処法としてnoscriptで囲んでjavaScriptが動作しない環境では表示された状態にしておき、どんな環境でも閲覧できるようにしておきます。このことを『アクセシビリティ』といいます。
display: none;　⇒　display: block;へ