CSSでBioドロップダウンボックスを作成する方法

私が解放した後 最新のテーマラボの再設計, ナビゲーションバーにある「バイオドロップダウン」ボックスに多くのコメントがありました。数行のCSSと背景画像を使用してコーディングしました.


このCSSヒントの投稿では、自分のサイトに同様のホバー効果を与える方法について説明します.

この例では、テキストウィジェットを 二十一 テーマ、WordPress 3.2以降の新しいデフォルト.

基本的に、ウィジェットを含むdivにカーソルを合わせると、「非表示」のdivが表示されます。これは、私たちのバイオドロップダウンボックスになります。.

左の図で、「Bio Hover」という見出しを含むdivにカーソルを合わせない限り、灰色のバイオボックスは表示されないことに注意してください.

セレクター

独自のCSSセレクターを使用して、bioドロップダウンボックスを配置するdivをスタイルすることはそれほど重要ではありません。基本的に、そのdivに付随するマークアップがない場合、イベントが発生しても何も表示されないためです。ホバー状態.

Twenty Elevenの場合は、「脇」のクラスをスタイリングするだけで済むかもしれませんが、いずれにせよ、いずれかのdivにバイオドロップダウンボックスが必要なだけなので、より具体的にします。.

幸いなことに、WordPressを使用すると、使用できる独自のCSSセレクターを大量に出力します。この例では、これから使用する#test-3を吐き出します.

注意: これは、WordPressのインストールによって異なる場合があります。 Chromeデベロッパーツールなどを使用して、セレクターを簡単に見つける.

HTMLマークアップ

この例では、HTMLマークアップをWordPressテキストウィジェットに直接配置できます。これはあなたが入れたものです:

リーランド!

こんにちは。私はLeland Fiegelであり、Theme Labの作成者であり創設者です。私はコード、特にHTML、CSSおよびWordPressを書くのが大好きです.

私の身元を盗もうとしない限り、おそらく写真を自分の写真に置き換えることになるでしょう。オプションで削除することもできます.

WordPressウィジェットを使用しているため、範囲外のマークアップがすでに生成されています。これが全体です.

バイオホバー

リーランド!

こんにちは。私はLeland Fiegelであり、Theme Labの作成者であり創設者です。私はコード、特にHTML、CSSおよびWordPressを書くのが大好きです.

生のHTMLサイトでこれを行う場合は、バイオドロップダウンに何か他のものが含まれているため、何らかのラッパー(これは脇にあるようなもの)が必要です。.

実際の例: 私のバイオドロップダウンdivは、ナビゲーションメニューのliタグ内にあります.

CSSの最初の2行

最初の2行は残りの部分を実際に設定するので、これを独自のセクションに配置します.

#text-3 {position:relative; }
.bio-dropdown {display:none; }

説明

  • 最初の行: bioドロップダウンのラッパーを相対的な位置に設定します。これにより、バイオドロップダウンボックスを元のラッパーの近くに絶対的に配置しやすくなります。.
  • 二行目: これにより、本質的にバイオドロップダウンボックスがデフォルトで非表示になります。何かにカーソルを合わせたときにのみ表示されることになっています。覚えておいてください?

注意: ディスプレイのファンではない場合:なし。またはそれがあなたのSEOか何かを傷つけると思う、あなたはポジションの線に沿って何かを使うこともできます:絶対的;左:-100000em;基本的にそれをページから遠くに移動します。とにかく誰もそれを見ることはありません。.

CSSの残りの部分

次のCSSコードは、バイオドロップダウンボックスのルックアンドフィールを処理します.

#text-3:hover .bio-dropdown {
表示ブロック; z-index:99;
位置:絶対; top:25px;
背景:#ccc;パディング:10px 10px 0 10px;
font-size:11px; line-height:18px;色:#666;
}

説明

ここで、:text-3セレクターと:hover疑似クラスを最後に使用して、テキストウィジェットにカーソルを合わせたときにのみ、バイオドロップダウンボックスを表示します。.

  • 最初の行: 表示:ブロック。バイオドロップダウンボックスを表示します。 z-index:99;ボックスが他のすべてのものの上に遮られずに表示されるようにします.
  • 二行目: これにより、ボックスは横約25ピクセルの下に配置されます.
  • 3行目: これらはほんの一部の化粧品のスタイルであり、適切なパディングで背景を薄い灰色に設定します.
  • 4行目: これはすべて自明のタイポグラフィです.

注意: 最初の行について、位置を使用している場合:絶対;左:-100000em;表示の代わりの手法:なし。上で説明したように、display:blockを使用する必要はありません(divはすでにブロックレベルの要素と見なされているため)。代わりに、left:0を使用する必要があります。 divをページに戻す.

そして画像については、単純なフロートと右マージン.

.bio-dropdown .photo {float:左; margin-right:10px; }

WordPressの統合

私は、これを動的なWordPressメニュー(wp_nav_menu)に統合するために、がらくたをフィルタリングせずに適切な方法を考えることができません。最も簡単な方法は ナビゲーションをハードコードしてそれを乗り越える (私は自分のすべてのサイトでこれを行います).

WordPressのメニュー項目にマークアップを挿入する方法が必要な場合は、コメントでお知らせください。それは可能だと確信していますが、このCSSヒントの投稿の範囲を超えています.

結論

はい、おそらくサイドバーにバイオドロップダウンを配置したくないと思います。スペースが限られていて、完全に表示されるスペースがない場所に配置します(窮屈なナビゲーションバーなど)。.

幸い、このテクニクはどこでも使用できます。ホバー時にdiv全体を表示する方法に関する基本的なテクニックを調べたかっただけです.

それほど複雑ではなく、特別なJavascriptを使用する必要はありませんが、ハイテクフェージング効果が必要な場合は、JavaScriptを使用する必要があります。.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map