コンパイラかく語りき

import { Fun } from 'programming'

ロシアップ ver2.3 「ドロップダウンメニュー」

ドロップダウンメニューを実装しました。

前々から存在してはいたのですが、Bootstrapでの実装だったんですよね。それを自作しました。

「自分で作れるものは自分で作る」です。あと、Bootstrapに頼ると余分なHTMLが入ってしまうので…。

 

これがBootstarpによるドロップダウンメニュー。

f:id:chuck0523:20151031102753p:plain

マウスカーソルで青。

f:id:chuck0523:20151031102819p:plain

Theブートストラップって感じですね。

 

それを、このように書き換えました。

f:id:chuck0523:20151031102948p:plain

 

マウスカーソルするとこんな感じ。

f:id:chuck0523:20151031103002p:plain

 

あと、画像では伝えられないのですが、動きがあります。

「アカウント」をクリックすると上の方からサーッと降りてきます。もう一回クリックすると、サーッとフェードアウトします。

 

それと「アカウント」の右にあるアイコンですが、CSSで書きました。

f:id:chuck0523:20151031103147p:plain

擬似要素のafterと、CSS3のtransformで実装しました。

 

CSSのコードは、断片的ではありますが、Gistに上げました。

こちらが、下向きのアイコンです。

gist0ff0aa2e30fbd17082ba

多分コピペしても動きます。(ちょっと書き換えは必要かも)

 

こちらがドロップダウンメニュー。

giste1b90594ff4394cef55a

こっちは断片過ぎてコピペ無理ですねw

 

 

それと、今回初めてRailsjQueryを使いました。

 

で、DOMが取得できなくてハマりましたw

原因はこれでした。

www.workabroad.jp

 

RailsにはTurbolinkというものがあって、リソースの読み込みがパパッと行われるようです。

なので、jQueryできちんと$(document).ready()しようね!という話でした。解決。ありがたや。

 

ただし、問題になったのはそれくらい。RailsではデフォルトでjQueryが読み込まれているので、普通にrails newしたらすぐにでもjQueryを使えます。

やっぱりRailsすごいなあと。改めて実感しました。

 

次はRailsでcoffeeを書いてみたいです。

 

russiup.herokuapp.com

(※このブログ記事を書いた段階では、まだドロップダウンメニューの変更は反映されていません。バージョン3.0へのアップデートで公開されます)