【JavaScript】横にスライドするレスポンシブメニューを実装するライブラリ『mmenu』

responsive-slidemenu-javescript-mmenu

スマートフォンやタブレットのアプリなどでボタンを押すとメニューが横から展開するインターフェイスをみることがあります。今回はそのような横にスライドするメニューを実装することができるJavaScriptライブラリ『mmenu』を紹介します。

『mmenu』

mmenu

ダウンロード

ライブラリのダウンロードはこちらから行うことが出来ます。

Step 1: スタイルシート・ライブラリの読込み

最初に『mmenu』の基本スタイルシートを読み込みます。続けて『mmenu』は「jQuery」対応のライブラリなので最初に「jQuery」を読込み、「jquery.mmenu.js」を読み込みます。

<link type="text/css" rel="stylesheet" media="all" href="mmenu.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.mmenu.js"></script>

Step 2: 初期設定

対応させるメニューとオプションを設定します。

<script type="text/javascript">
  $(function() {
    $("#my-menu").mmenu({
     // options object
    }, {
     // configuration object
     pageNodetype: "section"
});
  });
</script>

Step 3: ページ表示

基本的なメニューのコーディング例です。

<nav id="my-menu">
   <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About us</a></li>
      <li><a href="/contact/">Contact</a></li>
   </ul>
</nav>

オプションについての内容はこちらに説明があります。

関連記事

【CSS】CSS3による枠線の新しい表現方法

CSS3より定義された「Border Radius」「Border Image」を使うことで角丸のボックスや、罫線の装飾によってこれまで画像で作成していた要素をCSSのみでデザインすることができるようになりました。 角丸(border-radius) 「b...続きを読む

2015.02.08CSSHTMLコーディング

【CSS】CSS3で実現するドロップシャドウ効果

画像処理のソフトなどには、文字やオブジェクトに影をつける「ドロップシャドウ」という機能があります。 ボタンや写真などに「ドロップシャドウ」使うことで立体的に表現することができるのでよく使われる効果のひとつです。 画像処理のソフトなどで行う「ドロップシャドウ」効果を...続きを読む

2015.02.09CSSHTMLコーディング

静岡洋館巡り「旧エンバーソン住宅」フォトギャラリー

静岡市の市指定有形文化財「旧エンバーソン住宅」を見てきました。明治時代の西洋建築の装飾などその雰囲気にふれることができました。 概要(引用) 旧エンバーソン住宅は、カナダからキリスト教伝道のため日本に派遣されたロバートエンバーソン師の自邸として、明治37年(190...続きを読む

2015.03.18フォトギャラリー

【デザイン】アイディアに溢れたウェディングポートレート

ユーモア、クリエイティブ、アートさまざまなアイディアに彩られたウェディングポートレートをまとめてみました。 matt shumate Photographer 主にウェディングなどの写真を撮影されているフォトグラファーの「matt shumate」氏のポートレートより...続きを読む

2015.02.15インスピレーション

【JavaScript】jQuery画像スライダーのライブラリまとめ

WEBサイトのトップページなどでよく見る画像がスライダーする仕組み。jQueryライブラリと組み合わせで機能するスライダー用のライブラリをまとめてみました。 Easy Slider 左右の矢印、数字ボタンによるナビゲーションがあるシンプルな画像スライダーです。 ...続きを読む

2015.02.10HTMLコーディング