サイドバーを固定しつつ閉じるボタンを実装したい

Question

###実装したいこと
Wordpressの管理画面のように、通常時は固定されているサイドメニューを、ユーザー次第で閉じることができるボタンを作りたいのですが、ピンポイントで実装方法を見つけることができませんでした。参考サイトや実装方法、アドバイスをいただきたいです。

・動きはWordpressの管理画面と同じようにしたい（もしくはグーグルアナリティクスのメニュー閉じボタン）
・数十ピクセル残して閉じたい

Comments

[miyabi_pudding]

現在書いている、HTML・CSS・JavaScriptのコードを掲示してください。
質問文は編集できます。

[crigw]

これから作るサイトに対してこの動作が実装できるかどうかの確認のため、まだコードがありません…すみません。

[miyabi_pudding]

なるほど。
では・・・、ヒントや、調べ方のみ、の回答になりますが、それでもよろしいですか？

Answer 1

Wordpressの管理画面のように、通常時は固定されているサイドメニューを、ユーザー次第で閉じることができるボタン

「状態を保存する」ことを指しているなら、サーバかlocalStorageに保存してください。

【Window.localStorage - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage

Answer 2

まずは、必要な技術を記載します。

• HTML

基本ですが、下記の実装に合わせた、DOM構成が必要になるので、記載です。

• CSS

スタイルを決めるので必須です。
場合によっては、HTML、CSSのみで実装できるでしょう。

• JavaScript

HTML、CSSだけでもできなくないですが、より高度な実装（アニメーションに工夫や、HTMLをできるだけ汚したくない場合など）をしたいのであれば、必須です。
また、jQueryを使った方が楽でしょうし、プラグインが見つかると思いますので、jQueryを使うことをお勧めします。

そして、

ピンポイントで実装方法を見つけることができませんでした

に関してです。
上記の通り、様々なプラグインやライブラリがありますが、
最終的に、自身の実装したい理想形通りのものを実装するには、
自分で一から実装するしかないです。
プラグインやライブラリを使用すると、実装自体は楽ですが、
どうしても、UIがそれによってしまいなどの、自由度が少なくなります。

では調べ方です。
javascript サイドメニュー
や
CSS サイドメニュー
とかですね。
javascriptをjQueryに置き換えてもいいでしょう。
jQuery サイドメニュー プラグイン
とかでもいけると思いますよ。

上記のキーワード（プラグインが入らない方）であれば、一から自分で実装する内容の記事も見つかると思います。

ソースコードは、丸投げ質問に対しての回答になってしまいますので、付けません。
上記の調べ方で再度調査し、自分でまずは、ソースを書いてみましょう。

Comments

[crigw]

丸投げ質問に対してここまでアドバイスくださりありがとうございました！
js, jQueryは本当にまだまだわからないことばかりですが頑張ってみます！