ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

アニメーション, メニュー

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

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

Responsive Multi-Level Menu | Codrops

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

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

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

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

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

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

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

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

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

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

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


1 コメント

  1. 重中英二

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

Leave a Reply

Theme by Anders Norén