レスポンシブWebデザイン導入計画（Parllet の場合 その６（スライドメニュー Animated Border Menus 篇－３））

前回の続きです。

レスポンシブWebデザイン導入計画シリーズでは同じ挿絵を使います。（決して手抜きではありません。）

これまでのあらすじ

ドットインストールのレスポンシブなウェブサイトを作ろう に沿ってParllet（個人で作成・公開しているアルファ版のWeb家計簿）のトップページを改修し、相談役の妻の一言でFacebookやGoogle＋のようなスライドメニューの実装をと思い立つ。

jQuery Mobile からスライドメニューの要素だけ取り込もうと目論むも、あえなく失敗。

PageSlide を試すが "overlay" の動きの方が良いと感じ、Animated Border Menus をParllet（パレット） に組み込みはじめる。

単純に組み込んだ状態から、 Parllet（パレット） にそぐうように目下修正中。

 

あれ？　あらすじが前回と同じだ！

 

スポンサードリンク

 

 

修正に手間取り過ぎってことですね・・。

 

気を取り直して今回も修正を続けていきます。

Parllet（パレット） のトップページのメニューはページ内リンクなので、クリックして飛んだときにメニューは閉じて欲しいが、デフォルトではメニュー内のリンクをクリックしても閉じない。

 

カスタマイズ用に borderMenu.js をコピーしてjquery.borderMenuPrlt.js（一応少しは慣れているjQueryで記述していく） を用意し、＜/body＞直前のJavascript読込の記述を修正。

＜script src="js/borderMenu.js"＞＜/script＞

　↓

＜script src="js/jquery.borderMenuPrlt.js"＞＜/script＞

jquery.borderMenuPrlt.js の修正。（結構変えちゃったので、変更前と変更後でゴン、ゴンと載せます。また、Demo 6 の為だけのコードは今回は不要ということで見通しを良くするためにも消してあります。さらにmobilecheck() の中身も省略です。）

変更前

(function() {

// http://stackoverflow.com/a/11381730/989439
function mobilecheck() {
//省略
}

function init() {
var menu = document.getElementById( 'bt-menu' ),
trigger = menu.querySelector( 'a.bt-menu-trigger' ),
// event type (if mobile use touch events)
eventtype = mobilecheck() ? 'touchstart' : 'click',
resetMenu = function() {
classie.remove( menu, 'bt-menu-open' );
classie.add( menu, 'bt-menu-close' );
},
closeClickFn = function( ev ) {
resetMenu();
overlay.removeEventListener( eventtype, closeClickFn );
};

var overlay = document.createElement('div');
overlay.className = 'bt-overlay';
menu.appendChild( overlay );

trigger.addEventListener( eventtype, function( ev ) {
ev.stopPropagation();
ev.preventDefault();

if( classie.has( menu, 'bt-menu-open' ) ) {
resetMenu();
}
else {
classie.remove( menu, 'bt-menu-close' );
classie.add( menu, 'bt-menu-open' );
overlay.addEventListener( eventtype, closeClickFn );
}
});

}

init();

})();

変更後

;(function() {
// http://stackoverflow.com/a/11381730/989439
function mobilecheck() {
//省略
}
function init() {
var menu = jQuery('#bt-menu'),
trigger = menu.children('a.bt-menu-trigger'),
link = menu.find('ul').find('a'),
// event type (if mobile use touch events)
eventtype = mobilecheck() ? 'touchstart' : 'click',
overlay = menu.children('div.bt-overlay'),
resetMenu = function() {
menu.removeClass('bt-menu-open');
menu.addClass('bt-menu-close');
};
trigger.bind(eventtype, function(ev) {
ev.stopPropagation();
ev.preventDefault();

if (menu.hasClass('bt-menu-open')) {
resetMenu();
} else {
menu.removeClass('bt-menu-close');
menu.addClass('bt-menu-open');
}
});
overlay.bind(eventtype, function(ev) {
ev.stopPropagation();
ev.preventDefault();
resetMenu();
});
link.click(function(ev) {
if (menu.hasClass('bt-menu-open')) resetMenu();
});
}
init();
})();

メニュー内のリンクをクリックして閉じるようにする為に必要だったのは

link.click(function(ev) {
if (menu.hasClass('bt-menu-open')) resetMenu();
});

の部分だけですが、勉強（体当たり独学）を兼ねていろいろ変えました。

1. addEventListener は jQuery では bind でいけるようなので bind に変えた。
2. classie.js を使ってやっていたのはタグへのクラスの追加・削除・有無判断だけのようだったので、jQuery でやった（addClass 、removeClass 、hasClass ）。
3. closeClickFn について。「これ、僕、よく分かんないっす！closeClickFn の function の中に closeClickFn が出てくるって再帰とかいうやつ？　再帰？　それ未だに分かんない！」ってことで、やりたいことはメニューが開いてる時にメニューの外側の部分（var overlay）をクリックでメニューを閉じる（resetMenu()）ことのはずなので、"overlay.bind( ・・・" の部分の記載で実現。
4. "var overlay = ・・・" の部分で、#bt-menu の配下に＜div class="bt-overlay"＞＜/div＞ を作っているが、まどろっこしいと感じたので実際にhtmlソース内に直接＜div class="bt-overlay"＞＜/div＞を記載した。

3. によってclassie.js が不要になったので、＜/body＞の直前の以下の記述は削除。

＜script src="js/classie.js"＞＜/script＞

 

そろそろ、スマホスタイルの時だけ現れるようにして、位置サイズも微調整していきたい。

現時点ではブラウザの幅をスマホサイズに縮めた時に

ヘッダー部分のリンク（"Parllet とは"　等）が消え、代わりに右端に "＋" の文字のリンクが表示

される。 （この回で実装）

 

右端の "＋" の代わりに "Animated ・・・" の左端メニューボタン（≡）となるように変更。（変更前のソースはこの回のサンプルページのソースを参照のこと）

#footerNavLink {
font-size: 13pt;
font-weight: bold;
float: right;
}
@media all and (min-width: 480px) {
#footerNavLink {
display: none;
}
}

　↓

@media all and (min-width: 480px) {
#bt-menu {
display: none;
}
}

以下は不要になるので削除

＜div id="footerNavLink"＞＜a href="#footerNav"＞+＜/a＞　＜/div＞

＜div id="footerNav"＞
＜ul＞
＜li＞＜a href="#divWhatIsParllet"＞Parllet とは＜/a＞＜/li＞
＜li＞＜a href="#divTheOriginOfParllet"＞Parllet の由来＜/a＞＜/li＞
＜li＞＜a href="#divBenefitsOfParllet"＞Parllet のメリット＜/a＞＜/li＞
＜/ul＞
＜/div＞

高さを保つために以下を追加

#divIdxHdFrm {
height: 36px;
}

 

メニューボタンの位置とサイズの調整（stylePrlt.css を以下のように変更）

.bt-menu-trigger {
top: 10px;
left: 20px;
width: 50px;
height: 50px;
}
　↓
.bt-menu-trigger {
top: 34px;
left: 10px;
width: 36px;
height: 36px;
}

 

今の Parllet（パレット） のメニュー数での動きとしては問題ないところまで来たので、次回はメニュー数をワザと増やしてみて、 "Android 2.3 スクロール" 問題と対峙したいと思います。

続きます！

 

12/1 追記

続きを書きました。

 

タグ：公開アプリ Parllet レスポンシブWebデザイン 体当たり 技術 jQuery