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.
------
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.
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,UR L,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#lo sodium",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.substrin g(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,curr State.leng th)
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.index Of("2.01") >= 0 && navigator.userAgent.indexO f("(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><H 3>Composit ion 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><H R>")
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.paren t.status=\ '" + theGIFStatus + "\';return true;\" onClick=\"toggle(" + i + ");var timeoutID = setTimeout('history.go(0)' ,300);retu rn " + activeWidget + "\"><IMG SRC=\"" + theGIF + "\" HEIGHT=11 WIDTH=11 BORDER=0></A>"
} else {
newOutline += "<A HREF=\"javascript:history. go(0)\" onMouseOver=\"window.paren t.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.paren t.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>
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,UR
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#lo
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.substrin
}
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)
newString += currState.substring(0,n-1)
newString += expanded ^ 1 // Bitwise XOR clicked item
newString += currState.substring(n,curr
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
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
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.index
}
// 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><H
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><H
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
// 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.paren
} else {
newOutline += "<A HREF=\"javascript:history.
}
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.paren
}
prevIndentDisplayed = currIndent
showMyDaughter = expanded
if (db.length > 25) {
document.write(newOutline)
newOutline = ""
}
}
}
newOutline += "</H4></PRE>"
document.write(newOutline)
// end -->
</SCRIPT>
</BODY>
</HTML>
ps. use
http://oldlook.experts-exchange.com/questions/10228683/Drop-down-menu-onClick-event.html
to see the code properly.
http://oldlook.experts-exchange.com/questions/10228683/Drop-down-menu-onClick-event.html
to see the code properly.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
look at hiermenu
Michel