ドロップダウンメニューを実装しました。
前々から存在してはいたのですが、Bootstrapでの実装だったんですよね。それを自作しました。
「自分で作れるものは自分で作る」です。あと、Bootstrapに頼ると余分なHTMLが入ってしまうので…。
これがBootstarpによるドロップダウンメニュー。
マウスカーソルで青。
Theブートストラップって感じですね。
それを、このように書き換えました。
マウスカーソルするとこんな感じ。
あと、画像では伝えられないのですが、動きがあります。
「アカウント」をクリックすると上の方からサーッと降りてきます。もう一回クリックすると、サーッとフェードアウトします。
それと「アカウント」の右にあるアイコンですが、CSSで書きました。
擬似要素のafterと、CSS3のtransformで実装しました。
CSSのコードは、断片的ではありますが、Gistに上げました。
こちらが、下向きのアイコンです。
多分コピペしても動きます。（ちょっと書き換えは必要かも）
こちらがドロップダウンメニュー。
こっちは断片過ぎてコピペ無理ですねｗ
で、DOMが取得できなくてハマりましたｗ
原因はこれでした。
RailsにはTurbolinkというものがあって、リソースの読み込みがパパッと行われるようです。
なので、jQueryできちんと$(document).ready()しようね！という話でした。解決。ありがたや。
ただし、問題になったのはそれくらい。RailsではデフォルトでjQueryが読み込まれているので、普通にrails newしたらすぐにでもjQueryを使えます。
やっぱりRailsすごいなあと。改めて実感しました。
次はRailsでcoffeeを書いてみたいです。
（※このブログ記事を書いた段階では、まだドロップダウンメニューの変更は反映されていません。バージョン3.0へのアップデートで公開されます）