サイト メニューの非常に一般的なレイアウトで、そのコンテナがページ上で使用可能な幅全体を占める場合。 この場合、最初の項目は左端に隣接し、最後の項目は右端に隣接し、すべての要素間の距離は等しくなります。 今日はこれがどのように行われるかを説明します。
リソースに 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; )
必要なプロパティ値とコードを指定すると、次のラバー メニューが表示されます。
この方法の欠点6.0+ | 6.0+ | 10.5+ | 5.0+ | 3.6+ | - | - |
水平メニューは Web サイトのセクションのリストであるため、要素内に配置する方が合理的です
- を選択し、その要素に CSS スタイルを適用します。 このメニュー レイアウトは、Web ページ上での配置に明らかな利点があるため、最も一般的です。横型メニューの作り方:レイアウトとデザイン例
水平メニューの HTML マークアップと基本スタイル
- メニュー項目
- メニュー項目
- メニュー項目 ...
- メニューのブロックラッパー
- 箇条書きリスト (ul タグ) を通じて表示されるメニュー自体
- メニュー項目は内部にあり、それに応じてすでにリンクがあります
- vertical-align:bottom - このプロパティは、メニュー項目内のテキストが 2 行になる場合に均等に表示されるようにするために必要です。 メニューを作成するときに、このプロパティを削除し、項目が圧縮され、テキストが 2 行に移動されるようにズームインすると、表示上の問題が発生します。 財産を返せばすべてうまくいきます。
- display: table-cell - 表示メニュー自体をテーブル行に設定しているため、その項目がテーブル内のセルとして表示されるように設定するのが論理的です。 これは必要である。
- width: auto — 幅は段落内のテキストの長さに応じて自動的に計算されます。
- text-align: center - これはテキストを内側の中央に配置するだけです
- height: 50px — 高さを 50 ピクセルに設定します
- まあ、border-right は右側の単なる境界線であり、項目の区切り文字です
- text-decoration プロパティは、リンクのデフォルトの下線をオーバーライドします。
- width: 1000px はおそらく最も重要な行です。 リンクをほぼこの幅に設定する必要があります。おそらくそれよりも狭いかもしれませんが、可能な限り幅の広いメニュー項目よりも確実に大きくする必要があります。 幅は自動に設定されている li メニュー項目によって制限されるため、リンクの幅は 1000 ピクセルにはなりませんが、これにより、メニュー内の項目の数が常に 100 になるようにすることができます。幅のパーセント。
- vertical-align: middle および display: table-cell - 1 つ目はテキストを垂直方向に中央に配置し、2 つ目はリンクもセルとして表示します。 両方のプロパティが必要です。
- font - まあ、これは単なるフォントの設定セットです。 フォントの CSS プロパティについては、この記事をご覧ください。
- 家
- 私たちについて
- 私たちのサービス
- 当社のサービスNo.1
- 私たちのサービスその2
- 私たちのサービスその3
- 私たちのサービスその4
- サービス5
- ニュース
- 連絡先
- メニューは動的に描画されます。
- 区切り文字から段落までのインデントはどこでも同じです。
- より美しく、より柔軟なデザイン。
- 横を向いたときにvipパッドで
- 3 番目のレベルのポップアップ ドロップダウンを使用
- 家
- 私たちについて
- 私たちのサービス
- 当社のサービスNo.1
- サービス追加1
- サービス追加2
- 私たちのサービスその2
- サービス追加3
- サービス追加4
- 私たちのサービスその3
- 私たちのサービスその4
- サービス5
- 当社のサービスNo.1
- ニュース
- 連絡先
- ロードマップ
- 地図アドオン
- マップ2の追加
- フィードバックフォーム
- ロードマップ
デフォルトでは、すべてのリスト要素は垂直方向に配置され、コンテナ要素の幅全体を占め、コンテナ要素の幅全体がコンテナ ブロックの幅全体を占めます。
水平ナビゲーション用の HTML マークアップ
タグ内にある水平メニューは、さらに ... および/または ... 要素内に配置できます。 このおかげで、HTML マークアップには意味的な意味が与えられ、メニュー ブロックをフォーマットする追加の機会も提供されます。
水平に配置するにはいくつかの方法があります。 まず、ナビゲーション要素のデフォルトのブラウザ スタイルをリセットする必要があります。
Ul ( list-style: none; /* リスト マーカーを削除します*/ margin: 0; /* 1em に等しい上下のマージンを削除します*/ padding-left: 0; /* 40px に等しい左のパディングを削除します*/ ) a ( text-decoration: none; /*リンクテキストの下線を削除*/)
方法 1. li (表示: inline;)リスト要素を小文字にする。 その結果、それらは水平に配置され、それらの間の右側に 0.4em のギャップが追加されます (フォント サイズに応じて計算)。 これを削除するには、 li li (margin-right: -4px;) に負の右マージンを追加します。 次に、必要に応じてリンクのスタイルを設定します。
方法 2. li (float: left;)リスト要素をフローティングにします。 その結果、それらは水平に配置されます。 コンテナブロックulの高さはゼロとなる。 この問題を解決するには、(overflow: hidden;) を ul に追加して拡張し、浮動要素を含めることができるようにします。 リンクの場合は、(display: block;) を追加し、必要に応じてスタイルを設定します。
方法 3. li (display: inline-block;)リスト要素をインラインブロック化します。 最初のケースと同様に、それらは水平に配置され、右側にギャップが形成されます。 リンクの場合は、(display: block;) を追加し、必要に応じてスタイルを設定します。
方法 4. ul (表示: flex;)を使用して ul リストをフレキシブル コンテナにします。 その結果、リスト要素は水平方向に配置されます。 リンクに (display: block;) を追加し、必要に応じてスタイルを設定します。
1. リンク上にカーソルを置くと下線効果が表示されるアダプティブ メニュー @import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main ( リストスタイル: なし; マージン: 40px 0 5px; パディング: 25px 0 5px; テキスト整列: センター; 背景: 白; ) .menu-main li (表示: インラインブロック;).menu- main li:after ( content: "|"; color: #606060; display: inline-block;vertical-align:top; ) .menu-main li:last-child:after (content: none;) .menu-main a ( text-decoration: none; font-family: "Ubuntu Condensed", sans-serif; 文字間隔: 2px; 位置: 相対; padding-bottom: 20px; margin: 0 34px 0 30px; font-size: 17px;テキスト変換: 大文字; 表示: インラインブロック; 遷移: カラー .2s; ) .menu-main a, .menu-main a:visited (color: #9d999d;) .menu-main a.current, .menu- main a:hover(color: #feb386;) .menu-main a:before, .menu-main a:after ( content: ""; 位置: 絶対; 高さ: 4px; 上: 自動; 右: 50%; 下: -5px; 左: 50%; 背景: #feb386; トランジション: .8s; ) .menu-main a:hover:before, .menu-main .current:before (left: 0;) .menu-main a: hover:after, .menu-main .current:after (right: 0;) @media (max-width: 550px) ( .menu-main (padding-top: 0;).menu-main li (display: block; ) .menu-main li:after (コンテンツ: none;) .menu-main a ( パディング: 25px 0 20px; マージン: 0 30px; ) ) 2. 結婚式のウェブサイト向けの適応メニュー @import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu (位置: 相対; 背景: #fff; box-shadow: inset 0 0 10px #ccc; ) .top-menu:before, .top-menu:after ( content: ""; 表示: ブロック; 高さ: 1px; border-top: 3px ソリッド #575350; border-bottom: 1px ソリッド #575350; margin-bottom: 2px; ) .top-menu:after ( border-bottom: 3px ソリッド #575350; border-top: 1px ソリッド#575350; box-shadow: 0 2px 7px #ccc; margin-top: 2px; ) .menu-main ( list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align:中央; 位置: 相対; ) .menu-main:before, .menu-main:after ( content: "\25C8"; 行の高さ: 1; 位置: 絶対; 上部: 50%; 変換: translationY(-50% ); ) .menu-main:前 (左: 15px;) .menu-main:後 (右: 15px;) .menu-main li (表示: インラインブロック; パディング: 5px 0; ) .menu-main a ( テキスト装飾: なし; 表示: インラインブロック; マージン: 2px 5px; パディング: 6px 15px; font-family: "PT Sans"、サンセリフ; font-size: 16px; color: #777777; border-bottom : 1px ソリッド透明; トランジション: 0.3 秒リニア; ) .menu-main .current, .menu-main a:hover ( border-radius: 3px; background: #f3ece1; color: #313131; text-shadow: 0 1px 0 #fff; border-color: #c6c6c6; ) @media (max-width: 500px) ( .menu-main li (display: block;) ) 3. レスポンシブスカラップメニュー @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main ( リストスタイル: なし; パディング: 0 30px; マージン: 0; フォントサイズ: 18px; text-align: center; 位置: 相対; 背景: 白; ) .menu-main:after ( content: ""; 位置: 絶対; 幅: 100%; 高さ: 20px; 左: 0; 下: -20px; 背景: 放射状グラデーション(白 0%, 白 70%, rgba(255,255,255,0) 70%, rgba( 255,255,255,0) 100%) 0 -10px;background-size: 20px 20px;background-repeat:repeat-x; ) .menu-main li (display: inline-block;) .menu-main a ( text-decoration:なし; 表示: インラインブロック; マージン: 0 15px; パディング: 10px 30px; フォントファミリー: "PT Sans Caption"、サンセリフ; カラー: #777777; トランジション: .3s リニア; 位置: 相対; ) .menu -main a:before、.menu-main a:after (コンテンツ: ""; 位置: 絶対; トップ: calc(50% - 3px); 幅: 6px; 高さ: 6px; 境界線の半径: 50%; 背景: #F58262; 不透明度: 0; トランジション: .5s イーズインアウト; ) .menu-main a:before (左: 5px;) .menu-main a:after (右: 5px;) .menu-main a。 current:before、.menu-main a.current:after、.menu-main a:hover:before、.menu-main a:hover:after (不透明度: 1;) .menu-main a.current、.menu- main a:hover (color: #F58262;) @media(max-width:680px) ( .menu-main li (display: block;) ) 4. リボン上のアダプティブ メニュー @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu ( マージン: 0 60px; 位置: 相対; 背景: #5A394E; box-shadow: インセット 1px 0 0 rgba(255,255,255,.1), インセット -1px 0 0 rgba(255,255,255,.1), インセット 150px 0 150px -150px rgba(255,255,255,.12), インセット -150px 0 150px -150px rgba(255,255,255,.12); ) .top-menu:before, .top-menu:after ( content: ""; Position:Absolute ; z-index: 2; left: 0; width: 100%; height: 3px; ) .top-menu:before ( top: 0; border-bottom: 1px 破線 rgba(255,255,255,.2); ) .top- menu:after (bottom: 0; border-top: 1px 破線 rgba(255,255,255,.2); ) .menu-main ( list-style: none; padding: 0; margin: 0; text-align: center; ) 。 menu-main:before, .menu-main:after ( content: ""; 位置: 絶対; 幅: 50px; 高さ: 0; トップ: 8px; border-top: 18px ソリッド #5A394E; border-bottom: 18px ソリッド # 5A394E; 変換: 回転(360度); z-インデックス: -1; ) .menu-main:before ( left: -30px; border-left: 12px Solid rgba(255, 255, 255, 0); ) .menu- main:after ( right: -30px; border-right: 12px ソリッド rgba(255, 255, 255, 0); ) .menu-main li ( 表示: インラインブロック; マージン右: -4px; ) .menu-main a ( テキスト装飾: なし; 表示: インラインブロック; パディング: 15px 30px; フォントファミリー: "PT Sans Caption」、サンセリフ; カラー: ホワイト; トランジション: .3 秒リニア; ) .menu-main a.current、.menu-main a:hover (背景: rgba(0,0,0,.2);) @media (最大幅: 680px) ( .top-menu (margin: 0;) .menu-main li (display: block; margin-right: 0; ) .menu-main:before, .menu-main:after (content: none;) .menu-main a (display: block;) ) 5. 中央にロゴがあるレスポンシブメニュー @import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu (位置: 相対; 背景: rgba(34,34,34,.2); ) .menu-main (リストスタイル: なし; マージン: 0; パディング: 0; ) .menu-main:after (内容: ""; 表示: テーブル; クリア: 両方; ) .left-item (浮動小数点: 左;) .right-item (浮動小数点: 右;).navbar-logo (位置: 絶対; 左: 50%; 上: 50%; 変換: トランスレート(-50%,-50%); ) .menu-main a ( テキスト装飾: なし; 表示: ブロック; 行の高さ: 80px; パディング: 0 20px; フォントサイズ: 18px ; 文字間隔: 2px; フォントファミリー: "Arimo"、サンセリフ; フォントの太さ: ボールド; カラー: ホワイト; トランジション: .3 秒リニア; ) .menu-main a:hover (背景: rgba(0, 0,0,.3);) @media (最大幅: 830px) ( .menu-main (padding-top: 90px; text-align: center; ) .navbar-logo (位置: 絶対; 左: 50% ; トップ: 10px; 変換: TranslationX(-50%); ) .menu-main li ( float: none; 表示: インラインブロック; ) .menu-main a ( line-height:normal; パディング: 20px 15px; font -size: 16px; ) ) @media (max-width: 630px) ( .menu-main li (display: block;) ) 6. 左側にロゴが付いたレスポンシブメニュー @import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( 背景: rgba(255,255,255,.5); ボックスシャドウ: 3px 0 7px rgba(0,0,0,.3); パディング: 20px; ) .top-menu:after ( content: "" ; 表示: テーブル; クリア: 両方; ) .navbar-logo (表示: インラインブロック;) .menu-main (リストスタイル: なし; マージン: 0; パディング: 0; フロート: 右; ) .menu-main li (表示: インラインブロック;).menu-main a ( テキスト装飾: なし; 表示: ブロック; 位置: 相対; 行の高さ: 61 ピクセル; パディング左: 20 ピクセル; フォントサイズ: 18 ピクセル; 文字間隔: 2px; font-family: "Arimo"、サンセリフ; font-weight: ボールド; カラー: #F73E24; トランジション: .3s リニア; ) .menu-main a:before ( content: ""; width: 9px;高さ: 9px; 背景: #F73E24; 位置: 絶対; 左: 50%; 変換: 回転(45度) 平行移動X(6.5ピクセル); 不透明度: 0; 遷移: 0.3秒線形; ) .menu-main a:hover:before (不透明度: 1;) @media (最大幅: 660px) ( .menu-main ( float: none; padding-top: 20px; ) .top-menu ( text-align: center; padding: 20px 0 0 0; ) .menu-main a (パディング: 0 10px;) .menu-main a:before (transform:rotate(45deg) TranslationX(-6px);) ) @media (max-width: 600px) ( .menu-main li (表示ブロック;) )こんにちは
多くの場合、親ブロックに含まれる項目の数に関係なく、親ブロックの幅全体に広がる水平メニューを作成する必要があります。
今回はそんなメニューの作り方を紹介したいと思います。
したがって、メニューは次のようになります。
全幅に引き伸ばされ、カーソルを置くと目立ちます。 メニューの側面は丸みを帯びています。
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; )
それだけです!
親ブロックの幅全体に広がる素晴らしいメニューができました。 マウスを移動しても項目が重なり合わず、レイアウトがジャンプしません。
こんにちは。 私は長い間、HTML/CSS の作業に関する記事を書いていませんでした。 最近、新しいレイアウトを作成し始めたのですが、その過程で、メニューを柔軟にすることができる興味深いトリックを見つけました (新しい項目を追加できますが、サイズは増加しませんが、常にメニューの 100% になります)。親ブロック)。 ということで、今日はCSSを使ってラバーメニューを実装してみます。
記事を読むのが面倒な方は、このビデオをご覧ください。 著者はまた、すべてを非常にわかりやすく説明しています。
最初のステップは常に HTML マークアップですが、これがなければどうなるでしょうか? しかし、私たちの場合はすべてが単純になります。
すべてが明らかです。これが私のマークアップコードです。
以下のように、すべて標準的に見えます。
ここで、すべてを目的の形式に設定します。CSS が機能します。
ステップ 2 - 基本的なスタイル次に、ラッパー ブロックにスタイルを追加します。 つまり、最大幅を 600 ピクセルに設定し (メニューが収まるようにスクリーンショットを撮りやすくするためです)、ブロックも中央に配置します。
包む(
背景: #fff;
最大幅: 600ピクセル;
マージン: 0 自動;
}
それでは、メニュー自体を見てみましょう。 マーカー (ul タグ) を削除し、背景に線形グラデーションを作成します。そして最も重要なこととして、display: table-row プロパティを使用して、メニューのコンテナーがテーブル行のように動作するようにします。 これは、さらなる操作を行うために行うことが重要です。
Rメニュー(
背景: 線形グラデーション(右へ、#b0d4e3 0%、#88bacf 100%);
表示: テーブル行;
リストスタイル: なし;
}
ご覧のとおり、上記のコードは私が書いたすべてを解決しました。 ちなみに、グラデーションはUltimate CSS Gradient Generatorツールを使って生成すると便利です。 彼についてはまたいつか書きます。
Rメニュー(
垂直整列: 下;
表示: テーブルセル;
幅: 自動;
テキスト整列: 中央;
高さ: 50ピクセル;
ボーダー右: 1px ソリッド #222;
}
ここまでのメニューは見苦しく見えますが、大丈夫です。今度はそれを思い出してみましょう。
最後に行うことは、アイテム内のリンクのスタイルを設定することです。 ここにこのコードがあります:
R-メニューリア(
テキスト装飾: なし。
幅: 1000ピクセル;
高さ: 50ピクセル;
垂直配置: 中央;
表示: テーブルセル;
色: #fff;
フォント: 通常の 14px Verdana;
}
そして今のメニューはこんな感じです。
もう一度、いくつかの行について説明しましょう。
たとえば、カーソルを置くとメニュー項目の色が変わるようにします。 これは、hover 疑似クラスを使用して非常に簡単に実装できます。
R メニュー li:hover(
背景色: #6bba70;
}
メニューは準備できましたが、約束したように、最も重要なこと、つまりゴム状かどうかを確認していません。 さて、メニューにさらに 2 つの項目を追加します。
メニューの幅は 600 ピクセルのままです。 残りのアイテムは、2 つの新しいアイテムを収容するために少し縮小されただけです。
もう 1 つ長い点を追加します。
ご覧のとおり、メニューはさらに少し縮小され、長い項目が非常に正常に表示されます。 そして、私が説明したvertical-align:bottomプロパティがなかったら、メニューの見た目はさらに悪化したでしょう。
メニューを3品に減らします。
品目はかなり自由になりましたが、メニュー自体の幅は変わりません。 そこで100%ラバーメニューを作りました!
原則として、ラッパー ブロックを固定幅ではなく最大幅に設定した場合は、調整する必要さえありません。 私の場合、max-width プロパティ: 600px を持っており、幅が 600 ピクセル未満になると、ブロックは水平スクロールを形成せずに、画面とともに単純に縮小します。
モバイル デバイスやワイド スクリーンで何らかの方法でメニューを変更または修正したい場合は、メディア クエリが役に立ちます。 ウェブサイト構築頑張ってください!
このシリーズでは、ドロップダウン メニューに関するレッスンを続けます。 次は、CSS を使用した自分で作る水平ドロップダウン メニューです。
偶然ここにたどり着いた場合、またはドロップダウン メニューの別の実装を探していた場合は、親セクションに移動することをお勧めします。
このセクションでは、CSS と HTML の水平ドロップダウン メニューについて説明します。
ページナビゲーション:
それで、 私たちの任務:
jQueryとJavaScriptを使用せず、テーブルも使用せずに、ドロップダウンリストCSS(ul liリスト上)で水平メニューを作成します。