Accordion Menu script (v1.3)

Home Dynamic Content Accordion Content script Accordion Menu

Accordion Menu script (v1.3)

Creating an Accordion Menu is trivial using Accordion Content script. It basically just comes down to styling your headers and expanding content to conform to that desired menu look. Lets see two Accordion Menu examples to get you on your way.

Important: Both of the examples below rely on the same two .js files of Accordion Content script, so make sure they are downloaded already:

Bullet List Accordion Menu

In this menu example, the menu headers are H3 tags, with each sub menu being UL tags that expand/ contract. A CSS class gets dynamically added to a header when it's expanded to style the expanded header:

CSS Library

CSS Drive

JavaScript Kit

FeedBack

Regular contents here. Header does not expand or contact.

Full HTML Source:

Select All
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <script type="text/javascript" src="jquery-1.2.2.pack.js"></script> <script type="text/javascript" src="ddaccordion.js"> /*********************************************** * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts * This notice must stay intact for legal use ***********************************************/ </script> <script type="text/javascript"> ddaccordion.init({ headerclass: "expandable", //Shared CSS class name of headers group that are expandable contentclass: "categoryitems", //Shared CSS class name of contents group collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "normal", //speed of animation: "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed //do nothing } }) </script> <style type="text/css"> .arrowlistmenu{ width: 180px; /*width of accordion menu*/ } .arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/ font: bold 14px Arial; color: white; background: black url(titlebar.png) repeat-x center left; margin-bottom: 10px; /*bottom spacing between header and rest of content*/ text-transform: uppercase; padding: 4px 0 4px 10px; /*header text is indented 10px*/ cursor: hand; cursor: pointer; } .arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/ background-image: url(titlebar-active.png); } .arrowlistmenu ul{ /*CSS for UL of each sub menu*/ list-style-type: none; margin: 0; padding: 0; margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/ } .arrowlistmenu ul li{ padding-bottom: 2px; /*bottom spacing between menu items*/ } .arrowlistmenu ul li a{ color: #A70303; background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/ display: block; padding: 2px 0; padding-left: 19px; /*link text is indented 19px*/ text-decoration: none; font-weight: bold; border-bottom: 1px solid #dadada; font-size: 90%; } .arrowlistmenu ul li a:visited{ color: #A70303; } .arrowlistmenu ul li a:hover{ /*hover state CSS*/ color: #A70303; background-color: #F3F3F3; } </style> </head> <body> <div class="arrowlistmenu"> <h3 class="menuheader expandable">CSS Library</h3> <ul class="categoryitems"> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li> </ul> <h3 class="menuheader expandable">CSS Drive</h3> <ul class="categoryitems"> <li><a href="http://www.cssdrive.com">CSS Gallery</a></li> <li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li> <li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li> <li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li> <li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li> <li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li> </ul> <h3 class="menuheader expandable">JavaScript Kit</h3> <ul class="categoryitems"> <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li> <li><a href="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li> <li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li> <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li> <li><a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li> </ul> <h3 class="menuheader" style="cursor: default">FeedBack</h3> <div> Regular contents here. Header does not expand or contact. </div> </div> <p>Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page:</p> <p> - <a href="current.htm?expandable=0">Expand 1st header within "expandable" header group</a><br /> - <a href="current.htm?expandable=2">Expand 3rd header within "expandable" header group</a><br /> </p> <p>Helpful links: </p> <p> - <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm">Adding arbitrary links hat expand/ collapse the contents</a><br /> - <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm">Taking advantage of the oninit() and onopenclose() event handlers</a><br /> </p> </body> </html>

The menu uses three images for the purpose of styling the menu (download by right clicking, and select "Save As"):

See the frontpage of Accordion Content script for a full explanation of each setting inside the script.

Bullet List Accordion Menu with nested levels

The same menu as above, but this one illustrates how you would add a collapsible sub level. The key is simply to treat each level of category headers as a new instance of Accordion Content script, so the 2nd nested level would be a new instance.

CSS Library

CSS Drive

JavaScript Kit

FeedBack

Regular contents here. Header does not expand or contact.

Full HTML Source:

Select All
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <script type="text/javascript" src="jquery-1.2.2.pack.js"></script> <script type="text/javascript" src="ddaccordion.js"> /*********************************************** * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts * This notice must stay intact for legal use ***********************************************/ </script> <script type="text/javascript"> ddaccordion.init({ //top level headers initialization headerclass: "expandable", //Shared CSS class name of headers group that are expandable contentclass: "categoryitems", //Shared CSS class name of contents group collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "normal", //speed of animation: "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed //do nothing } }) ddaccordion.init({ //2nd level headers initialization headerclass: "subexpandable", //Shared CSS class name of sub headers group that are expandable contentclass: "subcategoryitems", //Shared CSS class name of sub contents group collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["opensubheader", "closedsubheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "normal", //speed of animation: "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed //do nothing } }) </script> <style type="text/css"> .arrowlistmenu{ width: 180px; /*width of accordion menu*/ } .arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/ font: bold 14px Arial; color: white; background: black url(titlebar.png) repeat-x center left; margin-bottom: 10px; /*bottom spacing between header and rest of content*/ text-transform: uppercase; padding: 4px 0 4px 10px; /*header text is indented 10px*/ cursor: hand; cursor: pointer; } .arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/ background-image: url(titlebar-active.png); } .arrowlistmenu ul{ /*CSS for UL of each sub menu*/ list-style-type: none; margin: 0; padding: 0; margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/ } .arrowlistmenu ul li{ padding-bottom: 2px; /*bottom spacing between menu items*/ } .arrowlistmenu ul li .opensubheader{ /*Open state CSS for sub menu header*/ background: lightblue !important; } .arrowlistmenu ul li .closedsubheader{ /*Closed state CSS for sub menu header*/ background: lightgreen !important; } .arrowlistmenu ul li a{ color: #A70303; background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/ display: block; padding: 2px 0; padding-left: 19px; /*link text is indented 19px*/ text-decoration: none; font-weight: bold; border-bottom: 1px solid #dadada; font-size: 90%; } .arrowlistmenu ul li a:visited{ color: #A70303; } .arrowlistmenu ul li a:hover{ /*hover state CSS*/ background-color: #F3F3F3; } .arrowlistmenu ul li a.subexpandable:hover{ /*hover state CSS for sub menu header*/ background: lightblue; } </style> </head> <body> <div class="arrowlistmenu"> <h3 class="menuheader expandable">CSS Library</h3> <ul class="categoryitems"> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li> </ul> <h3 class="menuheader expandable">CSS Drive</h3> <ul class="categoryitems"> <li><a href="http://www.cssdrive.com">CSS Gallery</a></li> <li><a href="http://www.cssdrive.com/index.php/menudesigns/" class="subexpandable">Menu Gallery</a> <ul class="subcategoryitems" style="margin-left: 15px"> <li><a href="http://www.cssdrive.com/index.php/main/category/C34/">Blue Color</a></li> <li><a href="http://www.cssdrive.com/index.php/main/category/C36/">Green Color</a></li> <li><a href="http://www.cssdrive.com/index.php/main/category/C37/">Orange Color</a></li> <li><a href="http://www.cssdrive.com/index.php/main/category/C33/">Red Color</a></li> <li><a href="http://www.cssdrive.com/index.php/main/category/C38/">Brown Color</a></li> </ul> </li> <li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li> <li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li> <li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li> <li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li> </ul> <h3 class="menuheader expandable">JavaScript Kit</h3> <ul class="categoryitems"> <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li> <li><a href="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li> <li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li> <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li> <li><a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li> </ul> <h3 class="menuheader" style="cursor: default">FeedBack</h3> <div> Regular contents here. Header does not expand or contact. </div> </div> <p>Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page:</p> <p> - <a href="current.htm?expandable=0">Expand 1st header within "expandable" header group</a><br /> - <a href="current.htm?expandable=1&subexpandable=0">Expand 2nd header within "expandable" header group and 1st header within nested "subexpandable" group</a><br /> </p> <p>Helpful links: </p> <p> - <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm">Adding arbitrary links hat expand/ collapse the contents</a><br /> - <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm">Taking advantage of the oninit() and onopenclose() event handlers</a><br /> </p> </body> </html>

The menu also uses three images for the purpose of styling the menu (download by right clicking, and select "Save As"):

Glossy Accordion Menu

In this example, the menu headers are A tags, with each sub menu being DIV tags that expand/ contract. The use of DIV tags for the sub menus is to facilitate content other than UL lists. An absolutely positioned icon image gets dynamically added to each header that changes depending on the header state.

Expand 1st header within menu above through a URL parameter

Entire HTML Source code:

Select All
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <script type="text/javascript" src="jquery-1.2.2.pack.js"></script> <script type="text/javascript" src="ddaccordion.js"> /*********************************************** * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts * This notice must stay intact for legal use ***********************************************/ </script> <script type="text/javascript"> ddaccordion.init({ headerclass: "submenuheader", //Shared CSS class name of headers group contentclass: "submenu", //Shared CSS class name of contents group collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["suffix", "<img src='plus.gif' class='statusicon' />", "<img src='minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "normal", //speed of animation: "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed //do nothing } }) </script> <style type="text/css"> .glossymenu{ margin: 5px 0; padding: 0; width: 170px; /*width of menu*/ border: 1px solid #9A9A9A; border-bottom-width: 0; } .glossymenu a.menuitem{ background: black url(glossyback.gif) repeat-x bottom left; font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; color: white; display: block; position: relative; /*To help in the anchoring of the ".statusicon" icon image*/ width: auto; padding: 4px 0; padding-left: 10px; text-decoration: none; } .glossymenu a.menuitem:visited, .glossymenu .menuitem:active{ color: white; } .glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/ position: absolute; top: 5px; right: 5px; border: none; } .glossymenu a.menuitem:hover{ background-image: url(glossyback2.gif); } .glossymenu div.submenu{ /*DIV that contains each sub menu*/ background: white; } .glossymenu div.submenu ul{ /*UL of each sub menu*/ list-style-type: none; margin: 0; padding: 0; } .glossymenu div.submenu ul li{ border-bottom: 1px solid blue; } .glossymenu div.submenu ul li a{ display: block; font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; color: black; text-decoration: none; padding: 2px 0; padding-left: 10px; } .glossymenu div.submenu ul li a:hover{ background: #DFDCCB; colorz: white; } </style> </head> <body> <div class="glossymenu"> <a class="menuitem" href="http://www.dynamicdrive.com/">Dynamic Drive</a> <a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/" >CSS Examples</a> <div class="submenu"> <ul> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li> </ul> </div> <a class="menuitem" href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a> <a class="menuitem" href="http://www.javascriptkit.com/domref/">DOM Reference</a> <a class="menuitem submenuheader" href="http://www.cssdrive.com">CSS Drive</a> <div class="submenu"> <ul> <li><a href="http://www.cssdrive.com">CSS Gallery</a></li> <li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li> <li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li> <li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li> <li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li> <li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li> </ul> <img src="http://i27.tinypic.com/sy7295.gif" style="margin: 10px 5px" /> </div> <a class="menuitem" href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a> </div> <p>Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page:</p> <p> - <a href="current.htm?submenuheader=0">Expand 1st header within "submenuheader" header group</a><br /> </p> <p>Helpful links: </p> <p> - <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm">Adding arbitrary links hat expand/ collapse the contents</a><br /> - <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm">Taking advantage of the oninit() and onopenclose() event handlers</a><br /> </p> </body> </html>

The menu uses four images for the purpose of styling the menu (download by right clicking, and select "Save As"):

See the frontpage of Accordion Content script for a full explanation of each setting inside the script.

Glossy Accordion Menu with responsive headers

Same menu as above, except this one also uses the oninit() and onopenclose() event handlers to run custom code when the menu has finished loading, plus when a header is clicked on, respectively. See Taking advantage of the oninit() and onopenclose() event handlers for details.

Entire HTML Source code:

Select All
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <script type="text/javascript" src="jquery-1.2.2.pack.js"></script> <script type="text/javascript" src="ddaccordion.js"> /*********************************************** * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts * This notice must stay intact for legal use ***********************************************/ </script> <script type="text/javascript"> ddaccordion.init({ headerclass: "submenuheader", //Shared CSS class name of headers group contentclass: "submenu", //Shared CSS class name of contents group collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["suffix", "<img src='plus.gif' class='statusicon' />", "<img src='minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "normal", //speed of animation: "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized myiframe=window.frames["myiframe"] if (expandedindices.length>0) //if there are 1 or more expanded headers myiframe.location.replace(headers[expandedindices.pop()].getAttribute('href')) //Get "href" attribute of final expanded header to load into IFRAME }, onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed if (state=="block" && isclicked==true){ //if header is expanded and as the result of the user clicking on it myiframe.location.replace(header.getAttribute('href')) } } }) </script> <style type="text/css"> .glossymenu{ margin: 5px 0; padding: 0; width: 170px; /*width of menu*/ border: 1px solid #9A9A9A; border-bottom-width: 0; } .glossymenu a.menuitem{ background: black url(glossyback.gif) repeat-x bottom left; font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; color: white; display: block; position: relative; /*To help in the anchoring of the ".statusicon" icon image*/ width: auto; padding: 4px 0; padding-left: 10px; text-decoration: none; } .glossymenu a.menuitem:visited, .glossymenu .menuitem:active{ color: white; } .glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/ position: absolute; top: 5px; right: 5px; border: none; } .glossymenu a.menuitem:hover{ background-image: url(glossyback2.gif); } .glossymenu div.submenu{ /*DIV that contains each sub menu*/ background: white; } .glossymenu div.submenu ul{ /*UL of each sub menu*/ list-style-type: none; margin: 0; padding: 0; } .glossymenu div.submenu ul li{ border-bottom: 1px solid blue; } .glossymenu div.submenu ul li a{ display: block; font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; color: black; text-decoration: none; padding: 2px 0; padding-left: 10px; } .glossymenu div.submenu ul li a:hover{ background: #DFDCCB; colorz: white; } </style> </head> <body> <div class="glossymenu"> <a class="menuitem" href="http://www.dynamicdrive.com/">Dynamic Drive</a> <a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/">CSS Examples</a> <div class="submenu"> <ul> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li> </ul> </div> <a class="menuitem" href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a> <a class="menuitem" href="http://www.javascriptkit.com/domref/">DOM Reference</a> <a class="menuitem submenuheader" href="http://www.cssdrive.com">CSS Drive</a> <div class="submenu"> <ul> <li><a href="http://www.cssdrive.com">CSS Gallery</a></li> <li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li> <li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li> <li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li> <li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li> <li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li> </ul> <img src="http://i27.tinypic.com/sy7295.gif" style="margin: 10px 5px" /> </div> <a class="menuitem" href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a> </div> <p><iframe name="myiframe" style="width: 90%; height: 300px; border:1px solid black"></iframe></p> <p>Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page:</p> <p> - <a href="current.htm?submenuheader=0">Expand 1st header within "submenuheader" header group</a><br /> </p> <p>Helpful links: </p> <p> - <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm">Adding arbitrary links hat expand/ collapse the contents</a><br /> - <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm">Taking advantage of the oninit() and onopenclose() event handlers</a><br /> </p> </body> </html>

The menu uses four images for the purpose of styling the menu (download by right clicking, and select "Save As"):

Script Index Page
Adding arbitrary links hat expand/ collapse the contents
Taking advantage of the oninit() and onopenclose() event handlers
Accordion Menu script

Script Index Page Adding arbitrary links that expand/ collapse the contents Taking advantage of the oninit() and onopenclose() event handlers Accordion Menu script Accordion Menu script (v1.3)

Bullet List Accordion Menu

CSS Library

CSS Drive

JavaScript Kit

FeedBack

Bullet List Accordion Menu with nested levels

CSS Library

CSS Drive

JavaScript Kit

FeedBack

Glossy Accordion Menu

Glossy Accordion Menu with responsive headers

Table Of Contents

Accordion Menu script (v1.3)