DaniWeb IT Discussion Community - Creating a popup menu on mouse over

Quote:

Originally Posted by obscured47 (Post 356461)

You can create a new window using the window.open() funtion. This will help http://www.w3schools.com/htmldom/met_win_open.asp

Using spawned windows as popup menus is a naff approach. Alot of 'modern' browsers block out popups, or put them behind the active window. Also, you'd have to be careful to avoid multiple window.opens every time the user moves the mouse...

You can make popup menus without any Javascript (using CSS)... but they only work well in those 'modern' browsers already mentioned.

If using Javascript, look at moving and hiding/showing some 'menu HTML', or if appropriate, creating such a menu dynamically..

The code I'm posting is gratuitously commented, and has been tested on Opera 9, Firefox 2, and IE6. It will let you assign different menus to multiple objects; but the menus don't disapear very cleanly... You can hack the Javascript around to do things like, alter the position of the popup relatively, so it appears 'from' the parent element rather than over it; or even at the position of the mouse exactly. You also might want to make the popups disapear automatically when the user mouses out of the vicinity of the popup... I'll leave that to you to research:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Simple PopupMenu</title>



<style type="text/css">

/*Important style definition is 'position:absolute'. Means the element can

be placed at an arbitrary position without affecting the flow of surrounding

elements*/

.popup

{

        position:absolute;

        border:solid 1px black;

        background-color:white;

        padding:4px;

}

</style>



<script type="text/javascript">

//findPos function is from http://www.quirksmode.org/js/findpos.html;

//where its workings are explained in more detail.

function findPos(obj) {

        var curleft = curtop = 0;

        if (obj.offsetParent) {

                curleft = obj.offsetLeft

                curtop = obj.offsetTop

                while (obj = obj.offsetParent) {

                        curleft += obj.offsetLeft

                        curtop += obj.offsetTop

                }

        }

        return [curleft,curtop];

}



//Display a named menu, at the position of another object

function display_menu(parent,named)

{

        //get the named menu

        var menu_element = document.getElementById(named);

        //override the 'display:none;' style attribute

        menu_element.style.display = "";

        //get the placement of the element that invoked the menu...

        var placement = findPos(parent);

        //...and put the menu there

        menu_element.style.left = placement[0] + "px";

        menu_element.style.top = placement[1] + "px";

}



//Hide a named menu

function hide_menu(named)

{

        //get the named menu

        var menu_element = document.getElementById(named);

        //hide it with a style attribute

        menu_element.style.display = "none";

}

</script>

</head>

<body>



<!--Define the menu's contents. It's important to put the display:none style attribute

here rather than in a <style> block, because it can be overriden easily if it's assigned here-->

<div class="popup" id="menu1" style="display:none;">

        <ul>

                <li><a href="#">Menu 1</a></li>

                <li><a href="#">Menu 2</a></li>

                <li><a href="#">Menu 3</a></li>

        </ul>

        <!--Hide the menu when the text (Close popup) is clicked-->

        <span onclick="hide_menu('menu1');">(Close popup)</span>

</div>



<!--Mouseovering on this element will show the menu with id 'menu1', at the position of {this}, that is

this element-->

<a href="#" onmouseover="display_menu(this,'menu1');">Popup on hover</a>

<p>

Other text here, should not be obscured on pops.

</p>

<p>

Other text here, should not be obscured on pops.

</p>

<p>

Other text here, should not be obscured on pops.

</p>

<a href="#" onmouseover="display_menu(this,'menu1')">Popup on hover</a>



</body>

</html>

As said, a similar effect is afforded much more gracefully using only HTML and CSS. The following example is tested to work in Opera 9 and Firefox 2, but DOES NOT WORK IN INTERNET EXPLORER 6. It uses the CSS 'next element' selector; which doesn't work in IE6 (nor does parent:hover child, strangely enough). This menu WILL go away automagically when the user mouses away from it; but, as said, won't work with old browsers...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>CSS PopupMenu</title>

<style>

div.popup

{

        display:none;

        position:absolute;

        border:solid 1px black;

        padding:8px;

        background-color:white;

}

a.popup:hover + div.popup

{

        display:block;

}

div.popup:hover

{

        display:block;

}

</style>

</head>

<body>



<a class="popup" href="#">Popup on hover</a>



<div class="popup">

<ul>

<li><a href="#">Menu 1</a></li>

<li><a href="#">Menu 2</a></li>

<li><a href="#">Menu 3</a></li>

</ul>

</div>



<p>

Other text here, should not be obscured on pops.

</p>



</body>

</html>