Solved

Mouseover dropdown menu

Posted on 2001-09-04
18
206 Views
Last Modified: 2006-11-17
Hi. I would like to know if there's a way to drop down a menu when a link is mouse overed. There are several links, and they are in an unordered list. Can anyone help? Thanks.
0
Comment
Question by:segafreak
[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
  • 6
  • 4
  • 4
  • +2
18 Comments
 
LVL 7

Expert Comment

by:ClassyLinks
ID: 6456960
There is a whole list of this type of menu on this page:

http://www.simplythebest.net/info/dhtml_menus.html

You're talking about the ones they call rollover menus.

Take your pick  8-)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6456989
The minimum recommended points for and "easy" question is 50.  This
is a little more difficult than "easy".


<HTML>
<!-- IE only dynamically expand a list from a link
-->
<head>
<STYLE>
   .EVNTcls {display:none}
</STYLE>
</HEAD>
<BODY>
<DIV>
<A HREF="someurl"
   onMouseover="document.all['LST1'].style.display='block'"> some text
</A>
</DIV>
<DIV ID="LST1" CLASS="EVNTcls">
<ul>
   <li><a href="somelink"> item number 1 </a></li>
   <li><a href="somelink"> item number 2 </a></li>
   <li><a href="somelink"> item number 3 </a></li>
   <li><a href="somelink"> item number 4 </a></li>
 </ul>
</DIV>
</BODY>
</HTML>

HTH

Cd&
0
 

Author Comment

by:segafreak
ID: 6459309
coboldino, yours worked. but is there a way to make the menu disappear on mouseout???

sorry bout the lack of points....I'm not exactly that "rich" with points.
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

Author Comment

by:segafreak
ID: 6459322
errr...nvm.forget bout the mouseout thing.it didnt work out exactly the way I expected it to.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6460331
Mouseout is not the way to collapse it,  Just do the body tag like this:

<BODY onClick="document.all['LST1'].style.display='none'">

that will collapse it for a click anywhere on the page, like the exlpore menu bar does.

Cd&
0
 
LVL 4

Accepted Solution

by:
Gibble earned 70 total points
ID: 6461262
This is the BEST example I can possibly give you, I created this myself and it takes alot of possible bugs into account.

<script>
var liveMenu = null;

function openmenu(myName) {
      hidemenu(liveMenu);
      liveMenu = myName;
      on_off(document.all(myName), "on");
      document.all(myName + 'list').style.display = '';
      document.all(myName + 'list').style.left = document.all(myName).offsetParent.offsetLeft + document.all(myName).offsetLeft
      document.all(myName + 'list').style.top = document.all(myName).offsetParent.offsetTop + document.all(myName).offsetTop + document.all(myName).offsetHeight
      hideElement("SELECT", document.all(myName + 'list'));
      hideElement("OBJECT", document.all(myName + 'list'));
      hideElement("IFRAME", document.all(myName + 'list'));
}

function hidemenu(myName) {
      if (myName != null) {
            on_off(document.all(myName), "off");
            document.all(myName + 'list').style.display = 'none';
              document.all(myName + 'list').style.left = document.all(myName).offsetLeft
              document.all(myName + 'list').style.top = document.all(myName).offsetTop + document.all(myName).offsetHeight
        }
      showElement("SELECT");
      showElement("OBJECT");
      showElement("IFRAME");
}

function on_off(myObject, myForceState) {
  var myString = myObject.className;
  var myBaseClass = "";
  if (myForceState == "on" || myForceState == "off") {
    if (myString.substring(myString.length - 3, myString.length) == "off") {
              myObject.className = myString.substring(0, myString.length - 3) + myForceState;
    } else {
            myObject.className = myString.substring(0, myString.length - 2) + myForceState;
    }
  } else { //It was a garbage or empty force state
    if (myString.substring(myString.length - 3, myString.length) == "off") {
              myObject.className = myString.substring(0, myString.length - 3) + "on";
    } else {
            myObject.className = myString.substring(0, myString.length - 2) + "off";
    }
  }
}

function hideElement(elmID, myLayer) {
      var layerTop = myLayer.offsetTop;
      var layerHeight = myLayer.offsetHeight;
      var layerLeft = myLayer.offsetLeft;
      var layerWidth = myLayer.offsetWidth;

      //If layer has a parent find its true top and left positions
      if (myLayer.offsetParent) {
            myParent = myLayer.offsetParent
            while (myParent.tagName.toUpperCase() != "BODY") {
                  layerTop += myParent.offsetTop;
                  layerLeft += myParent.offsetLeft;
                  myParent = myLayer.offsetParent;
            }
      }

      //Loop through all elements to check for overlay
    for (i = 0; i < document.all.tags(elmID).length; i++)
    {
            //Grab elements to check one at a time
            myObj = document.all.tags(elmID)[i];

            var objTop = myObj.offsetTop;
            var objHeight = myObj.offsetHeight;
            var objLeft = myObj.offsetLeft;
            var objWidth = myObj.offsetWidth;

            //If object has a parent find its true top and left positions
            if (myObj.offsetParent) {
                  myParent = myObj.offsetParent
                  while (myParent.tagName.toUpperCase() != "BODY") {
                        objTop += myParent.offsetTop;
                        objLeft += myParent.offsetLeft;
                        myParent = myParent.offsetParent;
                  }
            }

            var layerBottom = (layerTop + layerHeight);
            var objBottom = (objTop + objHeight);
            var layerRight = (layerLeft + layerWidth);
            var objRight = (objLeft + objWidth);

            if ((layerTop > objTop || layerBottom > objTop) &&
                (layerBottom < objBottom || layerTop < layerBottom)) {
                  if ((layerLeft > objLeft || layerRight > objLeft) &&
                      (layerRight < objRight || layerLeft < layerRight)) {
                              myObj.style.visibility = "hidden";
                              status = "Some Elements Hidden too Show Menu.";
                  }
            }
      }
}

function showElement(elmID)
{
    for (i = 0; i < document.all.tags(elmID).length; i++)
    {
         obj = document.all.tags(elmID)[i];
         if (! obj || ! obj.offsetParent)
              continue;
         obj.style.visibility = "";
    }
      status = "";
}

</script>

<style>

.NAVYMENUmenu_off
{
    FONT: bold xx-small Verdana;
    COLOR: white;
    BACKGROUND-COLOR: #000066;
    HEIGHT: 12pt;
    LINE-HEIGHT: 12pt;
}

.NAVYMENUmenu_on
{
    FONT: bold xx-small Verdana;
    COLOR: #BB0000;
    BACKGROUND-COLOR: #000066;
    HEIGHT: 12pt;
    LINE-HEIGHT: 12pt;
    CURSOR: hand;
}

.NAVYMENUmenuContainer{
    HEIGHT: 12pt;
    LINE-HEIGHT: 12pt;
    WIDTH: 150;
    FONT: bold xx-small Verdana;
    BACKGROUND-COLOR: #000066;
    z-index: 999999999999999999999999;
}

.NAVYMENUitem_off
{
    COLOR: white;
}
.NAVYMENUitem_on
{
    COLOR: #BB0000;
}

div.NAVYMENUspacer
{
}

hr.NAVYMENUspacer
{
}

.NAVYMENUicon
{
      WIDTH:12;
      HEIGHT:12;
}
</style>

<span id="mnuEXAMPLETOP" name="mnuEXAMPLETOP">
      <span onMouseOver="javascript:openmenu(this.id);self.event.cancelBubble=true;" class="NAVYMENUmenu_off" id="mnuEXAMPLETOPmenu1" name="mnuEXAMPLETOPmenu1">
            <span>
                  Menu Heading
            </span>
            <span style="position:absolute;display:none;" class="NAVYMENUmenucontainer" id="mnuEXAMPLETOPmenu1list">
                  <div onMouseOver="javascript:on_off(this, '');self.event.cancelBubble=true;" onMouseOut="javascript:on_off(this, '');" class="NAVYMENUitem_off" onClick="javascript:navigate('someURL1')">
                        <span class="NAVYMENUicon">
                        <!-- - - -->
                        </span>
                        ITEM 1
                  </div>
                  <div onMouseOver="javascript:on_off(this, '');self.event.cancelBubble=true;" onMouseOut="javascript:on_off(this, '');" class="NAVYMENUitem_off" onClick="javascript:navigate('someURL2')">
                        <span class="NAVYMENUicon">
                        <!-- - - -->
                        </span>
                        ITEM 2
                  </div>
            </span>
      </span>
</span>
0
 
LVL 4

Expert Comment

by:Gibble
ID: 6461268
BTW this works with the onMouseOver and onMouseOut events to open and close the menu.
0
 
LVL 4

Expert Comment

by:Gibble
ID: 6461270
And it probably won't work in NS without some tweaking.
0
 
LVL 7

Expert Comment

by:ClassyLinks
ID: 6461366
Hey Gib....lot of work for only 20 pts.  ;-)
0
 
LVL 4

Expert Comment

by:Gibble
ID: 6461380
It was allready done.  Just posted it.
0
 
LVL 4

Expert Comment

by:Gibble
ID: 6461382
But I do agree, a question like this is worth at least 100 pts.
0
 

Author Comment

by:segafreak
ID: 6478588
Err sorry guys for making you go through so much work just for 20 points...

But the thing that may upset you guys further is that I've modified a script I picked up from simplythebest.net and implemented it. I did not have the chance to try out Gibble's script, sorry, as I was busy nowadays.

I'll tell you what. I'll increase the points to bout 100 or so and split it among you guys. Unevenly of cos, on account of Gibble's contribution. I'll decide on the weightage later. Let me know if you have objections to this?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6479195
That is a very fair approach.  :^)

Cd&
0
 
LVL 7

Expert Comment

by:ClassyLinks
ID: 6479399
Sure thing.
0
 
LVL 4

Expert Comment

by:Gibble
ID: 6479435
Sounds good.
--Gibb
0
 

Author Comment

by:segafreak
ID: 6521906
ok.
sorry guys that I took such a long time to reply back to this qn. Been kinda laid down with work of late.
I'll split up the poings in this order:
Gibble - 70pts
ClassyLinks - 10pts
COBOLdinosaur - 20pts
0
 
LVL 2

Expert Comment

by:Lunchy
ID: 6521998
Points reduced for split

Points for ClassyLinks here:
http://www.experts-exchange.com/jsp/qShow.jsp?ta=webdevgen&qid=20189821

Points for COBOLdinosaur here:
http://www.experts-exchange.com/jsp/qShow.jsp?ta=webdevgen&qid=20189819

Lunchy
Friendly Neighbourhood Community Support Moderator
0
 
LVL 7

Expert Comment

by:ClassyLinks
ID: 6523164
Thanks!
0

Featured Post

Do you have a plan for Continuity?

It's inevitable. People leave organizations creating a gap in your service. That's where Percona comes in.

See how Pepper.com relies on Percona to:
-Manage their database
-Guarantee data safety and protection
-Provide database expertise that is available for any situation

Question has a verified solution.

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

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
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.

623 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