こんにちは。
今回は、メニューが上部に固定されてレスポンシブ対応のjQueryプラグイン「HeadShrinker」を紹介したいと思います。
メニューが上部に固定されるものやメニューがレスポンシブ対応のものはけっこうあるのですが、両方とも兼ね備えたものなかなかありません。
設置の仕方
ソースをダウンロードします。
headタグにcssを読み込みます。
1 | <link rel="stylesheet" href="headshrinker.css" media="all" /> |
bodyタグの中の最後にJQuery関連のjsを読み込みます。
1 2 3 4 5 6 7 | <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="jquery.headshrinker.js"></script> <script> jQuery(document).ready(function () { jQuery('header').headshrinker({ fontSize: "17px", mobileMenu: true }); }); </script> |
メニューの設定をします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Sub Options</a> <ul> <li><a href="#">Sub Menu One</a></li> <li><a href="#">Sub Menu One</a></li> <li><a href="#">Sub Menu One</a></li> <li><a href="#">Sub Menu One</a></li> <li><a href="#">Sub Menu One</a> <ul> <li><a href="#">Sub Menu Two</a></li> <li><a href="#">Sub Menu Two</a></li> <li><a href="#">Sub Menu Two</a></li> <li><a href="#">Sub Menu Two</a></li> <li><a href="#">Sub Menu Two</a></li> </ul> </li> </ul> </li> <li><a href="#">Is A Basic</a></li> <li><a href="#">Navigation System</a></li> </ul> </nav> </header> |
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
いかがでしたか。レスポンシブなサイトのメニューにぴったりですね。
以上で「Responsive Multi-Level Menu」の紹介でした。
