架空創造地図描画日記2023[No.7825]
スイッチの切り替えでナビゲーションメニューの表示と非表示を切り替えるわけだが、ここではラベルと同じ階層にメニューを組み込まなければならない。それはlabelタグの中にメニューを入れろという意味ではない。navとかdivとかで一つの大きなブロックを用意して、その中にラベルとメニューを両方入れろということである。それに気を付ければ、ハンバーガーの三本線と×の切り替えと同じ術式で、メニュー表示の画面位置を定めればよい。
ところで、画面外表示における横スクロールバーの問題はどうなった?スクロールマップでは、はみ出した領域はoverflow:hiddenを唱えて隠している。だけど今回のメニューのように単純な構造ならば、もっと簡単な方法が見つかった。横スクロールバーはメニューを画面の右側へ出すと憎らしくも出てしまうのだが、何と画面の左側へ出すとバーは出ないではないか…。てことは、位置座標がマイナスの値を取る場合は出ないということなのか!?
メニュー表示は画面の右端にしているので、右側の画面外から出し入れすると、かなり遠くからのスクロール演出にはなる。色々突っ込みどころはあるだろうが、これで何とか未解決事項はすべて解決したのであった。これにて正式にアップロードして、TOPページにはハンバーガーとナビゲーションが追加された。そして見れば分かるように、TOP画面には工事中の領域が存在する。ここには新たにスライダーを設置する予定である。
ところで、画面外表示における横スクロールバーの問題はどうなった?スクロールマップでは、はみ出した領域はoverflow:hiddenを唱えて隠している。だけど今回のメニューのように単純な構造ならば、もっと簡単な方法が見つかった。横スクロールバーはメニューを画面の右側へ出すと憎らしくも出てしまうのだが、何と画面の左側へ出すとバーは出ないではないか…。てことは、位置座標がマイナスの値を取る場合は出ないということなのか!?
メニュー表示は画面の右端にしているので、右側の画面外から出し入れすると、かなり遠くからのスクロール演出にはなる。色々突っ込みどころはあるだろうが、これで何とか未解決事項はすべて解決したのであった。これにて正式にアップロードして、TOPページにはハンバーガーとナビゲーションが追加された。そして見れば分かるように、TOP画面には工事中の領域が存在する。ここには新たにスライダーを設置する予定である。