Solved

Mouseover dropdown menu

Posted on 2001-09-04
18
201 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
  • 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

813 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now