サイト開発日記

Just another WordPress site

*

スマホに効果的なスライドメニューをjqueryの「mmenu.js」で実装する

   

mmenuでスライドメニューを実装

よく見る横からスライドして出てくるメニューを実装するのに便利な

jqueryプラグイン「mmenu」を紹介します。

公式サイト http://mmenu.frebsite.nl/

HTMLの記述(デモ)

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<meta name=”author” content=”www.frebsite.nl” />
<meta name=”viewport” content=”width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes” />

<title>jQuery.mmenu demo</title>

<link type=”text/css” rel=”stylesheet” href=”css/demo.css” />
<link type=”text/css” rel=”stylesheet” href=”../src/css/jquery.mmenu.all.css” />

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
<script type=”text/javascript” src=”../src/js/jquery.mmenu.min.all.js”></script>
<script type=”text/javascript”>
$(function() {
$(‘nav#menu’).mmenu();
});
</script>
</head>
<body>
<div id=”page”>
<div class=”header”>
<a href=”#menu”></a>
Demo
</div>
<div class=”content”>
<p><strong>This is a demo.</strong><br />
Click the menu icon to open the menu.</p>
<p>For more demos, a tutorial, documentation and support, please visit <a href=”http://mmenu.frebsite.nl” target=”_blank”>mmenu.frebsite.nl</a></p>
</div>
<nav id=”menu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#about”>About us</a>
<ul>
<li><a href=”#about/history”>History</a></li>
<li><a href=”#about/team”>The team</a>
<ul>
<li><a href=”#about/team/management”>Management</a></li>
<li><a href=”#about/team/sales”>Sales</a></li>
<li><a href=”#about/team/development”>Development</a></li>
</ul>
</li>
<li><a href=”#about/address”>Our address</a></li>
</ul>
</li>
<li><a href=”#contact”>Contact</a></li>
</ul>
</nav>
</div>
</body>
</html>

scriptの記述(デモ)

$(‘nav#menu’).mmenu();

OPTION

slidingSubmenus :  true or false

入れ子要素に対しTRUEなら子要素にページング移動

FALSEならドロップダウンリストで表示される

classes : mm-light ,mm-slide

色や表示エフェクトを指定するデフォルトはダーク,スライド

positions : left(デフォルト)

ポジション指定する

デフォルトはleft

その他指定 right ,top,bottom

z-positions : back(デフォルト)

front next

header : true or false(デフォルト)

true だとヘッダーを表示する

buttonbar : ボタンバーのクラス名指定

ヘッダーにボタンを追加

counters : true or false

要素数のカウント表示

header : true or false

ヘッダーの追加

footer : true or false

フッターの追加

searchfield : true or false

検索窓を追加する

 

 

 

 - jquery

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

no image
クリックで表示・非表示が切り替わるメニューバー

jqueryをHTMLに組み込む 下記のコードをHTMLに記述してjqueryを …

no image
スクロールしても画面上部に固定されるメニュー

jQeuryを読み込む まずHTMLをマークアップしていきます。 jQueryを …

no image
もっと読み込む機能の実装の備忘録

もっと読み込む機能 自分のサイトにもっと読み込む機能を実装するときのメモです。 …

no image
上下スクロールに対応したパララックス効果

「skrollr」の特徴 Webサイトの演出手法であるパララックス効果は背景、画 …

no image
横から出てくるサイドメニュー

Snap.jsをダウンロードして準備 まずはページを左右にスライドしてメニュー表 …