この記事は公開から9年、最終更新日からも9年経過しています。内容が古くなっている可能性があります。
モバイル等でよく使うスライドメニューの実装メモです(Sidr使用)
20150424追記しました。
目次
20150424追記(sidr-package-1.2.1とAndroid4.1との相性が悪いみたいです)
・とあるクライアント様から、Android端末でsidrで実装したメニューボタンを押すと、メニューを選択していないのに別ページに遷移してしまうとの指摘あり。
・iPhone、Xperia(詳細機種･OSは未確認)では問題ないが、Galaxy SC02E(バージョンアップを行っていなければ、Android4.1)で不具合発生とのこと。
・その後、知り合いのシャープSHL22(Android 4.2.2)では問題ないことを確認。
・機種依存かANdroidOSバージョン依存だろうと。
・こういう時はGoogleさんに頼ります。するとありました。二つ記事を見つけました！
アンドロイド端末をブラウザ上で動作確認＆jQuery.sidrの不具合 | Lost in Mechanical Addiction
Sidr 「sidr-package-1.2.1」と、アンドロイド（Android）は相性悪し 改善方法 | HCZ BLOG ： ゼファー1100
・一つ目の参考サイトでAndoroid OSのシミュレータの紹介もあったので、そのシミュレータで確認したところ、まさにAndroid4.1では動作しないが、4.2では動作する！
・githubの1.1.1 Perfect. 1.2.1 Broken in android · Issue #144 · artberri/sidr · GitHubにもレポートされてますね。
・WebCodeEditor/prototype/lib/sidr-package-1.1.1 at master · muff1225/WebCodeEditor · GitHubより、sidr1.1.1をダウンロードし、入れ替えましたところ、無事動作しました！！
・jQuery.sidr1.1.1に関しては、Mac/Win7/iOS/Android等各OS/ブラウザで問題なく動作しています。
・Andoroid系の確認作業をどうするか新たな課題。※Google Chrome開発者ツールのエミュレータだと、OSまでは特定した動作確認は出来ないのかな？
ここからが元々のオリジナルな投稿です。
概要
モバイル等でよく使うスライドメニューをSidrというjQueryプラグインを利用して実現しました。
こんな感じの表示になります。
※モバイルでよく使われる横三本線のメニューアイコン； 「」 をクリックすると、左側ないしは右側に メニューリストが表示され、もう一度、メニューアイコンを押すとメニューリストが閉じられます。
Sidr提供先とデモ
・公式サイト→ Sidr – A jQuery plugin for creating side menus
・デモ(公式サイト内)→ Sidr – Demos & Usage
前提条件
・Sidrを http://sample.nakamurayuji.com/wp5/で使用することを前提にURLやftpフォルダ等を記載していますので、随時読み替えて下さい。
・上記サイトでは、Newsyという有料テーマの子テーマを利用しています。
準備1；公式サイトよりSidrをダウンロード、組み込み
・公式サイト； Sidr – A jQuery plugin for creating side menusより、Sidrをダウンロードします。
・「sidr-package-1.2.1.zip」というファイル名でダウンロードされますので、解凍します。フォルダ「sidr-package-1.2.1」が出来ます。※2015/2/13現在の情報
・解凍したフォルダをまるごと、サーバーの任意の場所にアップロードします。
※私は下記にアップロードしました。
「/WordPressインストールフォルダ/wp-content/themes/テーマファイルのフォルダ/javascripts/sidr」
・アップロードしたsidrをサイト内に読み込みます。
※公式サイトから引用
<!DOCTYPE html>
<html>
<head>
<!-- Your stuff -->
<!-- Include Sidr bundled CSS theme -->
<link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
</head>
<body>
<!-- Your stuff -->
<!-- Include jQuery -->
<script src="javascripts/jquery.js"></script>
<!-- Include the Sidr JS -->
<script src="javascripts/sidr/jquery.sidr.min.js"></script>
</body>
</html>
準備1部分のコード説明
(1)WordPressの場合、メニューを表示しているテンプレート(一般的には、header.php)内に記述します。
・「jquery.sidr.dark.css」の代わりに「jquery.sidr.light.css」も指定できます。スライドメニューの装飾用CSSです。
<link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
(2)jQuery本体を読み込んでいます。WordPressのテーマによってはすでに読み込んでいるものもありますし(その場合ここの箇所の記述は不要)、最新バージョンをダウンロードして組み込む場合は「jquery.js」の箇所を「jquery-1.11.2.min.js」のように変更して下さい。
<script src="javascripts/jquery.js"></script>
(3)Sidr本体を読み込んでいます。
<script src="javascripts/sidr/jquery.sidr.min.js"></script>
準備2；メニュー部分の実装
・公式サイトのコード例を実際のサイトに則して少し変更したものを掲載します。
<a id="mobile_menu" href="#sidr-main"><i class="fa fa-bars"></i></a>
<div id="sidr"> <!-- for sidr JQuery -->
<ul>
<li><a href="#">List 1</a></li>
<li class="active"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
<!-- for sidr JQuery -->
<script>
$(document).ready(function() {
$('#mobile_menu').sidr({
name: 'sidr-main',
source: '#sidr',
side: 'left'
});
});
</script>
準備2部分のコード説明
(1)各記述箇所の関係
(2)タップする箇所の記述です。
i classの箇所は、Awesomeフォントを利用し、三本線を表示しています。
☆#mobile_menuで指定されている文字(本例では三本線)を押すと、#sidr-mainの箇所が表示されます。
<a id="mobile_menu" href="#sidr-main"><i class="fa fa-bars"></i></a>
(3)実際のメニューのリストです。
<div id="sidr"> <!-- for sidr JQuery -->
<ul>
<li><a href="#">List 1</a></li>
<li class="active"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
(4)sidrが動作する部分の記述です。
☆#sidr-mainの箇所に#sidrに記述されたメニューリストを生成し、#mobaile_menu部分が押される(タップ)されるごとに表示/非表示が切り替わります。
※「side: ‘left’」だと左側にスライドメニューが表示されます、「side: ‘right’」と書き換えると、右側にスライドメニューが表示されます。デフォルトは左なので「side: ‘left’」の場合は省略できます。
<script>
$(document).ready(function() {
$('#mobile_menu').sidr({
name: 'sidr-main',
source: '#sidr',
side: 'left'
});
});
</script>
(5)これで準備完了です。
適用サイト
・ウインドウ幅が狭い時に適用されるため、ウインドウ幅を指定した新しいウインドウを開きます。
・テーマ；Newsyのカスタマイズに特化したサンプルサイトです。
Newsyカスタマイズサイト(新しいウインドウ)
参考サイト(有難うございます！)
スマートフォンサイトでよく見る横からニョキッと出現するスライドメニューの実装なら「Sidr」で | htmlコーディングパートナーの小棹制作所
最後に
・最近はレスポンシブ対応したWordPressテーマも多いので、こういったプラグイン実装の機会も少なくなるのかもしれませんが、今回扱ったテーマがレスポンシブ対応でなかったので、このjQueryプラグインでとても助かりました。
/////
