Solved

Mouseover dropdown menu

Posted on 2001-09-04
18
202 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
How our DevOps Teams Maximize Uptime

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

 

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!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
app server have enough resources... 2 52
Standard for Web Development 3 47
Error in Angular 2 when showing in grid 4 21
Adding items to a C# list incrementally 5 28
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.

808 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