PCスマフォ両用できる階層メニューを実現するjQueryプラグイン「Simple Responsive jQuery Navigation Plugin」

PCスマフォ両用できる階層メニューを実現するjQueryプラグイン「Simple Responsive jQuery Navigation Plugin」サンプル 昨今はレスポンシブデザインが流行している感じですが、Simple Responsive jQuery Navigation Pluginを利用すると、階層化されたメニューもいい感じで対応してくれます。

使用方法 Simple Responsive jQuery Navigation Pluginからファイル一式をダウンロード。
メニューは下記のようなシンプルで3階層まであるもの。
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Our Mission</a></li>
<li><a href="#">General Info</a></li>
<li><a href="#">History</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Locations</a>
<ul>
<li><a href="#">United States</a></li>
<li><a href="#">England</a></li>
<li><a href="#">China</a></li>
</ul>
</li>
<li><a href="#">Employment</a></li>
</ul>
</li>
</ul>


これをレスポンシブにするため、jsを下記のように記述します。
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.responsinav.js"></script>
<script>
$(function(){
$(window).responsinav({
breakpoint: 480 //横幅**pxで切り替え
});
});
</script>


あとはCSSで見た目を整えれば完成です。
nav,ul,li{ margin:0;padding:0;}
nav{ display: block; }
a.mobile_handle { display: none; }
ul { display: block; }
ul li { display: inline; position: relative; float: left; list-style: none; }
ul a, ul a:link, ul a:visited { display: block; float: left; padding: 2px 12px 4px 12px; margin: 0; line-height: 10px; color: #000; }
ul a:hover, ul a:active { text-decoration: underline; }
ul ul { display: none; position: absolute; top: 18px; left: 7px; width: 120px; padding: 5px; background-color: #000; background-color: rgba(0, 0, 0, .7); }
ul ul li { display: block; float: none; clear: both; }
ul ul a, ul ul a:link, ul ul a:visited { display: block; float: none; border: 0; padding: 8px 5px; margin: 0; color: #fff; }
ul ul a:hover, ul ul a:active { text-decoration: underline; }
ul ul ul { top: 0; left: 125px; }

/* ここから幅を縮めた時 */
@media (max-width: 480px){
body { margin-top: 40px; font-size: 18px; }
nav{ position: fixed; float: none; margin: 0; padding: 0; top: 0; left: 0; width: 100%; }
a.mobile_handle { display: block; padding: 10px; background: #a8acbf; text-align: center; }
ul { display: none; }
ul li { display: block; position: relative; float: none; padding: 0; background: #e3e3e3; border-top: 1px solid #757575; }
ul a, ul a:link, ul a:visited { display: block; position: relative; float: none; padding: 15px 10px; clear: both; }
ul ul { display: none; position: relative; width: 100%; top: 0; left: 0; margin: 0; padding: 0; background: none; border-bottom: 2px solid #757575; }
ul ul li { background: #cfcfcf; }
ul ul a, ul ul a:link, ul ul a:visited { color: #000; padding: 15px 10px 15px 25px; } }

あとは好みに応じてCSSを調整ください。

PCスマフォ両用できる階層メニューを実現するjQueryプラグイン「Simple Responsive jQuery Navigation Plugin」サンプル

sponsors

「PCスマフォ両用できる階層メニューを実現するjQueryプラグイン「Simple Responsive jQuery Navigation Plugin」」をシェアする

記事作成:
記事URL:

TOP > > > PCスマフォ両用できる階層メニューを実現するjQueryプラグイン「Simple Responsive jQuery Navigation Plugin」