ナビゲーションバーに「サイドバー位置へジャンプ」(QooQ モバイル)-40年ぶりに水泳をやり始めたジジー・スイマー

QooQ のナビゲーションバーのメニュー項目に「サイドバー位置へジャンプ」を設置 (モバイル)

モバイル等の小さい画面だと「サイドバー」が「投稿一覧」や「個別記事」の下に移動してしまうため、
「サイドバー」の TOP位置に移動できるジャンプがあるといいと思い、隠し機能として設置しました。
モバイルで表示するときだけナビゲーションバーの一番右にハンバーガーマークが出現します。

これをタップするとサイドバー位置へジャンプします。

<div id='navigation-content'> を検索
その15行ほど下の方にある </b:loop> とその下の <ul> の間に以下のコードを挿入します。

  
<!-- 「サイドバー位置へジャンプ」ハンバーガーマーク -->
<a href="#サイドバー" class="sidebar_jump" >&#8801;</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>

便利な機能のはずですが、指の太い人は苦労するかもしれません。

ナビゲーションバーに「サイドバー位置へジャンプ」(QooQ モバイル)

QooQ のナビゲーションバーのメニュー項目に「サイドバー位置へジャンプ」を設置 (モバイル)

0 件のコメント:

プロフィール

このブログを検索

@TCOM

ラベル

アーカイブ

このブログで人気の投稿

これは超便利！ Emmet/ZenCoding - サクラエディタ用HTML作成補助ツール

【 highlight.js 】拡張！ボタン1つで全選択コピー他

2020 マスターズ実績

Blogger テンプレート QooQ カスタマイズ 06

外部リンク作成時のSEO・セキュリティ対策

コロナワクチン接種（ファイザー2回目）


	<!-- 「サイドバー位置へジャンプ」ハンバーガーマーク -->
	<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>