Simple Hover Menu using jQuery and JavaScript

In this article I will explain how to create your own Hover Menu using jQuery and JavaScript in ASP.Net. We already know that we have HoverMenuExtender available in AJAX Control Toolkit. But that seems to be heavy as too many scripts are downloaded even if we want to use just one control.

Hence this brings the need to try and create your own Simple Hover Menu using jQuery which is now part of Visual Studio

So let’s start building our simple hover menu

Step 1 : Place the Script on the page

var left = 10;

var top = 10;

var IsMouseOverPopUp;

$(document).ready(function () {

BindHoverMenu();

});

function BindHoverMenu() {

$(".HoverMenu").css("display", "none");

$(".HoverTarget").mouseover(function () {

IsMouseOverPopUp = false;

var p = GetCordinates($(this).get(0));

$("#dvHover").css("left", $(this).get(0).offsetWidth + left + "px");

$("#dvHover").css("top", p.y + top + "px");

$("#dvHover").css("display", "block");

$("#dvHover").html($(this).parent().children(".HoverMenu").html());

$(this).mouseout(function () {

HideHoverMenu();

});

$("#dvHover, .HoverTarget").mouseover(function () {

IsMouseOverPopUp = true;

});

$("#dvHover, .HoverTarget").mouseout(function () {

IsMouseOverPopUp = false;

HideHoverMenu();

});

}

function GetCordinates(obj) {

var p = {};

p.x = obj.offsetLeft;

p.y = obj.offsetTop;

while (obj.offsetParent) {

p.x = p.x + obj.offsetParent.offsetLeft;

p.y = p.y + obj.offsetParent.offsetTop;

if (obj == document.getElementsByTagName("body")[0]) {

break;

}

else {

obj = obj.offsetParent;

}

return p;

}

function HideHoverMenu() {

setTimeout(function () {

if (!IsMouseOverPopUp) {

$("#dvHover").css("display", "none");

}

}, 500);

}

</script>

The above script is what you need for showing the Hover Menu and the script can be used throughout the application by placing the code in JS File and calling it on the page where you require or calling it in the Master Page in the following way

var left = 10;

var top = 10;

var IsMouseOverPopUp;

$(document).ready(function () {

BindHoverMenu();

});

</script>

Step 2: Create your Menu and Sub Menus

Next you need to create your Menu and the Hover Menu that you want display.

<div>

<table>

<tr>

<td>

<a href="javascript:;">SubMenu1</a>

</td>

</tr>

<tr>

<td>

<a href="javascript:;">SubMenu2</a>

</td>

</tr>

<tr>

<td>

<a href="javascript:;">SubMenu3</a>

</td>

</tr>

</table>

</div>

<div>

<table>

<tr>

<td>

<a href="javascript:;">SubMenu1</a>

</td>

</tr>

<tr>

<td>

<a href="javascript:;">SubMenu2</a>

</td>

</tr>

<tr>

<td>

<a href="javascript:;">SubMenu3</a>

</td>

</tr>

<tr>

<td>

<a href="javascript:;">SubMenu4</a>

</td>

</tr>

</table>

</div>

Above you will notice that I have 2 DIVs one for Menu Item 1 and another for Menu Item 2. In each DIV I have 2 things that require consideration in order to make the Hover Menu work

1. HoverTarget – This class is applied to the control on whose mouseover event you want to display the Hover Menu. In our case it’s the HTML anchor tag.

2. HoverMenu – This class is applied to the control which contains the Submenu for the corresponding HoverTarget.

Note: It is important that you place the HoverTarget and HoverMenu within the same parent control. Otherwise the script won’t work

Step3: Add the HoverMenu DIV Control and its CSS

Finally you need to add the following hidden DIV and its CSS. This CSS gives style to the Hover Menu you can use it to design your Hover Menu the way you need it

.HoverPopUp

{

background-color: yellow;

width: 80px;

border: 1px solid black;

position: absolute;

left: 0px;

top: 0px;

}

</style>