レスポンシブ対応 画面の周辺にメニューを表示できる「Animated Border Menus.js」

フラットデザインが多くなってきた今日。視覚的なインパクトが抑えめなフラットデザインにおいてアニメーションは非常な重要な要素です。そんなフラットデザインに合う、トリッキーな動きをもつメニューを表示できるjsがあったので紹介します。

AnimatedBorderMenus

公式サイト | デモ

まずは上記サイトのデモをご覧ください。
メニューをクリックすると、周辺に黒い枠ができ、そこにメニューが表示されます。どことなくアプリっぽい動きでsurfaceのメニューや、MacのMission Controlのような印象もうけます。

使い方

ダウンロード

公式サイトの「Download Source」からjsとCSSをダウンロードします。
使用するのは
・style◯.css ◯は使いたいデモの番号
・demo.css
・classie.js
・borderMenu.js
の4つ

CSSを読み込む

ふたつのCSSを読み込みます。demo.cssはなくても動きますが、色味が若干かわります。

jsを読み込む

メニューを追記

bt-menu-triggerのクラスがついたaタグをクリックすると、メニューが表示されます。あとはメニューの部分に好きな文字や、Font Awsomeなどを使ってアイコンを表示すれば完成です。

デモのように、メニューだけではなく、動画表示や画像のスライドショーなどにも使用できそうです。


非常によみやすいフラットデザインの本。なんとなく知っているフラットデザインを体系的に学び直したいなら

  • このエントリーをはてなブックマークに追加
« »

デザインとカメラとロードバイクと畑

© 2017 cowcow blog