表示/非表示を切り替えられるサイドバーの作り方
Table of Contents
ぜひ読んでほしい方
・Webサイトで表示/非表示を切り替えられる変えられるサイドバーを実装したい方
・JSからhtml要素にクラス名を付与する方法を知りたい方
・JSからhtml要素のスタイルを変更する方法を知りたい方
ソースコード
先にソースコードを全て提示してから、コードの解説をしていこうと思います。
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <div id="sidebar" class="sidebar opened"> <section>メニュー</section> <ul> <li>hogehoge</li> <li>fugafuga</li> </ul> <button id="close" class="close"><span class="button_text">→close</span></button> <button id="open" class="open" style="display: none;"><span class="button_text">←open</span></button> </div> </body> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
body{ overflow-x: hidden; } .sidebar{ position: absolute; top: 30px; padding: 10px 10px 30px 10px; box-shadow: -2px 0 3px 2px gray; width: 20%; height: 50vh; } .sidebar.closed{ left: 100%; box-shadow: none; } .sidebar.opened{ right: 0%; } .close, .open{ position: absolute; top: 100px; right: 100%; width: 30px; height: 160px; font-size: 20px; background-color: white; border: none; box-shadow: -2px 0 2px 2px gray; outline: none; } .button_text{ writing-mode: vertical-lr; /* 文字縦書きに */ text-orientation: upright; /* 縦書きの文字を正立*/ } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
const sidebar = document.getElementById('sidebar'); const close = document.getElementById('close'); const open = document.getElementById('open'); //サイドバー非表示 const closeSidebar = () =>{ sidebar.classList.add('closed'); //クラス名closedを付与 sidebar.classList.remove('opened'); //クラス名openedを削除 close.style.display = 'none'; //closeボタンを非表示 open.style.display = 'block' //openedボタンを表示 } //サイドバー表示 const openSidebar = () =>{ sidebar.classList.add('opened'); sidebar.classList.remove('closed'); open.style.display = 'none'; close.style.display = 'block'; } close.addEventListener('click', closeSidebar); open.addEventListener('click', openSidebar); |
コードをイチから見ていく前に、JSコード中に含まれる大切な構文を二つピックアップして挙げておきます。
・要素.classList.add(‘クラス名’) ・・・ 指定した要素にクラス名を追加する （JSコード7行目）
・要素.style.プロパティ名 ＝ ‘値’ ・・・ 指定した要素にCSSスタイルを追加する （JSコード9行目）
コード解説
はじめにhtmlコードについて説明します。
2行目のクラス名にopenedとありますが、デフォルトではサイドバーが表示された状態で実装します。なお、表示されている状態ではopened, 非表示の状態ではclosedという形で、JSファイルからクラス名を変えるようなプログラムを組んでいきます。
また、9行目のbutton要素のstyle属性にdisplay: none;が指定されています。8,9行目はそれぞれ表示/非表示を切り替えるためのボタンですが、先ほど言ったようにデフォルトでサイドバーは開いた状態ですので、9行目の開くボタンは必要ありません。非表示に切り替えた際には、JSで開くボタンを表示して代わりに閉じるボタンを非表示にします。（詳細は後述）
次にCSSコードの14,15行目のところで、closed{left: 100%}という記述があるかと思いますが、closedつまり非表示の状態ではブラウザの表示領域の右の外側にサイドバーを追いやっていてフロントから見えないようにしています。なお、2行目のところで、overflow-x: hidden; を指定しているのはこのためです。そして20行目のところでは、opened{right: 0%}という記述をしていますが、今度は表示されている状態においてはブラウザ領域内の右端にサイドバーを表示してくださいと指示しています。
ここまでがページを開いた直後のデフォルトの状態です。
そしてここからは、JSで表示/非表示を切り替えるコードの説明になります。
JSコード6行目以降の、closeSidebar関数はサイドバーを非表示にする関数ですが、この中身を見ていきましょう。
7行目では、始めの方で説明した「要素.classList.add(‘closed’)」でid=”sidebar”の要素にclosedを付与して、8行目で代わりにクラス名openedを消しています。そして、9行目では非表示ボタン(id=”close”)を非表示にして、10行目で代わりにデフォルトで非表示にしていた表示ボタン(id=”opened”)を表示しています。14行目からの、サイドバーを表示にする関数openSidebarではcloseSidebar関数の真逆の操作をしているだけです。
