Home Tutorials Do-It-Yourself WordPress Hover Menu

Do-It-Yourself WordPress Hover Menu

Author

Date

Updated on

Category

hover menuAlso 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: 123.

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

a:hover

. (Using

a:hover

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

Here’s an example of using the hover menu via

a:hover

.

<a href=”#”>Regular Link Here
<span>
<a href=”#”>Hover Link 1</a>
<a href=”#”>Hover Link 2</a>
</span>
</a>

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

a:hover

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

a:hover

? Simple, use the

:hover

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

:hover

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

header.php

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

<!–[if IE]>
<style type=”text/css”>
body{ behavior:url(”<?php bloginfo(’template_directory’); ?>/csshover.htc”); }
</style>
<![endif]–>

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

style.css

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

.hover-wrap

or

<div class=”hover-wrap”>

to position itself relatively, hence,

position: relative;

.

Second, I told

.hover-menu

or

<div class=”hover-menu”>

to hide itself by using

display: none;

.

Third, I told

.hover-menu

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:

<div class=”hover-menu”>
<a href=”#”>A link here</a>
</div>

Or, you could do something like the following:

<div class=”hover-menu”>
<ul>
<li><a href=”#”>A link here</a></li≶
<li><a href=”#”>A link here</a></li≶
<li><a href=”#”>A link here</a></li≶
</ul>
</div>

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!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Recent posts

5 WordPress Plugins to Increase Your Website Speed

 And if you’re an online entrepreneur, you probably know that making people wait is bad for your eCommerce business too — really bad.I mean,...

How to Show Only Images that the User Has Uploaded in WordPress

When using WordPress with multiple authors, many things need to be taken into consideration. The default permissions system leaves much to be desired, and...

Oxygen Builder Review

Free from all sorts of coding hassles and an abundance of options that cater to the users’ needs, Oxygen 2.0 is probably the best...

Basic Guide to Online Backup

A Basic Guide to Online Backup You may have heard of it, know you need it, but what exactly is it? Online backup is the...

Web Hosting Hub Review

How did it begin? Based in Virginia Beach, Web hosting hub has been on the market since 2001. If it were not for Web Hosting...

Recent comments