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

Flat Design for Your WordPress Site: What Is It + 4 WordPress Flat Design Themes

Web designers in the past mostly used 3D styles for buttons that made the button seem more realistic. That all changed when flat design...

LawBlog WP Theme Review

Regardless of which area of law you practice, it’s imperative that you have proper online representation. You need to give your customers a feeling...

The Deeper Meaning and Purpose Behind Shapes in Web & Graphic Design

Sometimes in web design, a clean website is often the best choice for certain clients. Instead of elaborate backgrounds or too many aesthetic choices,...

How to Easily Design a Website Without Coding

Are you looking to build a website and you don’t know how to code? Online web design services are helpful to create website templates...

The importance of SSL Certificates as part of a web hosting package

Building a successful business requires trust, and gaining trust can be difficult especially when you run a business where it is taken for granted...

Recent comments