さて進めますか!

ちょっと想定していた予定と違うムーブがComeしすぎて、MeはDoesn't workでしたよ。

 

改めて実装実装。

 

前回途中までしていたのは、アコーディオンメニューを作っていたところだった。

途中までの記事も消えているので、改めて。

 

codecanyon.net

 

色々と調べたけど、俺はこれを4ドルで購入。

実装を進めていこう。

 

そうだった、プラスボタンを押すと、展開するのはOKなんだけど、そのメニューを再度クリックすると、ページのトップページに飛んでしまうのだった。

 

ダミーリンクを動作しないようにしたい。

qiita.com

 

これきた!

<a href="javascript:void(0);">リンク文字列</a>

 

で、Menuの開閉が問題なくされた。

あとは、メニューを展開した状態にするには、どうしたらよいかはDocumentに記載されていると思うので、チェックしよう。

 

く・・・コメントを読むと、有料サポートだと。。

2ドル程度ではあるのだが、なんだか悔しい。

 

開いている状態を、F12の開発モードで開く。

a.submenu-indicator-minus href="javascript:void(0);" Menu item
ul.submenu.active style="display:block;"

 

サブメニューを無理やり開いた状況を作った。

これで動作した!!

よし、これで開いた状態を作っておける。

無理やりっぽいけど、All OK。

 

影の部分は不要のため、削除。

色味は、サイトに合わせる。

 

よし、微調整など色々と終了した。

一度プッシュしよう。

そして、ブランチをマージして、HerokuにPushして、動作確認。

なんか、この呪文みたいな言葉Coolだよね。

 

ひとまず、プッシュも出来たし問題なく見れているのだけれど、モバイルでフル解像度になってしまう。

これもクロームのアップデートのせいじゃなかったかな。

とおもったけど、なんか違うっぽいな。。

 

調べてみよう。

tech.nitoyon.com

 

View Pointを設定しなければいけないっぽい。

早速メタタグを追加だ。

 

morizyun.github.io

 

これを参考にし、メタタグのみ追加してみる。

いや、ちゃんとオリジナルを参考にしよう。

github.com

 

にげちゃだめだ!

うん。逃げよう。

 

github.com

使い方、下に書いてあった。

上記リンクがそれ。

く・・・

もう一度Try!

 

Bundle installから初めて、再度挑戦。

さっきまでエラーでてたのって、サーバー再起動していないからじゃないかな・・・

と密かに思い始めてきた。

 

メタタグ恐ろしや。

ちょっと先に進まないので、むりやりビューポイント追加して様子を見てみよう。

 

メタタグを追加したら、携帯用に表示された。

無事に。

リンクのクリックの反応が良すぎて困る。

俺の設定が悪いかと思ったら、このやつの問題だという事に気がついた。

こういうのは携帯で一度確認しないとだめだな。

勉強になった。

 

うーむ、設定だけではどうともならならさそうなので、クリックできる場所を変更しよう。

 

lab.sonicmoov.com

 

これを携帯で確認すると、無事に操作できた。

こっち側に修正するか・・・

この購入した作者、わざとサポートさせるようにしているとしか思えない。

まぁ、ただ知識がないだけというね。

 

いやいやいや、色々となんか問題がありすぎだわさ。

タブメニューもページ一度移動してから、開いたら動作しないし。

なんだこれ。

 

結局、.bind("click touchstart"というのがついているのが原因という事を1時間ほど調べてわかったため、touchstartを削除したら、解決した。

 

いちいちherokuにアップロードしていたが、クロームスマホシミュレーターの場合、タッチスクリーンもシミュレートしてくれるので、それで問題ないことを確認。

 

変な地雷仕掛けてるなぁ。

まぁ、なんとか対応できたので、よしとするか。

 

これでアコーディオンメニューは無事に完成!

 

タブが開かれなくなったのは、いつごろからかな。

ちょっと確認しよう。

 

Javascriptを外部にしたら、問題なくできた。

たぶん、再度読み込みしたときに、競合してしまったのだろう。

 

ひとまず、二回表示されてしまうのでアニメーションをなくそうとおもって調べてみる。

codepen.io

最高にCOOLなのがでてきた・・・

これ使いてぇ。

予測とかで特に。

 

よし!

今日は終わり!

だいぶ良い感じに進んだ気がする。

うん。これで他のページだいぶ進むと思うなぁ。

明日頑張ろう。