Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Menu list shown when mouseover event is triggered

Posted on 2003-03-08
5
Medium Priority
?
238 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
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

577 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