How To Make A Bio Dropdown Box With CSS – WPSaviour

By WP Saviour •  Updated: 10/29/20 •  5 min read

After I launched the most up-to-date Theme Lab redesign, I had a lot of feedback on the “bio dropdown” field I’ve up in my navigation bar. I coded it with only a few traces of CSS together with a background picture.

On this CSS tip submit, I’ll go over how one can have an identical hover impact by yourself websites.

The Instance

bio-hover-example-1531258On this instance, I’ll be utilizing a textual content widget within the Twenty Eleven theme, the brand new default as of WordPress 3.2.

Principally, when you hover over the div that incorporates the widget, a “hidden” div will seem which shall be our bio dropdown field.

Observe within the image to the left, the grey bio field won’t seem until you hover the div containing the “Bio Hover” heading.

The Selector

It’s not that vital to have a singular CSS selector to model the div you need to put your bio dropdown field in. Principally it’s because in case you don’t have the accompanying markup in that div, nothing would present up anyway within the occasion of a hover state.

Though within the case of Twenty Eleven, we might get away with simply styling the “apart” class, likelihood is you solely desire a bio dropdown field on certainly one of your divs anyway, so we’ll get extra particular.

bio-hover-selector-6050435

Fortunately with WordPress, it spits out a ton of distinctive CSS selectors you need to use. On this instance, it spits out #test-3 which we’ll use to any extent further.

Observe: This will likely fluctuate relying in your WordPress set up. Use one thing like Chrome Developer Instruments to simply discover the selector.

HTML Markup

On this instance, the HTML markup could be positioned straight into the WordPress textual content widget. That is what you’d put in:


Leland!

Hey. I'm Leland Fiegel and I'm the creator and founding father of Theme Lab. I like to jot down code, particularly HTML, CSS and for WordPress.

Until you need to steal my id, you’ll in all probability need to change the picture with an image of your self. You can too optionally take away it.

Since we’re utilizing a WordPress widget, the outlying markup is already generated for us. That is what it’s in whole.


Bio Hover


Leland!
Hey. I'm Leland Fiegel and I'm the creator and founding father of Theme Lab. I like to jot down code, particularly HTML, CSS and for WordPress.

For those who’re doing this on a uncooked HTML website, you’ll want some kind of wrapper (like this one is the apart) for the bio dropdown with one thing else in it, in any other case there’s nothing to hover over to drop down.

Actual-life instance: My bio dropdown div is inside an li tag in my navigation menu.

First Two Traces of CSS

The primary two traces actually arrange the remainder of it, so I put this in its personal part.

#text-3 { place: relative; }
.bio-dropdown { show: none; }

Rationalization

Observe: For those who’re not a fan of show: none; or assume it hurts your search engine marketing or one thing, you may as well use one thing alongside the traces of place: absolute; left: -100000em; which is able to principally transfer it to this point off the web page, noone would ever see it anyway.

The Remainder of the CSS

The next CSS code handles the appear and feel of the bio dropdown field.

#text-3:hover .bio-dropdown {
show: block; z-index: 99;
place: absolute; high: 25px;
background: #ccc; padding: 10px 10px 0 10px;
font-size: 11px; line-height: 18px; shade: #666;
}

Rationalization

That is the place we lastly use the #text-3 selector together with the :hover pseudoclass to make the bio dropdown field present up solely if you hover over the textual content widget.

Observe: In regards to the first line, in case you’re utilizing the place: absolute; left: -100000em; approach as an alternative of show: none; like I defined above, utilizing show: block right here wouldn’t be crucial (since divs are already assumed to be block stage parts anyway). As an alternative you’d have to make use of left: 0;to maneuver the div again onto the web page.

And for the picture, only a easy float and proper margin.

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

WordPress Integration

I can’t consider a great way to combine this right into a dynamic WordPress menu (wp_nav_menu) with out filtering the crap out of one thing. The simplest manner could also be to exhausting code your navigation and recover from it(which I do on all of my websites).

If in case you have any methods on the best way to insert markup right into a WordPress menu merchandise, which is required for this, I’d love to listen to about it within the feedback. I’m certain it’s potential but it surely goes past the scope of this CSS tip submit.

gp-9544862 as-7329964

WP Saviour

I am a WordPress specialist. My mission is to help you create beautiful websites with ease!