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

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 をよろしくお願いいたします。

<<:  シンプルなjQuery + CSSを使用してカスタムタグタイトルツールチップを作成します

>>:  Vueページの初回読み込み最適化の全プロセス

推薦する

HTML ウェブページ作成のための 8 つの強力なテクニック

<br />作業を簡単に完了できる Web ページ作成ツールは数多くありますが、HTML...

nginx設定ファイルの解釈の詳細な説明

nginx 設定ファイルは主に 4 つの部分に分かれています。 main{#(グローバル設定) ht...

dockerコンテナにvimをインストールするソリューション

目次物語の始まりvimをインストールし、hadoop-hive.envを編集します。不注意で回避しま...

Docker で Python スクリプトを実行する方法

まず、Docker イメージ用の特定のプロジェクト ディレクトリを作成します。例: mkdir /h...

TypeScript でオブジェクト キーの値の範囲を制限する方法

TypeScript を使用する場合、TypeScript が提供する型システムを使用してコードのあ...

Centos 7.4 サーバーの時刻同期設定方法 [NTP サービスに基づく]

この記事では、CentOS 7.4 サーバーで時刻同期を構成する方法について説明します。ご参考までに...

CSSポジションの5つの異なる値の使い方の詳細な説明

位置プロパティposition プロパティは、要素に使用する配置方法のタイプ (静的、相対的、固定、...

CSS スタイルのリセットとクリア (異なるブラウザで同じ効果を表示するため)

異なるブラウザ間でページの表示を一致させるためには、フロントエンド開発において CSS スタイルのク...

最新の仮想マシン VMware 14 インストール チュートリアル

まず、VMware 14のアクティベーションコードをお渡ししますFF31K-AHZD1-H8ETZ-...

VirtualBox+Ubuntu16でKubernetesクラスタを構築する実装

目次Kubernetesについて基本的な環境の準備VirtualBoxをインストールするUbuntu...

Vue+ElementUI で超大規模なフォーム例を処理する方法

最近、社内の業務調整により、以前の超長文のロジックが大幅に変更されたため、リファクタリングする予定で...

WeChatアプレットはシンプルな手書き署名コンポーネントを実装します

目次背景:必要:効果1. アイデア2. 実装1. ページとスタイル2. 初期化3. クリックすると4...

実用的な MySQL + PostgreSQL バッチ挿入更新 insertOrUpdate

目次1. 百度百科事典1. MySQL 2. PostgreSQL 3. MySQL に対する Po...

CSS における zoom:1 属性の定義と機能

今日、CSS の zoom 属性は何のために使用されるのかと尋ねられました。この属性は、フローティン...

MySQLの空の値とnull値の違いを知っていますか?

序文最近、友人がSQLを書くときにnull値を判定する方法が間違っていて、プログラム内のデータにエラ...