さまざまなデバイスに対応しているレスポンシブメニュー「SmartMenus」
当ページのリンクには広告が含まれています。
スポンサーリンク
さまざまなデバイスに対応しているレスポンシブメニューを実装するプラグイン「SmartMenus」を紹介します。
jQueryプラグイン「SmartMenus」
このプラグインを使えば、さまざまなデバイスに対応していてブラウザーの幅サイズに依らないレスポンシブメニューを作成することができます。
また、メニューアイテムのドロップダウンにも対応しているので、メニューを実装したい方はひとつの候補にしてみてはいかがでしょうか。
スポンサーリンク
それではデモページのメニューをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="SmartMenus のデモでーす。">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SmartMenus - jQueryプラグイン</title>
<link href='css/sm-core-css.css' rel='stylesheet' type='text/css' />
<link href='css/sm-blue/sm-blue.css' rel='stylesheet' type='text/css' />
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.smartmenus.js" type="text/javascript"></script>
<script>
$(function() {
$('#main-menu').smartmenus();
});
</script>
</head>
<body>
<h1>SmartMenus のデモでーす。</h1>
<p>ブラウザーの幅を縮めてみてください。</p>
<ul id="main-menu" class="sm sm-blue">
<li><a href="#">メニュー 1</a></li>
<li><a href="#">メニュー 2</a>
<ul>
<li><a href="#">アイテム</a></li>
<li><a href="#">アイテム</a>
<ul class="sub-menu">
<li><a href="#">サブアイテム</a></li>
<li><a href="#">サブアイテム</a></li>
<li><a href="#">サブアイテム</a></li>
</ul>
</li>
<li><a href="#">アイテム</a></li>
</ul>
</li>
<li><a href="#">メニュー 3</a></li>
</ul>
</body>
</html>
スポンサーリンク