スマホやタブレットでメニューを表示させたいときに活用できるレスポンシブタイプのメニュー「Animated Border Menus 」を紹介します。

メニューアイコンをクリックすると、にゅるっと動いて各メニューが現れます。スマホファーストのお洒落なサイトに良いのではないでしょうか。もちろん、パソコンでもいい感じです。

サンプルをご覧下さい。> にゅるっと出てくるスマホで便利なお洒落なメニュー「Animated Border Menus 」サンプル

パソコンの古いブラウザでは動きません。スマホやタブレットでは大丈夫でしょう。

【設置方法】
まずは、こちらのAnimated Border Menusからソースを一式ダウンロードします。

<head>部分にCSSを指定します。

</body>の直前にJavascriptを読み込む記述をします。

<body>部分に以下のようにメニューを記述します。

本家のデモは6パターンが用意されています。サイトにあわせて採用してみてくださいね。

Animated Border Menus Demo
http://tympanus.net/Tutorials/AnimatedBorderMenus/index2.html

最後にサンプルのソースを書いておきます。どうぞご参考まで。

この記事と関連してると思われる記事: