上に示すように、ナビゲーションは上部に固定されており、左右にスライドしてさらにオプションをクリックできます。 これはかなりシンプルな制作であり、この記事ではいくつかの点についてのみ触れています。 固定位置 メニューは上部に固定され、移動しません。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を使用してカスタムタグタイトルツールチップを作成します
目次1. 簡単な紹介2. 間隔を設定する2.1 説明2.2 パラメータ2.3 戻り値2.4 使用法3...
構文の構成: 1 注釈情報2 コマンド --- パラメータ [通常は大文字 | 実際には大文字と小文...
実際のプロジェクトでは、上下のスクロール バーと左右のスクロール バーは DIV 内にないため、右の...
1. Apacheをインストールする # yum インストール -y httpd httpd-de...
プロジェクトで frameset 属性を使用したことがあるかどうかはわかりません。昨年、オンライン ...
この記事の例では、ログインインターフェース検証コードを実装するためのlayuiの具体的なコードを参考...
序文MySQL 5.7.11 以降、MySQL は、別の表領域に格納された InnoDB テーブルの...
絶対長さピクセルpx はピクセル値であり、メートルやセンチメートルのような固定の長さです。相対的な長...
前書き: MySQL でテーブルを設計する場合、MySQL では UUID や非連続かつ非繰り返しの...
Navicat クライアントを通じてデフォルトの日時値を変更する際に問題が発生しました。データベース...
目次エージェントとは何かプロキシの基礎知識ハンドラオブジェクトのメソッドプロキシでできること参考文献...
MongoDB のインストール プロセスと問題記録1. MongoDBのインストールMongoDBを...
必要: docker を使用して nginx + tomcat デュアル プロセスを起動します。実際...
IE で CSS3 を使用して角を丸くする方法を探していたときに、例を見つけました。まだテストして...
1. バックアップスクリプトを書く 著者:www.yumi-info.com 日付:20171222...