CSS を使用して固定ナビゲーションと左右スライドを備えたスクロール バーを作成する方法

上に示すように、ナビゲーションは上部に固定されており、左右にスライドしてさらにオプションをクリックできます。

これはかなりシンプルな制作であり、この記事ではいくつかの点についてのみ触れています。

固定位置

メニューは上部に固定され、移動しません。position:fixed; top:0; left:0; を使用してください。また、次の点にも注意してください:

• 下のリストを対応する位置まで下に移動してください。そうしないと、ページを開いたときに下のリストの一部が隠れてしまいます。
• メニューの背景を設定します。背景が透明の場合、下のリストから上にスクロールするコンテンツと重なってしまいます。
• 本文の背景を設定します。WeChat ブラウザにはデフォルトの背景色 (白ではない) があるため、エフェクトと競合する可能性があります。必要に応じて背景を設定してください。

テーブルの使用

通常、float には ul と li を使用しますが、1 行が表示できない場合に 2 行目に落ちないようにするのは面倒なので、table を使用することをお勧めします。

以下は CSS コード全体です。.wrapper は外側のレイヤーで、.nav と .list は兄弟です。

本体、.wrapper 
{ 
背景:#fff; 
}

.nav 
{ 
位置:固定; 
トップ:0;
 左:0; パディング:0; 
幅:100%; 
高さ:60px; 
オーバーフロー-x:スクロール; 
背景:#fff; 
}
.nav テーブル 
{ 
幅:720ピクセル;
 境界線の折りたたみ:折りたたみ;
 }
.nav テーブル td 
{
 パディング上部:10px; 
パディング下部:10px; 
幅:80ピクセル; 
テキスト配置:中央; 
}
.nav テーブル td a 
{ 
行の高さ:40px; 
フォントサイズ:14px; 
フォントの太さ:太字; 
}
.nav テーブル td.cur a 
{ 
ボックスのサイズ:境界線ボックス; 
境界線下部:2px 実線 #f07515; 色:#f07515; 
}

。リスト 
{ 
上マージン:60px; 
}

動的に制限された幅

上記の CSS コードは、テーブルを 720px に設定しています。これは、9 tds の幅です。通常、メニューの数は固定されているため、このように設定します。ただし、固定されていない場合は、JavaScript 設定方法など、プログラムを使用して動的に設定できます。

$(".header table").width($(".header table td").length * $(".header table td").width());

次のメニュー項目を選択すると、次のメニュー項目が表示されます

Ajax 以外のページの場合、背後のメニュー ページをクリックすると、ページが更新され、左端のメニュー項目が表示されます。JavaScript を使用してメニュー項目をスクロールし、現在選択されている項目を表示できます。サンプル コードは次のとおりです。

var カウント = 0;
$(".header table td").each(function () {
	$(this).hasClass("cur") の場合 {
		false を返します。
	}
	カウント++;
});
if (count >= 3) { // 最初のいくつかが選択されている場合はスクロールしません count -= 2; // 左端までスクロールする必要はありません $(".header").get(0).scrollLeft = count * $(".header table td").width();
}

要約する

CSS で固定ナビゲーションと左右スライドスクロールバーを作成する方法についての記事はこれで終わりです。CSS ナビゲーション固定左右スライドスクロールバーの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。