[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Drop down menu (onClick event)

Posted on 1999-11-03
4
Medium Priority
?
461 Views
Last Modified: 2011-10-03
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.
0
Comment
Question by:anamikam
  • 3
4 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2181566
http://www.webreference.com/dhtml/

look at hiermenu

Michel
0
 
LVL 4

Expert Comment

by:jbrugman
ID: 2183508
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>


0
 
LVL 4

Expert Comment

by:jbrugman
ID: 2183523
0
 
LVL 4

Accepted Solution

by:
jbrugman earned 100 total points
ID: 2193756
anamikam, i post an answer to see if you're still interested...
Did michel, or my idea help you further?
0

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

590 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