Sliding Checkbox Actions Menu with jQuery | Codrops

チェックボックスでアイテムを選んだ後のアクションをスムーズに選べるナビゲーションをjQueryで実装するチュートリアルです。
チェックボックスが多数あって、削除なのか、OKなのかというアクションを複数選ぶようなインタフェースがある場合は参考にしてみるとよさそう。
なかなかカッコよくて合理的なナビゲーションになっています。



沢山チェックボックスがあるとして、ページの上部にアニメーションしながらナビゲーションメニューが追従してくれます。
スキンのCSSがなかなかカッコよくていい感じです。カッコいいだけではなくて、機能性にも優れています。



左部分にはチェックしたアイテムの数、そしてArchive, Delete といったボタンとともに折りたたみできる別のメニューも格納出来ます。


次のアクションが複数ある場合において、なかなかよいインタフェースですね。
チェックボックスがなくても、サイトの上部に常に存在するナビゲーションとして機能させてもいい感じに使えるかもしれませんね。

関連エントリ

• 階層ナビゲーション実装ライブラリ集
• CSSスプライトを使ったナビゲーションメニュー作成サンプルとチュートリアル
• サイトに使えるCSSベースのクールなメニューナビゲーション8個