QooQ のナビゲーションバーのメニュー項目に「サイドバー位置へジャンプ」を設置 (モバイル)
モバイル等の小さい画面だと「サイドバー」が「投稿一覧」や「個別記事」の下に移動してしまうため、
「サイドバー」の TOP位置に移動できるジャンプがあるといいと思い、隠し機能として設置しました。
モバイルで表示するときだけナビゲーションバーの一番右にハンバーガーマークが出現します。
これをタップするとサイドバー位置へジャンプします。
<div id='navigation-content'> を検索
その15行ほど下の方にある </b:loop> とその下の <ul> の間に以下のコードを挿入します。
<div id='navigation-content'> を検索
その15行ほど下の方にある </b:loop> とその下の <ul> の間に以下のコードを挿入します。
<!-- 「サイドバー位置へジャンプ」ハンバーガーマーク -->
<a href="#サイドバー" class="sidebar_jump" >≡</a>
<!-- ハンバーガーマーク 位置調整 -->
<style type="text/css">
a.sidebar_jump { /* 通常は表示しない */
display: none;
}
@media(max-width: 768px){ /* webの幅が 768px 以下ならば(モバイル想定) */
a.sidebar_jump {
display: block;
padding: 5px 0px 0px 0px;
}
}
</style>
便利な機能のはずですが、指の太い人は苦労するかもしれません。
0 件のコメント:
コメントを投稿