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
On 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.
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:
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
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
- First line: We set the wrapper of the bio dropdown to have relative positioning. This makes it simpler to utterly place the bio dropdown field nearer to the unique wrapper.
- Second line: This basically makes the bio dropdown field invisible by default. It’s solely supposed to point out up if you hover over one thing, keep in mind?
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.
- First line: The
show: block;makes the bio dropdown field seen. Thez-index: 99;ensures that the field shall be displayed over all the pieces else, unobstructed. - Second line: This positions the field under the apart about 25 pixels.
- Third line: These are just a few beauty kinds, setting the background to a lightweight grey with respectable padding.
- Fourth line: That is all self-explanatory typography.
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.
