xhml・html

レスポンシブWebデザイン 1カラムトップメニュー有り 現在位置

2019年03月20日
ネットビジネス便利ツール】のモバイル対応、1カラムでトップにメニューバーがあるケースです。
とは言っても、2カラムで左メニューがある場合とさほど変わりません。

マニュアル画面がこのタイプです。
このタイプは今までも1カラムで、上部にメニュー(ナビ)を表示していました。マニュアルなので説明部分の画面を広く取っていました。

引き続き全ての端末で1カラム表示にします。ただしPCととタブレットは幅768x、スマートフォンは画面一杯に表示にします。
左がPCとタブレット、右がスマートフォンです。
写真 写真

実際の画面です。
写真

2カラムページと同様に、スクロールしてもトップメニューを常に上部に表示します。
写真
レスポンシブWebデザイン 2カラム左メニュー有り 固定


時々自分が読んでいる箇所が文章内でどこに位置しているのかわかりにくい事があるので、現在位置がわかる一覧の表示を加えてみます。
写真
トップメニューの右側に【⇒項目】(矢印の向きが反対ですが)と表示して、クリックすると開いているページのhタグの一覧を表示し、現在位置を背景色を変えて表示します。スクロールに応じて背景色も移動させます。
hタグの一覧はリンクになっていて、idが設定されているhタグへはクリックで遷移します。

メニューの書き方や固定方法は2カラムと同じです。

現在ページのhタグはPHPから取得してリンク付きの一覧にしています。

スクロールに応じて該当するhタグ一覧の背景を変えるには、jQueryを使ってスクロールのたびに現在位置を取得します。

【jQuery】シングルページでナビゲーションに現在地を表示するを思いっきり参考して作りました。本当にありがとうございます。

ほとんどそのまま【jQuery】シングルページでナビゲーションに現在地を表示するのソースを利用させていただいています。

ネットビジネス便利ツール】ではトップメニューを常に上部に表示するので、それを考慮した位置にしないとトップメニュー分ずれてしまいます。

トップメニューの高さは変化するかもしれないので、その時の値を取得します。
jQueryでプラグインを使わずにそれなりにちゃんとしたスムーススクロールを実装するを参考にしました。
var down = $('#top_bar').outerHeight();
で取得できます。

参考ばかりです。はい、JavaScriptは苦手です。

メニューの高さ分の調整を【jQuery】シングルページでナビゲーションに現在地を表示するに加えたソースです。
idなどもサイトに合わせて変更しています。

jQueryを使っているので、下のJavaScriptを読み込む前に、jQueryを読み込んでおきます。

JavaScript --------------------------------------------
$(function() {
// hタグ一覧のaタグ(一覧はright-content内にあります)
var navLink = $('#right-content a');

// 各項目のページ上部からの開始位置と終了位置を配列に格納
var contentsArr = new Array();
for (var i = 0; i < navLink.length; i++) {
// 項目のIDを取得
var targetContents = navLink.eq(i).attr('href');
// ページ内リンクだけ位置を特定
if(targetContents.charAt(0) == '#') {
// ページ上部からコンテンツの開始位置までの距離を取得
var targetContentsTop = $(targetContents).offset().top;

// ページ上部からコンテンツの終了位置までの距離を取得
var targetContentsBottom = targetContentsTop + $(targetContents).outerHeight(true) - 1;

// 配列に格納
contentsArr[i] = [targetContentsTop, targetContentsBottom]
}
};

// 現在地をチェックする
function currentCheck() {
// 現在のスクロール位置を取得
var windowScrolltop = $(window).scrollTop();
for (var i = 0; i < contentsArr.length; i++) {
// 現在のスクロール位置が、配列に格納した開始位置と終了位置の間にあるものを調べる
if(contentsArr[i][0] <= windowScrolltop && contentsArr[i][1] >= windowScrolltop) {
// 開始位置と終了位置の間にある場合、ナビゲーションにclass="current"をつける
navLink.removeClass('current');
navLink.eq(i).addClass('current');
i == contentsArr.length;
}
};
}

// ページ読み込み時とスクロール時に、現在地をチェックする
$(window).on('load scroll', function() {
currentCheck();
});

// ナビゲーションをクリックした時のスムーズスクロール
navLink.click(function() {
//トップバーの高さを取得
var down = $('#top_bar').outerHeight();
$('html,body').animate({scrollTop: $($(this).attr('href')).offset().top-down}, 300);
return false;
})
});
------------------------------------------------------

スクロールのたびにaタグにcurrentクラスを設定してくれているので、後はcssで現在位置を示すcurrentのプロパティを設定すればOKです。

css ---------------------------------------------------
#right-content a.current {
background-color: #b0e0e6;

}
------------------------------------------------------

【jQuery】シングルページでナビゲーションに現在地を表示する、感謝いたします!!