上に示すように、ナビゲーションは上部に固定されており、左右にスライドしてさらにオプションをクリックできます。 これはかなりシンプルな制作であり、この記事ではいくつかの点についてのみ触れています。 固定位置 メニューは上部に固定され、移動しません。position:fixed; top:0; left:0; を使用してください。また、次の点にも注意してください:
テーブルの使用 通常、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を使用してカスタムタグタイトルツールチップを作成します
<br />作業を簡単に完了できる Web ページ作成ツールは数多くありますが、HTML...
nginx 設定ファイルは主に 4 つの部分に分かれています。 main{#(グローバル設定) ht...
目次物語の始まりvimをインストールし、hadoop-hive.envを編集します。不注意で回避しま...
まず、Docker イメージ用の特定のプロジェクト ディレクトリを作成します。例: mkdir /h...
TypeScript を使用する場合、TypeScript が提供する型システムを使用してコードのあ...
この記事では、CentOS 7.4 サーバーで時刻同期を構成する方法について説明します。ご参考までに...
位置プロパティposition プロパティは、要素に使用する配置方法のタイプ (静的、相対的、固定、...
異なるブラウザ間でページの表示を一致させるためには、フロントエンド開発において CSS スタイルのク...
まず、VMware 14のアクティベーションコードをお渡ししますFF31K-AHZD1-H8ETZ-...
目次Kubernetesについて基本的な環境の準備VirtualBoxをインストールするUbuntu...
最近、社内の業務調整により、以前の超長文のロジックが大幅に変更されたため、リファクタリングする予定で...
目次背景:必要:効果1. アイデア2. 実装1. ページとスタイル2. 初期化3. クリックすると4...
目次1. 百度百科事典1. MySQL 2. PostgreSQL 3. MySQL に対する Po...
今日、CSS の zoom 属性は何のために使用されるのかと尋ねられました。この属性は、フローティン...
序文最近、友人がSQLを書くときにnull値を判定する方法が間違っていて、プログラム内のデータにエラ...