Wie man eine Bio-Dropdown-Box mit CSS erstellt

Nachdem ich das aktuellste Theme Lab Redesign veröffentlicht hatte, erhielt ich eine Reihe von Kommentaren zu dem „Bio-Dropdown“-Feld, das ich in meiner Navigationsleiste habe. Ich habe es mit nur wenigen Zeilen CSS zusammen mit einem Hintergrundbild codiert.

In diesem CSS-Tipp-Beitrag werde ich erläutern, wie Sie einen ähnlichen Hover-Effekt auf Ihren eigenen Websites erzielen können.

Das Beispiel

In diesem Beispiel verwende ich ein Text-Widget im Twenty Eleven-Theme, dem neuen Standard seit WordPress 3.2.

Grundsätzlich wird, sobald Sie über das Div fahren, das das Widget enthält, ein „verstecktes“ Div angezeigt, das unser Bio-Dropdown-Feld sein wird.

Beachten Sie auf dem Bild links, dass die graue Bio-Box nicht erscheint, es sei denn, Sie fahren mit der Maus über das Div, das die Überschrift „Bio Hover“ enthält.

Der Selektor

Es ist nicht besonders wichtig, einen eindeutigen CSS-Selektor zu haben, um das Div zu stylen, in dem Sie Ihre Bio-Dropdown-Box platzieren möchten. Das liegt im Grunde daran, dass, wenn Sie nicht die dazugehörige Markierung in diesem Div haben, sowieso nichts im Falle eines Hover-Zustands angezeigt würde.

Obwohl wir im Fall von Twenty Eleven mit dem Styling der Klasse „aside“ auskommen könnten, möchten Sie wahrscheinlich sowieso nur eine Bio-Dropdown-Box in einem Ihrer Divs haben, also werden wir spezifischer.

Glücklicherweise spuckt WordPress eine Menge eindeutiger CSS-Selektoren aus, die Sie verwenden können. In diesem Beispiel spuckt es #test-3 aus, das wir von nun an verwenden werden.

Hinweis: Dies kann je nach Ihrer WordPress-Installation variieren. Verwenden Sie etwas wie die Chrome-Entwicklertools, um den Selektor leicht zu finden.

HTML-Markup

In diesem Beispiel kann das HTML-Markup direkt in das WordPress-Text-Widget eingefügt werden. Das würden Sie einfügen:

<div class="bio-dropdown">
<img class="photo"  alt="Leland!" src="http://www.themelab.com/wp-content/themes/themelab5/images/leland-medium.png" />
<p>Hello. I am Leland Fiegel and I am the creator and founder of Theme Lab. I love to write code, especially HTML, CSS and for WordPress.</p>
</div>

Wenn Sie nicht meine Identität stehlen wollen, werden Sie wahrscheinlich das Foto durch ein Bild von sich selbst ersetzen wollen. Sie können es auch optional entfernen.

Da wir ein WordPress-Widget verwenden, wird das umgebende Markup bereits für uns generiert. Das ist es insgesamt.

<aside id="text-3" class="widget widget_text">
<h3 class="widget-title">Bio Hover</h3>
<div class="textwidget">
<div class="bio-dropdown"><img class="photo"  alt="Leland!" src="http://www.themelab.com/wp-content/themes/themelab5/images/leland-medium.png" /><p>Hello. I am Leland Fiegel and I am the creator and founder of Theme Lab. I love to write code, especially HTML, CSS and for WordPress.</p></div>
</div>
</aside>

Wenn Sie dies auf einer reinen HTML-Website tun, benötigen Sie eine Art Wrapper (wie dieses hier die aside ist) für die Bio-Dropdown mit etwas anderem darin, sonst gibt es nichts, worüber Sie fahren können, um es herunterzuklappen.

Beispiel aus der Praxis: Mein Bio-Dropdown-Div befindet sich in einem li-Tag in meinem Navigationsmenü.

Erste zwei Zeilen CSS

Die ersten beiden Zeilen richten den Rest ein, daher habe ich sie in einen eigenen Abschnitt gestellt.

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

Erklärung

• Erste Zeile: Wir setzen den Wrapper des Bio-Dropdowns auf relative Positionierung. Dies erleichtert die absolute Positionierung der Bio-Dropdown-Box näher am ursprünglichen Wrapper.
• Zweite Zeile: Dies macht die Bio-Dropdown-Box im Grunde unsichtbar. Sie soll sich nur zeigen, wenn Sie über etwas fahren, erinnern Sie sich?

Hinweis: Wenn Sie kein Fan von display: none; sind oder denken, dass es Ihrer SEO schadet oder so etwas, können Sie auch etwas wie position: absolute; left: -100000em; verwenden, was es im Grunde so weit von der Seite entfernt verschiebt, dass es sowieso niemand sehen würde.

Der Rest des CSS

Der folgende CSS-Code kümmert sich um das Aussehen und Gefühl der Bio-Dropdown-Box.

#text-3:hover .bio-dropdown {
display: block; z-index: 99;
position: absolute; top: 25px;
background: #ccc; padding: 10px 10px 0 10px;
font-size: 11px; line-height: 18px; color: #666;
}

Erklärung

Hier verwenden wir endlich den #text-3 Selektor zusammen mit der :hover Pseudoklasse, um die Bio-Dropdown-Box nur anzuzeigen, wenn Sie über das Text-Widget fahren.

• Erste Zeile: display: block; macht die Bio-Dropdown-Box sichtbar. z-index: 99; stellt sicher, dass die Box über allem anderen angezeigt wird, ungehindert.
• Zweite Zeile: Dies positioniert die Box etwa 25 Pixel unter dem Aside.
• Dritte Zeile: Dies sind nur einige kosmetische Stile, die den Hintergrund auf Hellgrau mit ordentlichem Padding setzen.
• Vierte Zeile: Dies ist selbsterklärende Typografie.

Hinweis: Zur ersten Zeile: Wenn Sie die position: absolute; left: -100000em; Technik anstelle von display: none; verwenden, wie ich oben erklärt habe, wäre die Verwendung von display: block hier nicht notwendig (da Divs ohnehin als Block-Level-Elemente angenommen werden). Stattdessen müssten Sie left: 0; verwenden, um das Div zurück auf die Seite zu verschieben.

Und für das Bild, nur ein einfacher Float und rechter Rand.

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

WordPress-Integration

Ich kann mir keine gute Möglichkeit vorstellen, dies in ein dynamisches WordPress-Menü (wp_nav_menu) zu integrieren, ohne etwas stark zu filtern. Der einfachste Weg ist vielleicht, Ihre Navigation fest zu codieren und es dabei zu belassen (was ich auf all meinen Websites tue).

Wenn Sie Techniken haben, um Markup in ein WordPress-Menüelement einzufügen, was hierfür erforderlich ist, würde ich es gerne in den Kommentaren hören. Ich bin sicher, es ist möglich, aber es geht über den Rahmen dieses CSS-Tipps hinaus.

Fazit

Ja, ich erkenne, dass Sie wahrscheinlich kein Bio-Dropdown in Ihrer Seitenleiste haben möchten, sondern es an einem Ort mit begrenztem Platz platzieren würden, der keinen Raum hat, um es vollständig anzuzeigen (wie eine überfüllte Navigationsleiste).

Glücklicherweise können Sie diese Technik fast überall anwenden. Ich wollte nur eine grundlegende Technik durchgehen, wie man ein ganzes Div beim Hovern anzeigt.

Es ist nicht allzu kompliziert und Sie benötigen keine ausgefallenen Javascript-Sachen dafür, obwohl Sie wahrscheinlich etwas Javascript verwenden müssten, wenn Sie einen High-Tech-Fading-Effekt wünschen.