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ページの初回読み込み最適化の全プロセス

推薦する

JavaScript タイマーの詳細

目次1. 簡単な紹介2. 間隔を設定する2.1 説明2.2 パラメータ2.3 戻り値2.4 使用法3...

Dockerfile の一般的なコマンドの概要

構文の構成: 1 注釈情報2 コマンド --- パラメータ [通常は大文字 | 実際には大文字と小文...

カスタムスクロールバー効果を実現するJavaScript

実際のプロジェクトでは、上下のスクロール バーと左右のスクロール バーは DIV 内にないため、右の...

CentOS7 デプロイメント Flask (Apache、mod_wsgi、Python36、venv)

1. Apacheをインストールする # yum インストール -y httpd httpd-de...

HTML の iframe と frame の違いを例を使って説明します

プロジェクトで frameset 属性を使用したことがあるかどうかはわかりません。昨年、オンライン ...

Layuiはログインインターフェース検証コードを実装します

この記事の例では、ログインインターフェース検証コードを実装するためのlayuiの具体的なコードを参考...

MySQL InnoDB テーブルスペース暗号化の例の詳細な説明

序文MySQL 5.7.11 以降、MySQL は、別の表領域に格納された InnoDB テーブルの...

CSS における px、rem、em、vh、vw の違いを簡単に分析します

絶対長さピクセルpx はピクセル値であり、メートルやセンチメートルのような固定の長さです。相対的な長...

MySQL が uuid または snowflake id を主キーとして使用することを推奨しない理由の詳細な分析

前書き: MySQL でテーブルを設計する場合、MySQL では UUID や非連続かつ非繰り返しの...

MySQL で datetime 型のデフォルト値を設定する方法

Navicat クライアントを通じてデフォルトの日時値を変更する際に問題が発生しました。データベース...

JavaScript でのプロキシの使用を理解するための記事

目次エージェントとは何かプロキシの基礎知識ハンドラオブジェクトのメソッドプロキシでできること参考文献...

Linux インストール MongoDB の起動と一般的な問題の解決

MongoDB のインストール プロセスと問題記録1. MongoDBのインストールMongoDBを...

スーパーバイザーを使用して nginx + tomcat コンテナを管理する例

必要: docker を使用して nginx + tomcat デュアル プロセスを起動します。実際...

JS を使って CSS3 で丸い角を実装する方法

IE で CSS3 を使用して角を丸くする方法を探していたときに、例を見つけました。まだテストして...

Windows での MySQL の使用: 自動スケジュールバックアップの実装

1. バックアップスクリプトを書く 著者:www.yumi-info.com 日付:20171222...