レスポンシブWebデザイン導入計画（Parllet の場合 設定ページ－７） [公開アプリ]
続いております、前回 の続きです。
Parllet（個人で作成・公開しているアルファ版のWeb家計簿）
のレスポンシブ化は、トップページとログインページまでが完了していて、
この回 から設定ページに入りました。
実装する内容は、この回にポストしたものです。
前回 までで、タブレットサイズ（768px以下）でヘッダーをパンくずリストにし、
スライドメニューに手こずり、一応大分類のクリックで開く動作だけ出来るようになったところ。
■ ざっくり環境
OS：Windows 7 Home Premium
ブラウザ：IE 11.0
■ 現状
この回に、現時点の設定ページを元にスナップショットを兼ねてサンプル設定ページ１を作りました。
ここがスタート地点です。
今回も体当たりで学びながら進めていきます。
■ 体当たり開始
１月４日にこの回の案のこの辺に入り、大分類と小分類、どちらもクリックした際には、
Parllet（パレット） トップページで導入した（ここら辺）
FacebookやGoogle＋のようなスライドメニューが開いて
分類を変えられるようにします。
その案をちょっとだけ詳細な表現に。
スライドメニューは２つ用意しておき、
大分類と小分類のクリックイベントで自身に対応した
スライドメニューに id を追加して閉じる時に id を削除
大分類（設定）だけの体当たりで、jQuery.on() の絡みでかなり手こずり
前回は、やっとメニューが開いたタイミングで終了。
最後の方で
スライドメニュー出すことに掛かりっきりだったから、
全体としてどこまで進んでたか飛んじゃいました。
メニューも、出たは出たけどヘッダーより前に出さなきゃですね。
調整して、小分類の方でも同じことやらなきゃですね。
ざっと考えてもイロイロ出ては来ますが、今回はここまでで！
なんて書いてましたが、ざっと考えたことだけで全てでしたね。
スライドメニュー開くまでが長かったので、もっとイロイロやる事が残ってる気がしてました。
強いて言えば、調整（閉じる時に id を削除）を忘れないようにするぐらいか。
とりあえず、メニューをヘッダーの前に出しますか。
これ、トップページの時も似たようなことやったな～。
"α(ｱﾙﾌｧ)版" よりも前に来るように stylePrlt.css に以下を追加。
.bt-menu {
z-index: 803;
}
その時はヘッダーの中の一つの要素だけがスライドメニューより
前に来ちゃってて、単純にそれ（802）よりも z-index を大きくしたんですな。
となると・・・・何かちょっと変な感じがするが？
何はともあれ、私の売りは体当たりだし、F12開発ツールで見てみましょう。
要素の選択で、
この辺を選択。
見た目は手前に見えてるけど、z-index: 799; で、803 の .bt-menu より小さい！
一応その上の要素も。
やっぱり z-index: 800; で、803 より小さい！
そうなると・・・ .bt-menu の親方面の要素で負けてる？
あ、ちなみに私は z-index について詳しくないです。
いつもこのブログでやってるように、体当たりして体で覚えたことが殆どなので。
（z-index に限らず、全てに詳しくないって自分で言っちゃってますね ^^; ）
そんな私の勘が、
「.bt-menu の親要素、そのまた親要素・・・・
の中で、 z-index: 800; より小さいものがあれば、子要素の
.bt-menu が z-index: 803; であっても負けちゃうってことか？ 」
と言っています。
（若い子に比べて）老い先短いのですぐ試します！
今回の私の手法では、大分類（設定）と小分類（口座）のクリックイベント時に
jQuery でスライドメニューのクリックイベントを起こしているし、
スライドメニュー自体はposition: fixed; なので、
位置は変更しても問題無いはずです。
サンプル設定ページ１ のソース内で、
<nav class="bt-menu large_cate">
（中略）
</nav>
の位置を変更します。
変更後の位置
<div id="overlay">
（中略）
</div>
<nav class="bt-menu large_cate">
（中略）
</nav>
<div id="container">
（中略）
</div>
この状態でリロードして、大分類（設定）をクリック。
やっぱり前に出ましたね。（勘が当たりました。）
では次に行きます！
大分類（設定）のクリック時には、.large_cate に対して
id: bt-menu を追加することでスライドメニュー化しました。
その意図は小分類（口座）との切り替えを可能にするためです。
（口座をクリックした時は、同じ位置に別のスライドメニューが開くようにする。）
なので、スライドメニューを閉じる時に、追加した
id: bt-menu を削除してあげなければいけません。
今は、
大分類（設定）クリック前は id が無くて、
クリックして id が追加されてメニューが開き、
メニューを閉じても id は残ったままです。
var eventtype = mobilecheck() ? 'touchstart click' : 'click',
resetMenu = function() {
jQuery('#bt-menu').removeClass('bt-menu-open');
jQuery('#bt-menu').addClass('bt-menu-close');
if (typeof jQuery('.large_cate').attr("id") != 'undefined') jQuery('.large_cate').removeAttr('id');
};
id 要素がある時だけ削除するようにしました。
id が削除されるか確認します。
大分類（設定）のクリックで id が追加されてメニューが開き、
メニューを閉じたら、ちゃんと id が削除されました。
はい！
いよいよ最後です。一気に突き抜けるつもりで行きます！
小分類（口座）でも同じことができるようにします。
（大分類（設定）と同様にクリックでスライドメニューが同じ位置に開き、メニューの中身は別物に。）
まずは小分類（口座）用のスライドメニューを用意。
サンプル設定ページ１ のソース内の編集
<div id="overlay">
（中略）
</div>
<nav class="bt-menu large_cate">
（中略）
</nav>
<nav class="bt-menu small_cate">
<a href="#" class="bt-menu-trigger"><span></span></a>
<div class="divUlFrm">
<ul>
<li></li>
<li><a href="#" class="clickOverlay">口座</a></li>
<li><a href="#" class="clickOverlay">クレジットカード</a></li>
<li><a href="#" class="clickOverlay">電子マネー</a></li>
<li><a href="#" class="clickOverlay">項目（収入）</a></li>
<li><a href="#" class="clickOverlay">項目（支出）</a></li>
<li><a href="#" class="clickOverlay">Parllet</a></li>
<li><a href="#" class="clickOverlay">会員情報</a></li>
</ul>
</div>
<div class="bt-overlay"></div>
</nav>
<div id="container">
（中略）
</div>
クリックイベントは、ロジックは同じなので大分類（設定）と切り替える形にして、
閉じる時に id を削除する動きも追加します。
var eventtype = mobilecheck() ? 'touchstart click' : 'click',
resetMenu = function() {
jQuery('#bt-menu').removeClass('bt-menu-open');
jQuery('#bt-menu').addClass('bt-menu-close');
if (typeof jQuery('.large_cate').attr("id") != 'undefined') jQuery('.large_cate').removeAttr('id');
if (typeof jQuery('.small_cate').attr("id") != 'undefined') jQuery('.small_cate').removeAttr('id');
};
jQuery('#aLarge_cate, #aSmall_cate').on(eventtype, function() {
var strCate = this.id==='aLarge_cate' ? '.large_cate' : '.small_cate';
jQuery(strCate).attr('id', 'bt-menu');
jQuery('#bt-menu').children('a.bt-menu-trigger').click();
return false;
});
確認します！
リロード直後は大分類のメニュー（.large_cate）・小分類のメニュー（.small_cate）共に id 無し。
大分類（設定）のクリックで .large_cate に id 追加、メニューを閉じて id削除。
小分類（設定）のクリックで .small_cate に id 追加、メニューを閉じて id削除。
行けました。
私には珍しくすんなり突き抜けましたね・・。
まあ、実際はそんなに次元の高いことやってないですもんね。
自分がレベル低いから、いつもすったもんだしてるだけ ^^;
今回はここまでで、次回は（Parllet（パレット）では）しばらく
放ったらかしになっていた愛機の Android で最終確認したいと思います。
今回の体当たりでの学び
- 要素自身の z-index が大きくても親要素の z-index が小さい場合は、その親要素より大きい要素の方が手前に出てきてしまうようである。
次回に続きます！
1/8 追記
続きを書きました。
1/11 追記
まとめを書きました。
いつも最後まで読んでいただいてありがとうございますm(__)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0