Do-It-Yourself WordPress Hover Menu

Also as known as Pop-up Menu Layer, HoverExtended, or Tooltip Links, a hover menu is simply a list of links that appears when you move your mouse over a certain part of a web page. Why does it have many different names? Because there are different ways to create a hover menu, the name depends on the technique.

Here are some examples: 1, 2, 3.

Regardless of how many different ways you can approach the hover menu to create it, it isn’t easy. In the beginning, you’ll find yourself trying to recreate the hover effect using pure CSS. However, you can always trust Internet Explorer to mess up, which it will.

After the first hour of frustration, you’ll search for Javascript workarounds on Google. But then, you’ll soon realize that Javascript workarounds don’t come cheap and you’ll need to purchase a Reseller or Developer license to use that Javascript in projects that you want to redistribute.

After that, you’d probably give up. But luckily, you have the trusty Small Potato (yours truly). I’ll show you the simple way to create a hover menu without having to deal with IE bugs and without having to use

. (Using

usually gives you a flickering hover menu in IE, which is a no-no.)

Here’s an example of using the hover menu via

.

In the example above, the Hover Link 1 and Hover Link 2 will flicker on and off in Internet Explorer. If you don’t see them flicker on and off, try using a hover menu within an image link and you’ll see what I meant. And as you can see, using pure CSS and

to create the hover menu means you have to place the entire menu within one link.

So, how will you create a hover menu without

? Simple, use the

selector on something else. But, Internet Explorer doesn’t support

for… something else? Well, that’s where csshover.htc comes in. It’ll allow you to hover other stuff in IE.

Download it and drop it in your themes folder. Open up the

file and here’s one way to link to this new file you just downloaded:

Do not copy and paste the codes above. Type it out.

Now that you’re armed with the csshover.htc Internet Explorer :hover work-around, you have a lot of options to work with. Below is simply one of many ways you can create a hover menu.

<div class=”hover-wrap”>
Some regular text here that the user sees when viewing the page

<div class=”hover-menu”>
Here’s what the users will see when they move their cursors over this area.
</div>

</div>

Do not copy and paste the codes above. Type it out.

Based on the codes above, here’s what you should have in the

file of your theme.

.hover-wrap{
position: relative;
}

.hover-wrap .hover-menu{
display: none;
}

.hover-wrap:hover .hover-menu{
display: block;
position: absolute;
top: 10px;
left: 10px;
z-index: 100;
white-space: no-wrap;
}

CSS Explanations:

First, I told

or

to position itself relatively, hence,

.

Second, I told

or

to hide itself by using

.

Third, I told

to appear, where to appear, and how to it should appear.

• display: block;

  is for reversing

  display: none;
• position: absolute;

  allows you to position it precisely. It’s important to note that this absolute positioning works hand in hand with the relative positioning of

  .hover-wrap

  .

• top: 10px;

  means it will appear 10 pixels from the top of whatever it’s contained in. In this case, it’s the .hover-wrap box or DIV.

• left: 10px; means it will appear 10 pixels from the left of whatever it’s contained in.
• z-index: 100; allows it to show up without messing up the positioning of anything else on your page. Z-index has to do with layering. Something with a z-index of 100 will appear in front of something else with a z-index of 99.
• white-space: nowrap;

  allows whatever that shows up on hover to extend itself beyond the width of whatever it’s contained in. For example, if you have a 300 pixels box and a 400 pixels hover menu or hover content box, but you don’t want to apply a definite width to that hover box, then use

  white-space: nowrap;

  . Otherwise, get rid of white-space and do something like

  .hover-menu{width:400px;}

  .

But, wait a minute, isn’t the example simply a hover box with some text and not a hover menu with links? Yes, I’m glad you paid attention. From my hover box of text, you can add links to make it a menu. For examples:

Or, you could do something like the following:

Once you are able to recreate the hover menu effect. There’s really no limit to what you can put in it, but don’t go overboard. Have fun and don’t forget to show me your hover menu!