JS Collapse　サイドメニューの開閉について

前提

こちらを参考しに、開閉するサイドメニューを作っています。
※IE11対応にする必要あり。

発生している問題・実現したいこと

参考にしているサイトでは、開くボタンはナビの外<div id="main">内にあり、デフォルトではメニューが閉じていて完全に見えない状態です。

######実現したいこと
・初期状態でメニューを開いておきたい
・開閉時で開閉のボタンを出し分けたい（例：開いてる時は閉じるボタンのみを表示）
・メニューを閉じた時に50pxほど残した状態にして、開くボタンのみを上の方に表示したい。

######問題
・初期状態でメニューを開いておきたいが、CSSで250pxと設定すると<div id="main">の要素に被ってしまう。
・ボタンの出し訳がわからない

該当のソースコード

HTML
1<div id="mySidebar" class="sidebar">
2  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
3  <button class="openbtn" onclick="openNav()">☰ Open Sidebar</button>  
4  <a href="#">About</a>
5  <a href="#">Services</a>
6  <a href="#">Clients</a>
7  <a href="#">Contact</a>
8</div>
9
10<div id="main">
11  <h2>Collapsed Sidebar</h2>
12  <p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
13</div>

JS
1function openNav() {
2  document.getElementById("mySidebar").style.width = "250px";
3  document.getElementById("main").style.marginLeft = "250px";
4}
5function closeNav() {
6  document.getElementById("mySidebar").style.width = "50px";
7  document.getElementById("main").style.marginLeft= "50px";
8}

css
1.sidebar {
2  height: 100%;
3  width: 250px;
4  position: fixed;
5  z-index: 1;
6  top: 0;
7  left: 0;
8  background-color: #111;
9  overflow-x: hidden;
10  transition: 0.5s;
11  padding-top: 60px;
12}
13.sidebar a {
14  padding: 8px 8px 8px 32px;
15  text-decoration: none;
16  font-size: 25px;
17  color: #818181;
18  display: block;
19  transition: 0.3s;
20}
21.sidebar a:hover {
22  color: #f1f1f1;
23}
24.sidebar .closebtn {
25  position: absolute;
26  top: 0;
27  right: 25px;
28  font-size: 36px;
29  margin-left: 50px;
30}
31.openbtn {
32  font-size: 20px;
33  cursor: pointer;
34  background-color: #111;
35  color: white;
36  padding: 10px 15px;
37  border: none;
38}
39.openbtn:hover {
40  background-color: #444;
41}
42#main {
43  transition: margin-left .5s;
44  padding: 16px;
45}
46/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
47@media screen and (max-height: 450px) {
48  .sidebar {padding-top: 15px;}
49  .sidebar a {font-size: 18px;}
50}

行動規範の内容に同意します

回答2件

ベストアンサー

スクリプトを見ればわかるように #main の margin-left も必要です。
ただ、ここまで CSS でしているならスクリプトでは class の付け替えくらいにしたほうがわかりやすいかもしれません。

以下、一例。

HTML
1<div id="mySidebar" class="sidebar">
2  <button type="button" class="openbtn"></button>
3  <a href="#">About</a>

JavaScript
1document.querySelector('.sidebar .openbtn').addEventListener('click', function(event) {
2  document.querySelector('.sidebar').classList.toggle('expanded');
3}, false);

CSS
1.sidebar {
2  width: 250px;
3}
4
5.sidebar .openbtn::before {
6  content: '×';
7}
8
9.sidebar + #main {
10  margin-left: 250px;
11}
12
13.sidebar.expanded {
14  width: 50px;
15}
16
17.sidebar.expanded .openbtn::before {
18  content: '☰';
19}
20
21.sidebar.expanded + #main {
22  margin-left: 50px;
23}

https://developer.mozilla.org/ja/docs/Web/API/Element/classList

投稿2020/01/23 05:41

x_x

総合スコア13749

crigw

2020/01/23 05:52

理想通りの動きになりました！ありがとうございます。ちなみに閉じた時にボタン以外のメニュー内容を非表示にしたいのですがその場合は、メニュー部分をdiv等で囲って、閉じた時にクラス名を付与することは可能でしょうか？

crigw

2020/01/23 05:54

あともう一点、理解が浅く申し訳ないのですがいただいた記述はJavaScriptでjQueryとは別…ですよね？これをjQuery記述にしていただくことも可能でしょうか？

x_x

2020/01/23 05:58

この例では expanded をつけているので、以下で消えます。 .sidebar.expanded a { display: none; } IE11 で動くように書いたのですが、jQuery にする必要ありますかね？

crigw

2020/01/23 06:02

その手も考えたのですが、最近社内にて基本的にスタイル記述の時はクラス名単独で書くようにというルールに変わりまして…ただやむおえない時は複数書いてもいいということだったので、もしクラス名付与が難しい際にはその手でいきます！なるほど、ご配慮ありがとうございます！単純にjQueryの方がまだ見慣れていて記述内容で何をしているのかまだわかるか…な？といったぐらいの希望で、特にどうしても必要というわけではありません。

Lhankor_Mhy

2020/01/23 06:59

> クラス名単独で書くようにというルール質問のコードに .sidebar a{ .sidebar a:hover{ .sidebar .closebtn { などのセレクタがありますが、大丈夫ですか？というか、それは詳細度を考慮したルールだと思いますが、そうすると、 #main { なんかはド直球でNGだと思いますです。

crigw

2020/01/23 07:18

現状のCSSに関しましては、参考元のままですので後ほど適宜変えていく予定です。その際に単独になるように変えていきます…仰られる通り、ID#はNGですので変えないとです；；

Lhankor_Mhy

2020/01/23 07:20

なるほど、釈迦に説法でした。失礼いたしました。

行動規範の内容に同意します