タブなしのCSSでスライドドアを使用する方法

Cascading Style Sheetsは、XML、HTML、XHTMLなどのマークアップ言語で記述されたWebコンテンツにスタイルを追加する一種のスタイルシート言語です。 CSSの引き戸手法は、2つの別々の背景画像を使用して動的効果を作成することです。 下の画像を覆い隠すことなく、上の画像を下の画像の上に重ねて錯覚を作り出します。 タブなしでスライドドア技術を実装するための秘訣は、CSSで設計されたリストを使用してテキストベースのナビゲーション要素を生成することです。

1。

「DIV」タグで囲まれたナビゲーション要素の番号なしリストを作成することから始めます。 例えば:

  • ホームページ
  • 製品とサービス
  • お問い合わせ

この例では、リストにアンカータグとスパンタグが含まれています。 アンカータグは、ナビゲーション要素の特定の場所にリンクするために「href」属性を使用します。 タグを使用して、ナビゲーション要素内のテキストのスタイルを制御することもできます。

2。

背景色を定義し、floatを有効にし、余白を指定し、オーバーフローをautoに設定し、リスト項目のリストスタイルを無効にすることによって、ナビゲーション要素にスタイルを追加します。 フロートは、他の要素がそれを囲むことができるように、要素を水平方向に左右に移動させることができるCSSプロパティです。 overflowプロパティは、コンテンツが四角形の枠を超えて拡大した場合のオブジェクトの動作を定義します。 オーバーフローを自動に設定すると、オーバーフローは非表示になりますが、スクロールバーを追加してオーバーフローの内容を表示することができます。

3。

選択した背景画像をアンカースタイルとスパンスタイルに適用してスライドドア技術を完成させ、ナビゲーション要素にホバー効果を作り出します。

人気の投稿