職場のサイトのリニューアル、レスポンシブ対応してないんだよな……めんどくさいー
(別のやつは対応してると思ったらあいぽんはいいんだけどあんどろさんで崩れる ていうか、画面縦幅の都合で崩れる 素直に一画面設定せずにやった方がいいのか)
で、とある部分のインターフェース的な感じで「スワイプしたらメニューがスライドして出てくる」というものを実装したくなってなんかいいサンプルないかggったんですよ。
前に布団の中で探した時にサクッと見つかった気がしたけどブクマもなんもなくて夢だったかーとがくり。
なんかすぐに見つかるJavaScriptはなんかうまく動かないし動いたと思ったらめっちゃ表示やばいしでボツ、他に見かけたスクリプト入れても思った動作じゃなくでやっぱ無理かー、と諦めてふて寝。
翌日、ちょっと考えてたらビビッと閃いた！
そういえばレスポンシブ対応するのに使ったハンバーガーメニューの改造ができないかと。
というのも、導入したハンバーガーメニューは「チェックボックスにチェックが入るとメニュー展開」という仕様だったんですよ。
なら、JavaScriptでスワイプ認識させてチェック入れたら良くね？ と。
いやー、閃いてそれを実装できるわたしの実力はすごい。
しかもJavaScriptとCSSの連携！ 簡単に実装できるのにどうして解説サイトがないのだ。
これ需要あると思うんだけどなー
構造としてはJavaScriptでスワイプを判定、スワイプされたらハンバーガーメニューのチェックボックスにチェックを入れる→メニューが開く という感じです。
このとき、ハンバーガーメニューのボタンは横幅を広く取ってスワイプエリアに。
配置はposition:fixed;で画面内固定しておくといいかなー
で、ここで注意したいのは「スワイプ判定でチェックボックスにチェックを入れた最、判定に使われた変数をリセットする」こと。
これやらないとタップでもメニューが開く場所が出てきます(スワイプ判定はX軸の移動距離を変数に代入することで行われる)
次に、「画面内タップでチェックボックスをオフにする」ことも忘れたらメニューが閉じなくなります。
あと、「画面内タップのチェックボックスオフ」を組み込んでもそのままだとメニューをタップしてもランク判定の前にメニューが閉じるのでメニューエリアではタップしてもチェックボックスをオフにしない処理も必要。
まぁ、タップしたX軸の位置がメニューの右だったらというif式噛ませれば問題なし。
メニューの縦が狭いとかで下も、というのであればY軸も判定させるといいかなー。
とまぁざっくり説明すると簡単なんだよ。
スワイプ判定とかハンバーガーメニューは普通に解説してるとこ多いからニコイチしてしまいましょう。
なんというか、今回の成功は一瞬の閃きだよ。
理論上可能だと感じたなら実証すればいい。
そして、今回のわたしはそれができた。
実力は付いているのだと考えても良いかも知れん。
頑張ったでまじで。
スワイプでメニュー表示ができた直後はやっぱ変な挙動もいっぱいしたし。
その原因に気づけたのも閃きと言いたいけどこれは経験も多少はモノを言ってるかもしれんな。
でも検証は楽しかったのだよ。
やっぱり考えるの楽しいかも。
確かに思うように動かない時はムギー！ とかなるけど動いた時の達成感はすごい。
わたしはまだ簡単な改造程度のことしかできないけどそれでも楽しいのよ。ほんと。
やっぱわたしは作る系なのかなぁ。
ま、そんな感じで実際どうなってるのかは公開してからのお楽しみかなー
それまでにちゃんとあんどろさんでも表示されることを確認というか、構築しなければ…………
