Mouseover dropdown menu

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.
segafreakAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
GibbleConnect With a Mentor Commented:
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
 
ClassyLinksCommented:
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
 
COBOLdinosaurCommented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
segafreakAuthor Commented:
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
 
segafreakAuthor Commented:
errr...nvm.forget bout the mouseout thing.it didnt work out exactly the way I expected it to.
0
 
COBOLdinosaurCommented:
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
 
GibbleCommented:
BTW this works with the onMouseOver and onMouseOut events to open and close the menu.
0
 
GibbleCommented:
And it probably won't work in NS without some tweaking.
0
 
ClassyLinksCommented:
Hey Gib....lot of work for only 20 pts.  ;-)
0
 
GibbleCommented:
It was allready done.  Just posted it.
0
 
GibbleCommented:
But I do agree, a question like this is worth at least 100 pts.
0
 
segafreakAuthor Commented:
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
 
COBOLdinosaurCommented:
That is a very fair approach.  :^)

Cd&
0
 
ClassyLinksCommented:
Sure thing.
0
 
GibbleCommented:
Sounds good.
--Gibb
0
 
segafreakAuthor Commented:
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
 
LunchyCommented:
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
 
ClassyLinksCommented:
Thanks!
0
All Courses

From novice to tech pro — start learning today.