View Full Version : Remove First Submenu from Apple-style Accordion Menu

10-25-2012, 08:22 PM
Hello all,
Please bear with me as I try and wrangle an understanding of this script.

Script title: Apple style Accordion Menu

Script URL: http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-apple.htm

My Test Site: http://www.richardmfg.comli.com

My Problem:
1. I would like to remove the submenu under "HOME" as it does not contain anything. The "HOME" button simply returns the user to the default page. I attempted to remove the <div class="submenu"></div> after the <div class="silverheader" title="pages/home.php"><a href="javascript:void(0)">HOME</a></div>, but this resulted in the button below it ("PRODUCTS") expanding. When you click "HOME", it does display the default page, but the second button expands.

2. I am using an iframe to display content pages. I would like to load the page with all menu headers collapsed, but if I place null brackets in the init portion like this: defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content, I get a javascript error because there is no expanded header as called for here: myiframe.location.replace(headers[lastexpandedindex].getAttribute('title')) //load page associated with expanded header

Any help would be greatly appreciated.

10-29-2012, 02:21 PM
Here is the full initialization code that I am using (direct from http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-apple.htm). I am using the script provided at http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm to add the iframe capability.

headerclass: "silverheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
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
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //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: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
myiframe=window.frames["content"] //reference and cache iframe to populate
var lastexpandedindex=expandedindices.pop() //get last index within array
myiframe.location.replace(headers[lastexpandedindex].getAttribute('title')) //load page associated with expanded header
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
if (state=="block" && isuseractivated==true){ //if header is expanded and as the result of the user clicking or moving mouse over it

10-30-2012, 08:34 PM
To make your "HOME" header simply act as a regular header, you need to remove the designated CSS class "silverheader" from its DIV tag, or the code in red below:

<div class="silverheader" title="pages/home.php"><a href="javascript:void(0)">HOME</a></div>

The "silverheader" class is the designated class specified in your initialization code that tells the script that this header is an expandable header. With it removed, you can go ahead and also remove the sub DIV following it:

<div class="submenu" style="height: 0;padding:0 0 0 0;margin:0 0 0 0"></div>

Now, you probably want the style of this header to be consistent with that of the other expandable headers. In that case in your CSS, you would simply define another arbitrary CSS class that shares the same style declarations of "silverheader", then add that class inside the DIV of your "HOME" header:

.applemenu div.silverheader a, .applemenu div.nonexpandableheader a{
background: black url('images/silvergradient_test.gif') repeat-x left 50%;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding-left: 8px;
padding-right: 0;
padding-top: 5px;
padding-bottom: 5px;

.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active, .applemenu div.nonexpandableheader a:visited, .applemenu div.nonexpandableheader a:active{
color: white;

.applemenu div.selected a, .applemenu div.silverheader a:hover, .applemenu div.nonexpandableheader a:hover{
background-image: url('images/silvergradientover.gif');
color: white;

In this case the arbitrary CSS class is called "nonexpandableheader".

11-08-2012, 03:01 PM
Thanks for the help. I appologize for getting back to this so late, but I got temporarily reassigned. I attempted a solution similar to the way you described it, but the problem I found was that this also removed "HOME" from the array and if I used the defaultexpanded: [0] portion to activate the header, I would get the wrong header activated (in my case, "PRODUCTS"). If I use defaultexpanded: [], no header is activated on page load and I get a 404 in place of my iframe page. I was able to overcome the problem by overriding the standard styling of the first submenu div
<div class="submenu" style="height: 0;padding:0 0 0 0;margin:0 0 0 0"></div>. This forced the HOME header to remain closed, while retaining it as the "0" index in the array.