デザイナーの野田沢です。

先日このような条件のwebサイトを作成しました。
［動きがある］［ドロワーメニュー］［レスポンシブ］というもの。

そこで“動きがある”はAnimate.cssで実装することにしました。
それに合わせてドロワーメニューとレスポンシブを実装していきます。

実装

Animate.cssは以前にも実装経験があったのですんなりといい感じに！レスポンシブは本業なので問題なく実装できました。

あとはドロワーメニューです。

今回はCSSのみで実装できる「pure-drawer 」を組み込んでみました。

動きもなめらかでとってもいい感じ！で、完成！！

………と思いきや先程までぐりんぐりん動いていたAnimate.cssの部分が静止しているじゃありませんか。

Animate.cssでぐりんぐりんさせているブロックは画面スクロールに合わせて作動するように設定していたのですが、いくらスクロールしても微動だにしません。

問題を探ります。

原因はpure-drawer.cssで内包divに対して与えられている height:100% でした。

height:100%なのでscrollで実行されるAnimate.cssのdoがどうやら認識されないようです。

色々検証してみましたがhight:100%を指定しないとドロワーが作動しません。

でもhight:100%を指定するとぐりんぐりんしません。

参りました。

せっかく完成したのですが（いや完成してないのだけど）別のドロワーメニューに差し替えることにしました。

そこで巡りあったのがこちらの「JSを使用しないドロワーメニュー」です。

完成

導入方法もとってもシンプル！

個人的には最初に使用した「pure-drawer 」よりもhtml記述がシンプルで好みです。

cssもシンプルでカスタマイズも簡単にできました。

問題のAnimate.cssとの相性もバッチリでぐりんぐりん動いてくれます。

ちょっとニッチな例かもしれないですが、もし似たような症状でお困りの方は参考にしてみてください。

それではまたっ！