レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」

Responsive Multi-Level Menu | Codrops

今回は、主にスマートフォンサイトで活躍しそうなレスポンシブタイプのドロップダウンメニューを紹介します。

限られたスペースからでも、メニューをふわっとアニメーションしながら展開して表示させてくれます。

まずは、サンプルをご覧下さい。

レスポンシブなドロップダウンメニューを実装する「Responsive Multi-Level Menu」サンプル

古いブラウザやIEなどでは作動しませんが、最新ブラウザが標準のスマホサイトにピッタリですね。

【設置方法】
こちらのResponsive Multi-Level Menuからソースをダウンロードします。このダウンロードしてきたソースファイルをもとに設置してみます。

<head>部分にCSS関連を読み込む記述をします。

</body>の直前にJavaScriptを設定します。

続いてメニューリストの設定をします。

ダウンロードしてきたソースにはデフォルト以外に4種類のエフェクトのデモが用意されています。


あわせてお読みください

1 Comment

  1. 重中英二

    2014/03/08 at 4:55 PM

    こんにちは。質問なのですが「RESPONSIVE MULTI-LEVEL MENU」をwordpressのテーマに実装するには上記のソースを設定するだけでいいのでしょうか?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です