Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 221
  • Last Modified:

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.
0
segafreak
Asked:
segafreak
  • 6
  • 4
  • 4
  • +2
1 Solution
 
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
 
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
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
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:
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 6
  • 4
  • 4
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now