さまざまなデバイスに対応しているレスポンシブメニュー「SmartMenus」

tags:,

さまざまなデバイスに対応しているレスポンシブメニューを実装するプラグイン「SmartMenus」を紹介します。

jQueryプラグイン「SmartMenus」

このプラグインを使えば、さまざまなデバイスに対応していてブラウザーの幅サイズに依らないレスポンシブメニューを作成することができます。

また、メニューアイテムのドロップダウンにも対応しているので、メニューを実装したい方はひとつの候補にしてみてはいかがでしょうか。

スポンサーリンク

それではデモページのメニューをご覧ください。

「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>
スポンサーリンク