前回はモバイル表示を確認し、メニューを表示させるところまでやりました。
ですが、ページリストはメニューをセレクトボックスで表示していました。そちらの方がメニューが場所をとらなくて良いと思ったので、今回はその修正をしようと思います。
同じにする……だけでいい？
では早速、モバイル表示の時だけ <ul><li> 要素が <select><option> 要素になるように変更します。
しました。
css も変更して、メニューのデザインも反映されるようにしています。さて、これでページリストと同じ挙動になっているのですが……実は、ページリストの仕組が使い勝手的に良いかというと、そうでもないシーンがあります。
それはページリストにないページを見ているときです。
ページリストにないページを閲覧しているとき、<select> 要素にその項目は存在しないので、先頭にある [ホーム] が選択状態になってしまいます。
今見ているページはホームではないですから、ちょっと変ですよね。さらに困ったことに、こうなるとメニューを使ってホームに戻ることができないんです。
<select> 要素で使われている onchange イベントは、今と違う項目を選択した時に発生するものなので、ホームが最初から選択状態になっているとホームに戻れません。
今表示しているページはホームではないのに [ホーム] が選択状態になっていて、メニューから [ホーム] を選択してもホームに戻れない。Blogger ではこの動作がデフォルトになっているのが、ちょっと物足りないところです。
別にメニューを使わなくてもホームに戻る手段があるんだからいいじゃん？ と思う方はこれでいいのですが、私は気になっちゃう性格なのでこの点も改良していきます。
改良の方針
先頭に [▼メニュー] 項目を追加して、これを常に初期選択状態にしようと思います。
この項目自体は選択しても何の意味もなく、初期選択状態なので選択することができません。これで不具合の解決に加えて、 「これがメニューだな」 と気が付きやすくなりました。
もうちょっと親切にするため、現在のページには選択状態の代わりに印をつけておきます。今回は 「(現在のページ)」 にします。
これでモバイル版のラベルリストメニューの完成です！
コード
今回もテンプレートを書き換えましたので、変更前後のコードを載せておきます。
<b:widget id='Label1' locked='true' mobile='yes' title='ラベル' type='Label' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2>
<data:title/>
</h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<li expr:class='data:blog.url == data:blog.homepageUrl ? "selected" : ""'>
<a expr:dir='data:blog.languageDirection' expr:href='data:blog.homepageUrl'>
ホーム
</a>
</li>
<b:loop values='data:labels' var='label'>
<li expr:class='data:blog.url == data:label.url ? "selected" : ""'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>
(
<data:label.count/>
)
</span>
</b:if>
</a>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>
(
<data:label.count/>
)
</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget><b:widget id='Label1' locked='true' mobile='yes' title='ラベル' type='Label' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2>
<data:title/>
</h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<b:if cond='data:blog.isMobile'>
<select expr:id='data:widget.instanceId + "_select"' onchange='if (event.target.value != "") location.href = event.target.value;'>
<option value=''>
&#9660; メニュー
</option>
<option expr:value='data:blog.homepageUrl'>
ホーム
<b:eval expr='data:blog.url == data:blog.homepageUrl ? " (現在のページ)" : ""'/>
</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'>
<data:label.name/>
<b:eval expr='data:blog.url == data:label.url ? " (現在のページ)" : ""'/>
</option>
</b:loop>
</select>
<b:else/>
<ul>
<li expr:class='data:blog.url == data:blog.homepageUrl ? "selected" : ""'>
<a expr:dir='data:blog.languageDirection' expr:href='data:blog.homepageUrl'>
ホーム
</a>
</li>
<b:loop values='data:labels' var='label'>
<li expr:class='data:blog.url == data:label.url ? "selected" : ""'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>
(
<data:label.count/>
)
</span>
</b:if>
</a>
</li>
</b:loop>
</ul>
</b:if>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>
(
<data:label.count/>
)
</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>html .tabs-inner .widget select {
padding: .6em .6em;
font: $(tabs.font);
color: $(tabs.text.color);
line-height: 16px;
-moz-appearance: menulist;
-webkit-appearance: menulist;
appearance: menulist;
}css については、ベースにしているテンプレート次第で変数や値が変わるかもしれません。また、セレクタに html を入れていますが、デフォルトの css が html からのセレクタになっていて、 html を省くとそちらが優先されてしまうからです。
デフォルトの css で appearance: none が指定されているのがちょっといやらしいです。表示する内容やデザインによってはセレクトボックスに見えないので、こだわりが無ければ無効化しておきます。 appearance: menulist はメニューリストを本来あるべき姿に戻すおまじないです。
以上です！
次回は……ベースにしているテンプレートを変えてみようかな～。
0 件のコメント :
コメントを投稿