メニューを全幅CSSに引き伸ばす方法。全幅の美しい水平メニュー。ホタテ貝の適応メニュー

こんにちは。私は長い間、HTML/CSS の作業に関する記事を書いていませんでした。最近、新しいレイアウトを作成し始めたのですが、その過程で、メニューを柔軟にすることができる興味深いトリックを見つけました (新しい項目を追加できますが、サイズは増加しませんが、常にメニューの 100% になります)。親ブロック）。ということで、今日はCSSを使ってラバーメニューを実装してみます。

記事を読むのが面倒な方は、このビデオをご覧ください。著者はまた、すべてを非常にわかりやすく説明しています。

CSS を使用したラバーメニュー - ステップ 1

最初のステップは常に HTML マークアップですが、これがなければどうなるでしょうか? しかし、私たちの場合はすべてが単純になります。

メニューのブロックラッパー

箇条書きリスト (ul タグ) を通じて表示されるメニュー自体

メニュー項目は内部にあり、それに応じてすでにリンクがあります

すべてが明らかです。これが私のマークアップコードです。

以下のように、すべて標準的に見えます。

ここで、すべてを目的の形式に設定します。CSS が機能します。

ステップ 2 - 基本的なスタイル

次に、ラッパーブロックにスタイルを追加します。つまり、最大幅を 600 ピクセルに設定し (メニューが収まるようにスクリーンショットを撮りやすくするためです)、ブロックも中央に配置します。

包む（
背景: #fff;
最大幅: 600ピクセル;
マージン: 0 自動;
}

ステップ 3 - ゴムを装着する

それでは、メニュー自体を見てみましょう。マーカー (ul タグ) を削除し、背景に線形グラデーションを作成します。そして最も重要なこととして、display: table-row プロパティを使用して、メニューのコンテナーがテーブル行のように動作するようにします。これは、さらなる操作を行うために行うことが重要です。

Rメニュー(
背景: 線形グラデーション(右へ、#b0d4e3 0%、#88bacf 100%);
表示: テーブル行;
リストスタイル: なし;
}

ご覧のとおり、上記のコードは私が書いたすべてを解決しました。ちなみに、グラデーションはUltimate CSS Gradient Generatorツールを使って生成すると便利です。彼についてはまたいつか書きます。

Rメニュー(
垂直整列: 下;
表示: テーブルセル;
幅: 自動;
テキスト整列: 中央;
高さ: 50ピクセル;
ボーダー右: 1px ソリッド #222;
}

vertical-align:bottom - このプロパティは、メニュー項目内のテキストが 2 行になる場合に均等に表示されるようにするために必要です。メニューを作成するときに、このプロパティを削除し、項目が圧縮され、テキストが 2 行に移動されるようにズームインすると、表示上の問題が発生します。財産を返せばすべてうまくいきます。
display: table-cell - 表示メニュー自体をテーブル行に設定しているため、その項目がテーブル内のセルとして表示されるように設定するのが論理的です。これは必要である。
width: auto — 幅は段落内のテキストの長さに応じて自動的に計算されます。
text-align: center - これはテキストを内側の中央に配置するだけです
height: 50px — 高さを 50 ピクセルに設定します
まあ、border-right は右側の単なる境界線であり、項目の区切り文字です

ここまでのメニューは見苦しく見えますが、大丈夫です。今度はそれを思い出してみましょう。

最後に行うことは、アイテム内のリンクのスタイルを設定することです。ここにこのコードがあります:

R-メニューリア(
テキスト装飾: なし。
幅: 1000ピクセル;
高さ: 50ピクセル;
垂直配置: 中央;
表示: テーブルセル;
色: #fff;
フォント: 通常の 14px Verdana;
}

そして今のメニューはこんな感じです。

もう一度、いくつかの行について説明しましょう。

text-decoration プロパティは、リンクのデフォルトの下線をオーバーライドします。
width: 1000px はおそらく最も重要な行です。リンクをほぼこの幅に設定する必要があります。おそらくそれよりも狭いかもしれませんが、可能な限り幅の広いメニュー項目よりも確実に大きくする必要があります。幅は自動に設定されている li メニュー項目によって制限されるため、リンクの幅は 1000 ピクセルにはなりませんが、これにより、メニュー内の項目の数が常に 100 になるようにすることができます。幅のパーセント。
vertical-align: middle および display: table-cell - 1 つ目はテキストを垂直方向に中央に配置し、2 つ目はリンクもセルとして表示します。両方のプロパティが必要です。
font - まあ、これは単なるフォントの設定セットです。フォントの CSS プロパティについては、この記事をご覧ください。

ステップ 4 (オプション) インタラクティブ性を追加できます

たとえば、カーソルを置くとメニュー項目の色が変わるようにします。これは、hover 疑似クラスを使用して非常に簡単に実装できます。

R メニュー li:hover(
背景色: #6bba70;
}

メニューのゴムっぽさのテスト

メニューは準備できましたが、約束したように、最も重要なこと、つまりゴム状かどうかを確認していません。さて、メニューにさらに 2 つの項目を追加します。

メニューの幅は 600 ピクセルのままです。残りのアイテムは、2 つの新しいアイテムを収容するために少し縮小されただけです。

もう 1 つ長い点を追加します。

ご覧のとおり、メニューはさらに少し縮小され、長い項目が非常に正常に表示されます。そして、私が説明したvertical-align:bottomプロパティがなかったら、メニューの見た目はさらに悪化したでしょう。

メニューを3品に減らします。

品目はかなり自由になりましたが、メニュー自体の幅は変わりません。そこで100％ラバーメニューを作りました！

どうやって適応させるのか？

原則として、ラッパーブロックを固定幅ではなく最大幅に設定した場合は、調整する必要さえありません。私の場合、max-width プロパティ: 600px を持っており、幅が 600 ピクセル未満になると、ブロックは水平スクロールを形成せずに、画面とともに単純に縮小します。

モバイルデバイスやワイドスクリーンで何らかの方法でメニューを変更または修正したい場合は、メディアクエリが役に立ちます。ウェブサイト構築頑張ってください！

こんにちは

多くの場合、親ブロックに含まれる項目の数に関係なく、親ブロックの幅全体に広がる水平メニューを作成する必要があります。

今回はそんなメニューの作り方を紹介したいと思います。

したがって、メニューは次のようになります。

全幅に引き伸ばされ、カーソルを置くと目立ちます。メニューの側面は丸みを帯びています。

HTMLマークアップ

...

家

興味深いニュース

もう一品のメニュー！

メニューを全幅にするために、幅 100% のテーブルを使用しました。各テーブルにはメニュー項目の div コンテナがあります。最初、最後、または中間のメニュー項目が div であるかどうかに応じて、対応するクラスが割り当てられます。

各 div コンテナには、絶対位置を指定する 2 つの側面境界線があり、正しく表示するために必要です。標準の枠線を使用すると、メニュー項目を切り替えるとテキストが 1 ～ 2 ピクセル移動しますが、これは問題ありません。

アクティブなクラスは選択されたメニュー項目を担当し、それを強調表示します。

各アイテムには写真とテキストが含まれています。これらすべてが厳密に垂直方向の中央に位置合わせされるようにするために、テーブルを使用します。垂直方向の配置プロパティのおかげで、メニュー項目は常にスムーズに表示され、離れていくことはありません。

CSS ルール

まず、メニューの一般的な表示のスタイルを設定しましょう。

Menu_container (padding-top: 40px; width: 100%; height: 47px; border-spacing: 0px; ) .menu_container td (vertical-align: middle; /* 垂直方向の配置 */ ) .last_point_menu, .first_point_menu, .middle_point_menu (幅: 100%; 高さ: 47px; ボーダー: 1px ソリッド #dadbda; z-index: 1000; 位置: 相対; ボーダー左: なし; ) .inner_table (幅: 100%; 高さ: 100%; ) .inner_table td ( パディング: 0px; 垂直整列: 中央; ボーダー: なし; テキスト整列: 左; 幅: 150 ピクセル; パディング左: 4ピクセル; ) .td.inner_table_title ( パディングトップ: 4ピクセル; フォントの重み: 太字; ) .td.inner_table_img ( 幅: 40px!重要; ) .inner_table_menu ( 高さ: 100%; パディング: 0px; 垂直整列: 中央; 境界線: なし; テキスト整列: 左; ) .inner_table_title ( パディング左: 10px; )パディング右: 10ピクセル; テキスト変換: 大文字; 行の高さ: 13ピクセル; ) .inner_table_menu td.inner_table_img (幅: 30ピクセル!重要; 高さ: 30ピクセル!重要; パディング左: 15ピクセル; )

美しく見せるために、メニューの側面の角を丸くしましょう。

First_point_menu ( -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 1pxソリッド #dadbda; ) .last_point_menu ( -webkit-border-top-right-radius: 5px; -webkit-border -bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px ; ）

メニューの見た目がさらに美しくなりました。

これまでのところ、最初の点には左側の境界線がありません。少し後で修正します。

次に、メニューにホバー効果を追加しましょう。

Middle_point_menu:hover、.last_point_menu:hover、.first_point_menu:hover、.middle_point_menu.active、.last_point_menu.active、.first_point_menu.active、.middle_point_menu.active ( 背景色: #CAE285; 背景画像: -moz-linear- gradient(top, #CAE285, #9FCB56); 背景画像: -webkit-gradient(linear, 0 0, 0 100%, from(#CAE285), to(#9FCB56)); 背景画像: -webkit-linear -gradient(上, #CAE285, #9FCB56); 背景画像: -o-linear-gradient(上, #CAE285, #9FCB56); 背景画像: 線形グラデーション(下へ, #CAE285, #9FCB56); border: 1px Solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; border-left: none; z-index: 5000; ) /* ホバー時に境界線を計算します */ .first_point_menu ( border: 1px Solid #dadbda ; ) .first_point_menu:hover, .first_point_menu.active ( ボーダー: 1px ソリッド #9FCB56; ボーダーカラー: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( ボーダー: 1px ソリッド #dadbda; ボーダー左: なし; ) .last_point_menu :hover ( ボーダー: 1px ソリッド #9FCB56; ボーダー左: なし; 境界線の色: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active (border-left: none; )

メニューの見た目はかなり良くなりましたが、今のところ、強調表示されたメニュー項目には枠線がありません。これを修正しましょう!

/* サイドボーダーのスタイル */ .borderLeftSecond, .borderRightSecond (表示: なし; 位置: 絶対; 幅: 1px; 高さ: 47px; 背景色: #9fbb62; トップ: 0px; z-index: 1000; ) /*境界線の絶対オフセット */ .borderLeftSecond ( left: 0px; ). , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond ( display: block; ) /* 次のケースを処理します最初と最後の項目 */ .first_point_menu.active .borderLeftSecond (表示: none; ) .last_point_menu.active .borderRightSecond (表示: none; ) .last_point_menu:hover .borderLeftSecond (表示: block; )

それだけです！

親ブロックの幅全体に広がる素晴らしいメニューができました。マウスを移動しても項目が重なり合わず、レイアウトがジャンプしません。

このシリーズでは、ドロップダウンメニューに関するレッスンを続けます。次は、CSS を使用した自分で作る水平ドロップダウンメニューです。

偶然ここにたどり着いた場合、またはドロップダウンメニューの別の実装を探していた場合は、親セクションに移動することをお勧めします。

このセクションでは、CSS と HTML の水平ドロップダウンメニューについて説明します。

ページナビゲーション:

それで、 私たちの任務:

jQueryとJavaScriptを使用せず、テーブルも使用せずに、ドロップダウンリストCSS（ul liリスト上）で水平メニューを作成します。

コードの中で。

ドロップダウン水平メニューhtml

まず、コードを書き始める前に、メニューの HTML テンプレートを作成する必要があります。

ユニバーサルメニューを作成しているため、WordPress のメニュー出力とできるだけ似たメニューにしたいと考えています。私の意見では、これは最もシンプルで最も汎用性の高い Html メニューコードの 1 つです。次のようになります。

家
私たちについて
私たちのサービス
- 当社のサービスNo.1
- 私たちのサービスその２
- 私たちのサービスその3
- 私たちのサービスその4
- サービス5
ニュース
連絡先

コードからわかるように、ドロップダウンメニューは ul リストと li リストに実装されます。 CSS スタイルを使用しないメニューは次のようになります。

正直に言うと、見た目は普通のリストと同じで見苦しいです。次に、CSS スタイルを使用してこのメニューを装飾する必要があります。

CSS の水平ドロップダウンメニュー

ドロップダウンメニューなどの CSS スタイルは、必要不可欠なものです。結局のところ、ドロップダウンタブは擬似クラス:hover に基づいて作成されています。

水平ドロップダウンメニューの場合は、次のスタイルが必要です。

#menu1( 位置:相対; 表示:ブロック; 幅:100%; 高さ:自動; z-インデックス:10; ) #menu1 ul( 位置:相対; 表示:ブロック; マージン:0px; パディング:0px; 幅:100 %; 高さ:自動; リストスタイル:なし; 背景:#F3A601; ) #menu1 > ul::after( 表示:ブロック; 幅:100%; 高さ:0px; クリア:両方; コンテンツ:" "; ) # menu1 ul li( 位置:相対; 表示:ブロック; フロート:左; 幅:自動; 高さ:自動; ) #menu1 ul li a( 表示:ブロック; パディング:9px 25px 0px 25px; font-size:14px; font-ファミリー:Arial、サンセリフ; カラー:#ffffef; 行の高さ:1.3em; テキスト装飾:なし; フォントの重さ:太字; テキスト変換:大文字; 高さ:36px; ボックスサイズ:ボーダーボックス; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a(background:#EBBD5B; color:#2B45E0; )

これはまだ終わりではなく、メインの水平メニューの CSS の一部にすぎません。次に、メニュードロップダウンリストのスタイルを記述します。

#menu1 ul li ul(position:absolute;top:36px;left:0px;display:none;width:200px;background:#EBBD5B;) #menu1 ul li:hover ul(display:block;)/*この行は実装しますドロップアウトメカニズム*/ #menu1 ul li ul li( float:none; width:100%; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 25px; width: 100%; box-sizing:border-box; border-top:1px Solid #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li ul li a: hover(背景:#FDDC96; カラー:#6572BC; )

それが今です。ドロップアウトメカニズム自体は 1 行で実装されます。

このメニューでスキンを表示します。

米。 2 (水平ドロップダウンメニュー)

以下は、ドロップダウンメニューがどのように機能するかのデモと、ソースをダウンロードするためのリンクです。 (デモはこのページの上部にあるドロップダウンで開きます。新しいウィンドウで開くをクリックする必要はありません 🙂 またはマウスホイール)

全幅の水平ドロップダウンメニュー

皆さんのほとんどは、上に示したようなメニューは過去の挨拶であり、部分的には正しい、と私を非難するかもしれませんが、私はそのようなメニューを含む最近のレイアウトを見てきました。

上記のサンプルをダウンロードしていただければ幸いです。 HTML は同じままですが、CSS を完全に変更します。ここから CSS コードを取得して、ダウンロードしたサンプルに貼り付けるか、デモモードでその動作を確認することができます。

#container( 幅:1000px; 高さ:自動; マージン:0px 自動; パディングトップ:10px; ) #menu1( 位置:相対; 表示:ブロック; 幅:100%; 高さ:自動; z-index:10; ) #menu1 ul( 位置:相対; 表示:ブロック; マージン:0px; パディング:0px; 幅:100%; 高さ:自動; リストスタイル:なし; 背景:#F3A601; ) #menu1 > ul( text-align: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li(position :relative;display:inline-block;width:auto;height:auto;vertical-align:top;text-align:left; ) #menu1 ul li a(display:block;padding:9px 35px 0px 35px; font-size :14px; font-family:Arial、sans-serif; color:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a(background:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul(position:absolute; top:36px; left :0px; ディスプレイ:なし; 幅:自動; 背景:#EBBD5B; ホワイトスペース:ナラップ; ) #menu1 ul li:last-child ul(/*最後の項目は右端に付加されます*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*this line はドロップアウト*/ #menu1 ul li ul li(display:block; width:auto; ) #menu1 ul li ul li a(display:block; text-transform:none; height:auto; padding:7px 35px; ) メカニズムを実装します。 width:100% ; box-sizing:border-box; border-top:1px Solid #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li ul li a: hover(背景: #FDDC96; カラー:#6572BC; )

この例は、ドロップダウンメニュー (ドロップダウン自体) がすべてのメニュー項目の幅に応じて伸びるという点でも最初の例とは異なります。

非常に長いメニュー項目の場合、制限を超えてしまうため、このオプションはあまり便利ではない可能性があります。このプロパティを無効にするには、プロパティ「white-space:nowrap;」を見つけるだけです。セレクター #menu1 ul li ul を選択して削除します。

以下でデモを見るか、水平ドロップダウンメニューのソースをダウンロードできます。

区切り文字がなければ、このメニューはまあまあに見えます。セパレータは HTML に手動で追加できますが、WordPress などの CMS を使用している場合、手動で追加するのはあまり便利ではありません。

仕切りのある水平方向のドロップダウンメニュー

純粋な CSS を使用してメニュー項目間にストライプ (セパレータ) を追加するには、数十のオプションがあります。 ::before または ::after を使用するオプション、あるいはより単純な border-left や border-right を使用するオプションは複製しません。

レイアウトが非常に素晴らしく構築されているため、jquery なしでは作業できない場合があります。

HTML コードは同じままで、jQuery ライブラリとそれを使用するファイルを最初に含めるだけです。

直後の。

ご存知のとおり、ファイルを作成する必要があります スクリプトメニュー-3.jsそこに次の小さなコードを追加します。

$(document).ready(function())( $("#menu1 > ul > li:not(:last-child)").after(" "); ));

このようなメニューの CSS スタイルはそのままにし、この部分を最後に追加する必要があります。

#menu1 ul li.razd( 高さ:28px; 幅:1px; 背景:#ffffff; マージントップ:4px; )

jQuery の区切り文字を含む水平ドロップダウンメニューは次のようになります。

デモモードで表示することも、以下の水平メニューテンプレートをダウンロードすることもできます。

このソリューションの利点は次のとおりです。

メニューは動的に描画されます。
区切り文字から段落までのインデントはどこでも同じです。
より美しく、より柔軟なデザイン。

水平方向の複数レベルのドロップダウンメニュー CSS+HTML

ここではホバー時の複数レベルのドロップダウンメニューについて説明しているため、それらをサブグループに分割する価値があると考えられます。

横を向いたときにvipパッドで

3 番目のレベルのポップアップドロップダウンを使用

この例では、3 レベルのマルチレベル CSS メニューを示します。その後、何をする必要があるかを推測するのは難しくないと思います。

ホバー上のサイドバーを備えた複数レベルのドロップダウンメニュー

まず、HTML を少し修正する必要があります。レベル 3 については、いくつかの行が追加されます。

家
私たちについて
私たちのサービス
- 当社のサービスNo.1
  - サービス追加1
  - サービス追加2
- 私たちのサービスその２
  - サービス追加3
  - サービス追加4
- 私たちのサービスその3
- 私たちのサービスその4
- サービス5
ニュース
連絡先
- ロードマップ
  - 地図アドオン
  - マップ2の追加
- フィードバックフォーム

#container( 幅:1000px; 高さ:自動; マージン:0px 自動; パディングトップ:10px; ) #menu1( 位置:相対; 表示:ブロック; 幅:100%; 高さ:自動; z-index:10; ) #menu1 ul( 位置:相対; 表示:ブロック; マージン:0px; パディング:0px; 幅:100%; 高さ:自動; リストスタイル:なし; 背景:#F3A601; ) #menu1 > ul( text-align: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li(position :relative; 表示:インラインブロック; 幅:自動; 高さ:自動; 垂直整列:トップ; テキスト整列:左; ) #menu1 ul li.razd( 高さ:28px; 幅:1px; 背景:#ffffff; margin-top:4px; ) #menu1 ul li a(display:block;padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans-serif; color:#fffff; line-height:1.3 em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a (背景:#EBBD5B; 色:#2B45E0; ) #menu1 ul li ul(位置:絶対; トップ:36px; 左:0px; 表示:なし; 幅:自動; 背景:#EBBD5B; ホワイトスペース:nowrap; ) #menu1 > ul > li:last-child > ul(/*最後の項目は右端に追加されます*/ left:auto; right:0px; ) #menu1 ul li:hover > ul(display:block;)/*この行はドロップアウトメカニズムを実装します* / #menu1 ul li ul li(display:block; width:auto; ) #menu1 ul li ul li a(display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box -sizing:border-box ; border-top:1px Solid #ffffff; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a(background:#FDDC96; color:#6572BC; ) #menu1 ul li ul li ul(top:0px; left:100%; display:none; background:#fddc96; ) #menu1 > ul > li:last-child > ul ul(left:auto; right:100%;) #menu1 ul li ul li ul a(color:#F38A01;)

jQuery のファイルを前の例と同じようにコピーします。メニューの見栄えが少しでも良くなるように、仕切りを残すことにしました。もちろん、それらなしでも実行できます。

こうなったのです。
ドロップが右側と中央でどのように見えるかを示すために、2 つのスキンを 1 つに作成しました。

以下でデモを視聴し、例をダウンロードできます。

ホバー上のポップアップパッドを備えたマルチレベルのドロップダウンメニュー

タイトルには少し油が入っていますが、問題なく動作します。重要なのはコードです。

この例の本質は、全幅のドロップダウン + マルチレベルを備えた全幅の水平ドロップダウンメニューを作成することです。

HTML コードは変更しません。前の例から取得できます。 jQuery には区切り文字も残しておきます。

CSS のみが完全に変更されます。

#container( 幅:1000px; 高さ:自動; マージン:0px 自動; パディングトップ:10px; ) #menu1( 位置:相対; 表示:ブロック; 幅:100%; 高さ:自動; z-index:10; ) #menu1 ul( 位置:相対; 表示:ブロック; マージン:0px; パディング:0px; 幅:100%; 高さ:自動; リストスタイル:なし; 背景:#F3A601; ) #menu1 > ul( text-align: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li(position :relative; 表示:インラインブロック; 幅:自動; 高さ:自動; 垂直整列:トップ; テキスト整列:左; ) #menu1 > ul > li(position:static;) #menu1 ul li.razd( height :28px; width:1px;background:#ffffff; margin-top:4px; ) #menu1 ul li a(display:block;padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans- serif; color:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a(background:#EBBD5B; 色:#2B45E0; ) #menu1 ul li ul( 位置:絶対; トップ:36px; 左:0px; 表示:なし; 幅:100%; 背景:#EBBD5B; ) #menu1 > ul > li > ul::after( clear:both; float:none; width:100%; height:0px; content:" "; ) #menu1 ul li:hover > ul(display:block;)/*この行はドロップアウトメカニズムを実装しています*/ #menu1 ul li ul li( 表示 : ブロック; 幅: 30%; フロート: 左; ) #menu1 ul li ul li a( 表示:ブロック; テキスト変換: なし; 高さ: 自動; パディング: 7px 45px; 幅: 100%; ボックス- sizing:border -box; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a(background: #FDDC96; color:#6572BC; ) #menu1 ul li ul li ul(top:0px; left:100%; display:none; background:#fddc96; z-index:15; ) #menu1 ul li ul li ul li (表示: ブロック; フロート: なし; 幅: 100%;) #menu1 ul li ul li ul a( color:#F38A01; border-top:1px Solid #ffffff; )

メニューは次のようになります。唯一のポイントは、右側の最後の項目にはドロップダウン用のスペースがないため、サイトに十分なスペースが必要であるということです。この問題は:nth-child を使用して解決できますが、私は気にしませんでした。

水平マルチレベルドロップダウンメニューのデモを参照してください。

お気づきかもしれませんが、下のダイも全幅です。このようにして、複数のブロックに分割されたドロップが作成されます。

私にとってはこれで終わりです。私の例の少なくとも 1 つがあなたに合えば幸いです。ご清聴ありがとうございました。

それは彼らと私両方の利益になります:)

投稿全体を読んでも、CSS で独自の水平ドロップダウンメニューを作成する方法が見つからなかった場合は、コメントで質問するか、サイト検索を使用してください。

また、親ページ https://site/vypadayushhee-menu/ にアクセスすることをお勧めします。ドロップダウンメニューのすべての例と種類がそこに集められています。

水平メニューは Web サイトのセクションのリストであるため、要素内に配置する方が合理的です

デフォルトでは、すべてのリスト要素は垂直方向に配置され、コンテナ要素の幅全体を占め、コンテナ要素の幅全体がコンテナブロックの幅全体を占めます。

水平ナビゲーション用の HTML マークアップ

メニュー項目
メニュー項目
メニュー項目

タグ内にある水平メニューは、さらに ... および/または ... 要素内に配置できます。このおかげで、HTML マークアップには意味的な意味が与えられ、メニューブロックをフォーマットする追加の機会も提供されます。

水平に配置するにはいくつかの方法があります。まず、ナビゲーション要素のデフォルトのブラウザスタイルをリセットする必要があります。

Ul ( list-style: none; /* リストマーカーを削除します*/ margin: 0; /* 1em に等しい上下のマージンを削除します*/ padding-left: 0; /* 40px に等しい左のパディングを削除します*/ ) a ( text-decoration: none; /*リンクテキストの下線を削除*/)

リスト要素を小文字にする。その結果、それらは水平に配置され、それらの間の右側に 0.4em のギャップが追加されます (フォントサイズに応じて計算)。これを削除するには、 li li (margin-right: -4px;) に負の右マージンを追加します。次に、必要に応じてリンクのスタイルを設定します。

リスト要素をフローティングにします。その結果、それらは水平に配置されます。コンテナブロックulの高さはゼロとなる。この問題を解決するには、(overflow: hidden;) を ul に追加して拡張し、浮動要素を含めることができるようにします。リンクの場合は、(display: block;) を追加し、必要に応じてスタイルを設定します。

リスト要素をインラインブロック化します。最初のケースと同様に、それらは水平に配置され、右側にギャップが形成されます。リンクの場合は、(display: block;) を追加し、必要に応じてスタイルを設定します。

を使用して ul リストをフレキシブルコンテナにします。その結果、リスト要素は水平方向に配置されます。リンクに (display: block;) を追加し、必要に応じてスタイルを設定します。

サイトメニューの非常に一般的なレイアウトで、そのコンテナがページ上で使用可能な幅全体を占める場合。この場合、最初の項目は左端に隣接し、最後の項目は右端に隣接し、すべての要素間の距離は等しくなります。今日はこれがどのように行われるかを説明します。

リソースに CSS を使用してラバーメニューを実装する例を示します。このメニューでは、項目は 1 行に配置されます。 Javascriptは使用されません。メニューの内容は通常のリストに同封されます。このようなメニューの主な特徴はその多用途性であり、項目の数と長さの両方を任意にできるという事実で表されます。

各プログラマーは、特定の問題を解決する独自の方法を提供できます。それはすべて彼の想像力、プロ意識、能力のレベルに依存します。この問題に対する最も一般的な解決策は、テーブルを使用することです。また、多くの人が JavaScript の使用を推奨します。値 table または table-cell で表示プロパティを使用することを提案する人たちを残念に思います。この方法は、ブラウザ間の互換性が十分ではありません。

私たちのサービスは、HTML5 と CSS3 の知識の強固な基盤に基づいて構築されます。

このプロセスの本質は、text-align プロパティと justify 値に基づいています。忘れてしまった人のために思い出してください。このプロパティは、コンテナの幅全体にわたるテキストの配置を調整します。

当社のソリューションを使用する場合、2 つの必須ルールに従う必要があります。 1 つ目は、メニュー項目コンテナの幅がテキストより小さくなければならないということです。つまり、一行ではありません。 2 番目の重要なルールは、単語が同じポイントに属しているかどうかに関係なく、単語が均等に引き伸ばされるということです。

以下は、ラバーメニューの作成例として機能するコードです。

HTML

< ul> < li>< a href= "#" >家< li>< a href= "#" >ブログ< li>< a href= "#" >ニュース< li>< a href= "#" >人気のある< li>< a href= "#" >新しいアイテム

ul ( text- align: justify; overflow: hidden; /* メソッドの副作用を排除します */ height: 20px; /* 不要な要素も排除します */cursor:default ; /* カーソルの初期形状を設定します */ margin : 50px 100px 0 100px; 背景: #eee; パディング: 5px; ) li ( display: inline; /* メニュー項目をテキストにします */ ) li a ( display: inline- block; /* メニュー内の単語の区切りを削除します */ color: #444; ) a : hover ( color: #ff0000; ) ul: after ( /* メソッドを計算するために 2 行目を形成 */ content: "1" ; margin-left: 100 %; height: 1px;オーバーフロー: 非表示; 表示: インラインブロック; )

古き良き Internet Explorer で作業するには、さらに次のコードを CSS に追加する必要があります。

ul ( z-index:expression(runtimeStyle.zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" >")); ) ul .last ( margin-left: 100%; ) * html ul ( /* ie6 のみが必要 */ height: 30px; )

必要なプロパティ値とコードを指定すると、次のラバーメニューが表示されます。

ボリュームコード
クラスセレクターを通じて要素のアクティブ状態を判断できない。これは、段落内の単語の区切り (存在する場合) によって発生します。この問題の解決策は、リスト要素内に別のコンテナを追加することです。
ドロップダウンメニューの場合は、 overflow の悪影響があるため、コードをカスタマイズする必要があります。