Link to home
Start Free TrialLog in
Avatar of anamikam
anamikam

asked on

Drop down menu (onClick event)

My menu say looks like this:
------
Menu1
Menu2
Menu3
------
I want the menu to drop down when clicked and show all the submenus along with the options already there
------
Menu1
  Submenu1
  Submenu2
  Submenu3
Menu2
Menu3
------
Someone please help me with this.
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

http://www.webreference.com/dhtml/

look at hiermenu

Michel
Avatar of jbrugman
jbrugman

Hmm. You need a layer-compatible browser for that.
Another way to do it, is seen in the following example of danny goodman, still like it this way better over dhtml...
(works in all browsers)

http://www.dannyg.com/javascript/ol/outline.htm

code follows :)

<!--
    -------------------------------------------------------------------------
                OUTLINE STYLE TABLE OF CONTENTS in JAVASCRIPT
                    by Danny Goodman (dannyg@dannyg.com)
                    Analyzed and described at length in
                   "Danny Goodman's JavaScript Handbook"
                      (IDG Books ISBN 0-7645-3003-8)
   
    This program is Copyright 1996 by Danny Goodman.  You may adapt
    this outliner for your Web pages, provided these opening credit
    lines (down to the lower dividing line) are in your outliner HTML document.
    You may not reprint or redistribute this code without permission from
    the author.
    -------------------------------------------------------------------------

        8 May 1996  1. Insert accidentally omitted i++ loop counter increment in
                       getCurrState() function, which could affect users if your
                       outline page writes cookies for other purposes (thanks to
                       eagle-eye Brent Halliburton).
                    2. Added capability to display an entry that is not a link.
                       When adding a new db[] array entry, pass an empty string
                       for the third parameter, as shown for "Peas" and "Pickles"
                       entries in the sample data below (thanks to Johannes Gamperl
                       for the suggestion).
                    3. Improved handling of the 2.01 'reentrant window' bug now
                       accommodates all Unix and Mac Navigators for 2.01 only.
                    4. Added a condition that begins writing outlines longer than
                       25 entries more quickly (rather than ganging them all
                       together and writing them all at once); while overall
                       outline writing is slower, the _perceived_ speed is faster,
                       because stuff starts appearing in the outline frame sooner.
                       However, if the user has scrolled the outliner frame below
                       the top, Navigator waits for the frame to be written before
                       it displays anything.

     15 March 1996  Fix for 2.01 Macintosh bug (reentrant window alert):
                    a. Remove 'refreshMe()' function
                    b. Add function that checks Navigator for client platform
                       (I dislike having to do this, but there is no convenient way
                       around it, I'm afraid)
                    c. Change construction of outline HTML for widget link so
                       that it writes different versions for the Mac and all other
                       platforms.  For Mac, HREF points to "#", instead of old
                       javascript:refreshMe() function (the focal point of the
                       reintroduced Navigator bug), while frame refresh takes place
                       after a brief timeout (to allow cookie to set) as a second
                       statement in the onClick= event handler.
     
     21 February 1997  Added intelligence so that clicking on a fully nested
                       widget icon does not cause the outline to reload.
                       Note: this is hard-wired for an end-point icon named
                       "daughter.gif".  If you change the name or URL of the
                       widget icons in 'getGIF()', then be sure to change
                       the "daughter.gif" reference in the <BODY> script.

     24 October 1997   Script speedup for Navigator 4, reduces access to cookie
-->
<HTML>
<HEAD>
<TITLE>Food Selection Outline</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- begin hiding

// **functions that establish objects and environment**
// basic array maker
function makeArray(n) {
      this.length = n
      return this
}

// object constructor for each outline entry
// (see object-building calls, below)
function dbRecord(mother,display,URL,indent){
      this.mother = mother   // is this item a parent?
      this.display = display // text to display
      this.URL = URL         // link tied to text; if empty string, item appears as straight text
      this.indent = indent   // how deeply nested?
      return this
}

// create object containing outline content and attributes
// To adapt outline for your use, modify this table.  Make sure
// that the size of the array (db[i]) is reflected in the call
// to makeArray(i).  See the dbRecord() function, above, for the
// meaning of the four parameters in each array entry.
var db = new makeArray(10)
db[1] = new dbRecord(true,  "Peas",      "",0)
db[2] = new dbRecord(false, "Boiled",    "foods.htm#boiled",1)
db[3] = new dbRecord(true,  "Canned",    "foods.htm#canned",1)
db[4] = new dbRecord(false, "Alaska",    "foods.htm#alaska",2)
db[5] = new dbRecord(false, "Low-Sodium","foods.htm#losodium",2)
db[6] = new dbRecord(true,  "Pickles",   "",0)
db[7] = new dbRecord(true,  "Cucumber",  "foods.htm#cucumber",1)
db[8] = new dbRecord(false, "Dill",      "foods.htm#dill",2)
db[9] = new dbRecord(false, "Fresh",     "foods.htm#fresh",2)
db[10] = new dbRecord(false,"Sour",      "foods.htm#sour",2)

// ** functions that get and set persistent cookie data **
// set cookie data
var mycookie = document.cookie
function setCurrState(setting) {
        mycookie = document.cookie = "currState=" + escape(setting)
}
// retrieve cookie data
function getCurrState() {
        var label = "currState="
        var labelLen = label.length
        var cLen = mycookie.length
        var i = 0
        while (i < cLen) {
                var j = i + labelLen
                if (mycookie.substring(i,j) == label) {
                        var cEnd = mycookie.indexOf(";",j)
                        if (cEnd ==     -1) {
                                cEnd = mycookie.length
                        }
                        return unescape(mycookie.substring(j,cEnd))
                }
                i++
        }
        return ""
}

// **function that updates persistent storage of state**
// toggles an outline mother entry, storing new value in the cookie
function toggle(n) {
      if (n != 0) {
            var newString = ""
            var currState = getCurrState() // of whole outline
            var expanded = currState.substring(n-1,n) // of clicked item
            newString += currState.substring(0,n-1)
            newString += expanded ^ 1 // Bitwise XOR clicked item
            newString += currState.substring(n,currState.length)
            setCurrState(newString) // write new state back to cookie
      }
}

// **functions used in assembling updated outline**
// returns the proper GIF file name for each entry's control
function getGIF(n) {
      var mom = db[n].mother  // is entry a parent?
      var expanded = getCurrState().substring(n-1,n) // of clicked item
      if (!mom) {
            return "daughter.gif"
      } else {
            if (expanded == 1) {
                  return "exploded.gif"
            }
      }
      return "collapsd.gif"
}

// returns the proper status line text based on the icon style
function getGIFStatus(n) {
      var mom = db[n].mother  // is entry a parent
      var expanded = getCurrState().substring(n-1,n) // of rolled item
      if (!mom) {
            return "No further items"
      } else {
            if (expanded == 1) {
                  return "Click to collapse nested items"
            }
      }
      return "Click to expand nested items"
}

// returns padded spaces (in multiples of 3) for indenting
function pad(n) {
      var result = ""
      for (var i = 1; i <= n; i++) {
            result += "   "
      }
      return result
}

// initialize 'current state' storage field
if (getCurrState() == "" || getCurrState().length != db.length) {
      initState = ""
      for (i = 1; i <= db.length; i++) {
            initState += "0"
      }
      setCurrState(initState)
}

// see if user is running a 2.01 Navigator with the reentrant window bug
function isReentrantBuggy() {
      return (navigator.userAgent.indexOf("2.01") >= 0 && navigator.userAgent.indexOf("(Win") == -1) ? true :false
}
// end -->
</SCRIPT>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- start
// build new outline based on the values of the cookie
// and data points in the outline data array.
// This fires each time the user clicks on a control,
// because the HREF for each one reloads the current document.
var prevIndentDisplayed = 0
var showMyDaughter = 0
document.write("<CENTER><H3>Composition of Selected Foods</H3>")
document.write("<PRE><IMG SRC='daughter.gif' HEIGHT=11 WIDTH=11 BORDER=0>    <IMG SRC='exploded.gif' HEIGHT=11 WIDTH=11 BORDER=0>    <IMG SRC='daughter.gif' HEIGHT=11 WIDTH=11 BORDER=0></PRE></CENTER><HR>")
var newOutline = "<PRE><H4>"   // let padded spaces make indents

// cycle through each entry in the outline array
for (var i = 1; i <= db.length; i++) {
      var theGIF = getGIF(i)                        // get the image
      var theGIFStatus = getGIFStatus(i)  // get the status message
      var currIndent = db[i].indent            // get the indent level
      var expanded = getCurrState().substring(i-1,i) // current state
      // display entry only if it meets one of three criteria
      if (currIndent == 0 || currIndent <= prevIndentDisplayed || (showMyDaughter == 1 && (currIndent - prevIndentDisplayed == 1))) {
            newOutline += pad(currIndent)
            var activeWidget = (theGIF == "daughter.gif") ? false : true
            if (isReentrantBuggy()) {
                  newOutline += "<A HREF=# onMouseOver=\"window.parent.status=\'" + theGIFStatus + "\';return true;\" onClick=\"toggle(" + i + ");var timeoutID = setTimeout('history.go(0)',300);return " + activeWidget + "\"><IMG SRC=\"" + theGIF + "\" HEIGHT=11 WIDTH=11 BORDER=0></A>"
            } else {
                  newOutline += "<A HREF=\"javascript:history.go(0)\" onMouseOver=\"window.parent.status=\'" + theGIFStatus + "\';return true;\" onClick=\"toggle(" + i + ");return " + activeWidget + "\"><IMG SRC=\"" + theGIF + "\" HEIGHT=11 WIDTH=11 BORDER=0></A>"            
            }
            if (db[i].URL == "" || db[i].URL == null) {
                  newOutline += " " + db[i].display + "<BR>"      // no link, just a listed item      
            } else {
                  newOutline += " <A HREF=\"" + db[i].URL + "\" TARGET=\"Frame2\" onMouseOver=\"window.parent.status=\'View " + db[i].display + "...\';return true;\">" + db[i].display + "</A><BR>"
            }
            prevIndentDisplayed = currIndent
            showMyDaughter = expanded
            if (db.length > 25) {
                  document.write(newOutline)
                  newOutline = ""
            }
      }
}
newOutline += "</H4></PRE>"
document.write(newOutline)

// end -->
</SCRIPT>
</BODY>
</HTML>


ASKER CERTIFIED SOLUTION
Avatar of jbrugman
jbrugman

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial