PDA

View Full Version : Apple style Accordion Menu



samimh88
05-31-2011, 06:43 PM
1) Script Title:
Apple style Accordion Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-apple.htm?silverheader=0
3) Describe problem:

I have 0 knowledge in JavaScript. The article is awesome and I found it very useful. I was trying to place an Accordion inside an accordion to build something similar to tree view (Family Tree). However, I faced some problems with opening and closing tabs.

Example :


<div class="applemenu" id="div1">
<div class="silverheader" id="div2"><a href="http://www.dynamicdrive.com">Dynamic Drive</a></div>
<div class="submenu" id="div3">
<div>
<div class="applemenu" id="dev4" style="width:160px;">
<div class="silverheader" id="div5"><a href="http://www.dynamicdrive.com">Dynamic Drive1</a></div>
<div class="submenu" id="div6">
Text1<br />
</div>
<div class="silverheader" id="div7"><a href="http://www.dynamicdrive.com">Dynamic Drive2</a></div>
<div class="submenu" id="div14">
Text2<br />
</div>
<div class="silverheader" id="div8"><a href="http://www.dynamicdrive.com">Dynamic Drive3</a></div>
<div class="submenu" id="div9">
Text3<br />
</div>
</div>
</div>
</div>

<div class="silverheader" id="div10"><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></div>
<div class="submenu" id="div11">
Some random content here<br />
</div>
<div class="silverheader" id="div12"><a href="http://www.cssdrive.com">CSS Drive</a></div>
<div class="submenu" id="div13">
Some random content here<br />
<img src="http://i27.tinypic.com/sy7295.gif" />
</div>
</div>

When I place the mouse over Dynamic Drive1, Dynamic Drive2, or Dynamic Drive3 it opens the tab and closes the main one immediately (Dynamic Drive.)


Also,
I tried to place two accordions at the same page. However, when I place the mouse over one tab it closes any open tab on the second one.

I wanted something when I go over the tab it closes the previous ones at the same menu.

Could you please help me with this problem?

Thanx,
Sami

ddadmin
06-01-2011, 12:12 AM
Accordion Menu does supported nested levels, although perhaps not intuitively. Check out Nested Bullet List Menu (http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm) (2nd example on that page). The key is creating a nested accordion menu is to treat each level of category headers as a new instance of Accordion Content script, so the 2nd nested level in this case ("CSS Drive") would be a new instance. Taken from code on that page:



<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
revealtype: "click", //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: 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: "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
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //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
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" 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: [], //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: 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: "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
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})


</script>

<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>