HTML手打ちサイトにスマホ用スライドメニューをつける

近年、私がHTML手打ちサイトを作るときに一番欲しかったもの。それは、スマホで横からにゅっと出てくるメニューです。

このサイトは、そのメニューを実現するコードを置いてあるだけのサイトです。
ChatGPTに質問を繰り返し、コードを作りました。動作確認はしておりますが、私自身はCSSやJavaScriptに詳しくないので不正確な記述があるかもしれません。どうかご容赦ください。

スマホで見ている方はサンプルで確認できます。PCはブラウザ幅を狭くしてみると確認できると思います。横幅768pxで切り替わります。

スライドメニューサンプル

CSSはメニュー部分の動作に関する部分だけ、HTMLもメニュー部分以外は最低限の記述です。
いっさいの装飾を施していないことをご承知おきください。

※すでに運用しているサイトに適用される場合は、かならずサイトのバックアップをして、復元可能な状態にしてからテストしてください。サイトが消えたり壊れたりした場合でも当方では責任を負えません。

関連サイト