2014年4月8日火曜日

AngularJSでフルスクリーンオーバーレイメニューを表示する

フルスクリーンオーバーレイメニューを作りたいと思って色々と調べていたら、このようなおもしろいページを見つけた。

Fullscreen Overlay Styles & Effects | Demo 1

こちらを参考に、AngularJSを使って似たようなものを作ってみた。



改善点としては

・メニュー項目が増えても閉じるボタンに被らないように
・メニュー項目が増えてもスクロールして選択できるように
・メニュー項目を選択したらメニューを閉じるように

という感じ。

しかし、レイアウトの方法を変えたからなのかAngularJSを使うようにしたからなのか、アニメーションの感じがちょっと違うし遅い。

実際に使うときは回転アニメーションは外した方がいいかもしれない。