?
Solved

Menu list shown when mouseover event is triggered

Posted on 2003-03-08
5
Medium Priority
?
237 Views
Last Modified: 2010-04-06
Dear experts,

Most of the websites show dropdown list of menu when mouse is moved over its main menu. For example, in Microsoft homepage(http://www.microsoft.com/), when your mouse is moved over Subscribe menu, the dropdown list consists of Newsletters and Software will appear. I want to know how to make the item list to show upwards as my menu bar is located at the bottom of the homepage. Please advise.

Thank you very much!




0
Comment
Question by:hllim
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 28

Expert Comment

by:sybe
ID: 8094315
Well MS has a lot of code there, but basically the menu list is a <div> with style.display='none' and a high z-index (so it appears on top of other divs).

There is a onmouseover which sets the display of the div to 'block' (so it becomes visible), and an onmouseout which sets the display to 'none' again.

To show the div show upwards, all you need to do is position the div on the place you want it.


0
 
LVL 2

Accepted Solution

by:
JoaTex earned 1000 total points
ID: 8095205
Hi
See if This can Suites You.

<HTML>

<HEAD>
<TITLE></TITLE>
<META NAME="GENERATOR" CONTENT="CutePage 2.0">
<style>


.menuskin{
position:absolute;
width:165px;
background-color:menu;
border:2px solid black;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
visibility:hidden;
}

.menuskin a{
text-decoration:none;
color:black;
padding-left:10px;
padding-right:10px;
}

#mouseoverstyle{
background-color:highlight;
}

#mouseoverstyle a{
color:white;
}

</style>

<script language="JavaScript1.2">



var linkset=new Array()


linkset[0]='<div class="menuitems"><a href="http://dynamicdrive.com">Dynamic Drive</a></div>'
linkset[0]+='<div class="menuitems"><a href="http://javascriptkit.com">JavaScript Kit</a></div>'
linkset[0]+='<div class="menuitems"><a href="http://freewarejava.com">Freewarejava</a></div>'

linkset[1]='<div class="menuitems"><a href="http://msnbc.com">MSNBC</a></div>'
linkset[1]+='<div class="menuitems"><a href="http://cnn.com">CNN</a></div>'
linkset[1]+='<div class="menuitems"><a href="http://abcnews.com">ABC News</a></div>'
linkset[1]+='<div class="menuitems"><a href="http://www.washingtonpost.com">Washington Post</a></div>'



var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var ns6=document.getElementById&&!document.all
var ns4=document.layers

function showmenu(e,which){

if (!document.all&&!document.getElementById&&!document.layers)
return

clearhidemenu()

menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : ""
menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj

if (ie4||ns6)
menuobj.innerHTML=which
else{
menuobj.document.write('<layer name=gui bgColor=#E6E6E6 width=165 onmouseover="clearhidemenu()" onmouseout="hidemenu()">'+which+'</layer>')
menuobj.document.close()
}

menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height
eventX=ie4? event.clientX : ns6? e.clientX : e.x
eventY=ie4? event.clientY : ns6? e.clientY : e.y

//Find out how close the mouse is to the corner of the window
var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX : ns6? window.pageXOffset+eventX : eventX

//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight : ns6? window.pageYOffset+eventY-menuobj.contentheight : eventY-menuobj.contentheight
else
menuobj.thestyle.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY
menuobj.thestyle.visibility="visible"
return false
}

function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function hidemenu(){
if (window.menuobj)
menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide"
}

function dynamichide(e){
if (ie4&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
if (ie4||ns6||ns4)
delayhide=setTimeout("hidemenu()",500)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

function highlightmenu(e,state){
if (document.all)
source_el=event.srcElement
else if (document.getElementById)
source_el=e.target
if (source_el.className=="menuitems"){
source_el.id==(state=="on")? "mouseoverstyle" : ""
}
else{
while(source_el.id!="popmenu"){
source_el=document.getElementById? source_el.parentNode : source_el.parentElement
if (source_el.className=="menuitems"){
source_el.id==(state=="on")? "mouseoverstyle" : " "
}
}
}
}

if (ie4||ns6)
document.onclick=hidemenu

</script>
</HEAD>

<BODY>
<div onmouseover="clearhidemenu();highlightmenu(event,'on')" class="menuskin" onmouseout="highlightmenu(event,'off');dynamichide(event)" id="popmenu">
</div>

<a onmouseover="showmenu(event,linkset[0])" href="#" onmouseout="delayhidemenu()">Webmaster Links</a>&nbsp;&nbsp
<a onmouseover="showmenu(event,linkset[1])" href="#" onmouseout="delayhidemenu()">News sites</a>

</BODY>
</HTML>
Jo
0
 
LVL 3

Expert Comment

by:AmericanDogma
ID: 8100872
I recomend using the highly custimizable, and completely cross browser menu listed here.

http://www.dhtmlcentral.com/projects/coolmenus/?m=10

This menu script has the functionailty you desire and has been tested indepth by countless individuals
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 9115222
This question has been classified abandoned. I will make a recommendation to the
moderators on its resolution in a week or two. I appreciate any comments
that would help me to make a recommendation.

<note>
Unless it is clear to me that the question has been answered I will recommend delete.  It is possible that a Grade less than A will be given if no expert makes a case for an A grade. It is assumed that any participant not responding to this request is no longer interested in its final disposition.
</note>

If the user does not know how to close the question, the options are here:
http://www.experts-exchange.com/help/closing.jsp


Cd&

0
 
LVL 6

Expert Comment

by:Programming_Gal
ID: 9647755
No comment has been added lately, so it's time to clean up this TA.
I will leave a recommendation in the Cleanup topic area that this question is:

Accept JoaTex's comment as answer

Please leave any comments here within the next seven days.

PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!

Programming_Gal
EE Cleanup Volunteer
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question