CSSシフト付きのサイドメニュー。 純粋なCSSを使用してスライド式のサイドメニューを作成します。 ホバー効果のある垂直メニュー

今回は固定サイド情報メニューを作成していきます。 アイコンを実装するには、フォントを接続します。

ステップ 1. フォントとアイコンを接続し、空のドキュメントを作成します

FontAwesome フォントの使用に関する詳細情報とプロジェクト自体へのリンクは、私の投稿にあります。

添付ファイルを含むページのコードは次のとおりです。

ステップ 2: 固定メニューの HTML マークアップを追加する

固定メニューのマークアップ コードは次のとおりです。

お気づきかと思いますがタグ付けさせていただきました

ステップ 3. サブメニューの HTML マークアップを追加する

• リンクテキスト
• リンクテキスト
• リンクテキスト

サブメニューはメイン メニューと同じリストにタグを加えたものです 「左側の馬車」アイコンを表示する、一種の「尾翼」の機能を実行します。詳細は下の図で:)

この要素はメニュー ブロックとサブメニューの間の隙間も接続するため、トランジション オプションを実装できるようになります。

ステップ 4. 固定サイドメニューのスタイルを作成する

重要な箇所のスタイル コードについてコメントするようにしました。 一般に、コメントされていない点はすべて、背景、色などの平凡な様式化に関連しています。

#sidebar-menu (position:fixed; /* メニューを修正します */ top: 200px; /* ブラウザの上端を基準としたメニューの位置 */ left: 0; /* メニューを左端に固定します * / パディング: 10px; 背景: # 323A45; カラー: #FFF; ボーダー半径: 0 8px 8px 0; ) #sidebar-menu li (位置: 相対; カーソル: ポインター; ) #sidebar-menu li i ( /* Set固定サイズのアイコン、高さ、行の高さは同じである必要があります */ width: 27px; height: 27px; line-height: 27px; border-radius: 4px; background: #3CB7E7; text-align: center; ) #sidebar-menu li+li (margin-top: 4px;) #sidebar-menu b ( display: none;position: ABSOLUTE; /* 左端からの相対位置は要素 li の幅と等しい */ left: 27px; top: 0; height: 27px; /* 幅はブロック メニューとサブメニューの間のギャップに等しい */ width: 16px; line-height: 27px; background: traditional; color: #323A45; /* アイコンの位置視覚的にサブメニュー ブロックと一緒に見えるように、それ自体を右に配置します */ text-align: right; ) #sidebar -menu li > ul ( display: none; 位置: 絶対; 上: -10px; 左: 42ピクセル; 幅: 120ピクセル; パディング: 10px; 背景: #323A45; 境界半径: 8px; ) #sidebar-menu li:hover b, #sidebar-menu li:hover ul (display: block;) #sidebar-menu li a (display: block; パディング: 4px 8px; border-radius: 4px; color: #FFF ; -webkit-transition: すべて .2s; -moz-transition: すべて .2s; -ms-transition: すべて .2s; -o-transition: すべて .2s; トランジション: すべて .2s; ) #sidebar-menu li a :hover (表示: ブロック; 背景: #3CB7E7; )

スタイリングについて質問がある場合は、この投稿のコメントに書いてください。喜んでお答えします。
それだけです！ 固定サイドメニューの準備完了 🙂

縦型メニュー箇条書きまたは番号付きのリストに基づいて実行されます。 デフォルトでは、すべてのリスト要素は垂直方向に配置され、コンテナ要素の幅全体を占め、コンテナ要素の幅全体がコンテナ ブロックの幅全体を占めます。

リスト要素には、リンクだけでなく、見出し、アイコン、画像も含めることができます。 縦メニューを使用して、サイトへのコメントやカテゴリのリストなどを作成できます。

1. ヘッダー付きの縦型メニュー

シンプルでエレガントなデザインのオプション。 Web サイト上のカテゴリのスタイル設定に適しています。 ホバーすると、リスト項目のリンクの色が変わります。

* (ボックスサイズ: ボーダーボックス; マージン: 0;).widget ( パディング: 20px 30px; 背景: 白; フォントファミリー: "Roboto"、サンセリフ; ) .widget-title ( text-transform: 大文字; 文字間隔: 2px; カラー: #222; フォントサイズ: 16px; padding-left: 15px; margin-bottom: 15px; border-left: 2px ソリッド #b99d61; ) .widget-list (padding: 0; list -style: none; ) .widget-list a:before ( content: "\2014"; margin-right: 14px; ) .widget-list a ( text-decoration: none; アウトライン: none; 表示: ブロック; パディング: 6px 0; 文字間隔: 1px; フォントの重さ: 300; カラー: #444; トランジション: .3s リニア; ) .widget-list a:hover (color: #b99d61;)

2.「地下鉄路線図」風の縦型メニュー

垂直メニューを設計するための興味深いソリューションであり、ネストされたメニューを追加することができます。 「地下鉄路線」はリストの左端であり、各リンクの前にマーカーが生成されます。

• リスト項目
  • ネストされたリスト要素
  • ネストされたリスト要素
  • ネストされたリスト要素
• リスト項目
• リスト項目

.metro (リストスタイル: なし; パディング: 0; マージン: 30px 0 0 50px; ボーダー左: 5px ソリッド #DAE4F1; ) .metro li (line-height: 2em;) .metro ul (マージン: 20px 0 20px 15px; パディング: 0; ボーダー: なし; リストスタイル: なし; ) .metro ul:before, .metro ul:after (コンテンツ: ""; 幅: 5px; 高さ: 28px; 背景: #DAE4F1; 位置: 相対; 表示: ブロック; 左: -9px; ) .metro ul:before ( 変換: 回転(-45度); マージン-上: -15ピクセル; ) .metro ul:後 (変換: 回転(45度); 下: -20ピクセル; ) .metro ul li (border-left: 5px ソリッド #DAE4F1;) .metro ul li:first-child ( margin-top: -5px; padding-top: 5px; ) .metro ul li:last-child ( padding -bottom: 9px; margin-bottom: -25px; ) .metro a ( text-decoration: none; display: block; font-family: "Noto Sans", sans-serif; color: #4A4B4D; ) .metro a: before (コンテンツ: ""; 表示: インラインブロック; 背景: #CA682D; 幅: 12px; 高さ: 12px; 左: -9px; 位置: 相対; 境界線の半径: 50%; マージン-右: .5em; )

3. ホバー効果のある垂直メニュー

リスト項目の上にマウスを移動すると表示されるアイコンと背景の塗りつぶしは、垂直メニュー要素のデザインを多様化するのに役立ちます。

.category-wrap ( パディング: 15px; 背景: 白; 幅: 200px; box-shadow: 2px 2px 8px rgba(0,0,0,.1); font-family: "Helvetica Neue"、Helvetica、Arial、sans -serif; ) .category-wrap h3 ( フォントサイズ: 16px; カラー: rgba(0,0,0,.6); マージン: 0 0 10px; パディング: 0 5px; 位置: 相対; ) .category-wrap h3:after (内容: ""; 幅: 6px; 高さ: 6px; 背景: #80C8A0; 位置: 絶対; 右: 5px; 下: 2px; ボックスシャドウ: -8px -8px #80C8A0, 0 -8px #80C8A0 , -8px 0 #80C8A0; ) .category-wrap ul (リストスタイル: なし; マージン: 0; パディング: 0; ボーダートップ: 1px ソリッド rgba(0,0,0,.3); ) .category-ラップ li (マージン: 12px 0 0 0px;) .category-wrap a ( テキスト装飾: なし; 表示: ブロック; フォント サイズ: 13px; カラー: rgba(0,0,0,.6); パディング: 5px ; 位置: 相対; トランジション: .3 秒リニア; ) .category-wrap a:after ( content:"\f18e"; フォントファミリー: FontAwesome; 位置: 絶対; 右: 5px; カラー: ホワイト; トランジション: .2 秒リニア; ) .category-wrap a:hover (背景: #80C8A0; 色: 白; ）

4. アイコン付きの垂直メニュー

メニュー アイコンは視覚的なアンカーを作成し、各カテゴリの口頭での説明を補完します。 アイコンを表示するには、接続する必要があります。 他のアイコン フォントや画像アイコンを使用することもできます。

* (box-sizing: border-box; margin: 0;).widget (padding: 20px; border: 5pxソリッド #f1f1f1; 背景: #fff; border-radius: 5px; font-family: "Roboto", sans- serif; ) .widget h3 ( margin-bottom: 20px; text-align: center; font-size: 24px; font-weight:normal; color: #424949; ) .widget ul ( margin: 0; padding: 0; list -style: none; width: 250px; ) .widget li ( border-bottom: 1px ソリッド #eaeaea; padding-bottom: 15px; margin-bottom: 15px; ) .widget li:last-child ( border-bottom: none; margin-bottom: 0; padding-bottom: 0; ) .widget a ( text-decoration: none; color: #616a6b; display: inline-block; ) .widget li:before ( font-family: FontAwesome; font-size : 20px;vertical-align:bottom; color: #dd3333; margin-right: 14px; ) .widget li:nth-child(1):before (content:"\f1fc";) .widget li:nth-child( 2):before (content:"\f0d0";) .widget li:nth-child(3):before (content:"\f0cd";) .widget li:nth-child(4):before (content:" \f028";).widget li:nth-child(5):before (コンテンツ:"\f03d";)

5. 写真付き縦型メニュー

この例は、新製品や類似製品などのブロックを設計するために使用できます。 オンラインストアのウェブサイト。

JPEG">