Accordion Menu-nested list

**blackberg** · 02-20-2008, 01:20 AM

1) Script Title: Accordion Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ordionmenu.htm

3) Describe problem: I am wondering if the accordion script can be modded to have nested lists. Where one of the subs can expand aswell, it can keep the style of the sub, as long as it has the "+" image (or similar) so users can tell that it is clickable/expandable as well.
Something like this that I saw on another site:
First list of subs

"Global Sites" sub expanded

thanks

**blackberg** · 02-20-2008, 03:50 AM

We just realized that the nesting only occurs twice on our menu and that can be eliminated. So although it would be nice, we really dont need this anymore.

what We do need is a good way to make it so the Text in h3 takes you to landing page and expands the menu when you click on it, is this somehow possible?

thanks

-d

**ddadmin** · 02-20-2008, 04:58 AM

In terms of nested collapsible lists with Accordion menu, it's certainly possible. Remember that the script is simply based off of Accordion Content script itself, and if you can nest collapsible content, you can do the same for menu lists. Visually it may look something like:

Here's the full page source code for the above:

Code:

<!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"
})

ddaccordion.init({
	headerclass: "subexpandable", //Shared CSS class name of headers group that are expandable
	contentclass: "subcategoryitems", //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"
})


</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 .submenuheader{ /*CSS for Sub Menu HEADER*/
background: navy;
color: white;
font: bold 13px Arial;
padding: 3px 0 3px 10px; /*header text is indented 10px*/
margin-left: 19px;
margin-bottom: 10px;
cursor: hand;
cursor: pointer;
}

.arrowlistmenu ul li .subcategoryitems{ /*CSS for Sub Menu UL*/
margin-left: 10px;
}

.arrowlistmenu ul li .subcategoryitems a{ /*CSS for Sub Menu UL*/
color: navy !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*/
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><div href="#" class="submenuheader subexpandable">Sub Category</div>
<ul class="subcategoryitems">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Nested Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Nested Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Nested Image CSS</a></li>
</ul>
</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" style="cursor: default">FeedBack</h3>
<div>
Regular contents here. Header does not expand or contact.
</div>

</div>

</body>
</html>

The key is to treat the nested collapsible menu as a new instance of Accordion Menu. Also, the header for the nested menu should not encompass the nested items themselves- that's why a DIV is used in the example as the nested header, instead of the <LI> that wraps around that DIV.

Regarding your second question, seems like something that might be solved just by turning on persistence across pages that use the menu: http://www.dynamicdrive.com/forums/s...ad.php?t=29603

**blackberg** · 02-20-2008, 06:39 AM

oh wow, that seems to fill the ticket for the nesting. hopefully that will help others as well, thank you

on the second part,

what I actually want is, using your nested screenshot, is when clicking "CSS Library", to have the menu drop (if it is not already) and be taken to the Main "CSS Library page"

**blackberg** · 02-20-2008, 06:57 AM

I figured it out I think, posting so hopefully it will help someone else,

moding the <h3> line from:

Code:

<h3 class="menuheader expandable">My Main Section</h3>

to

Code:

<h3 class="menuheader expandable"> <a onclick=window.location.href='scripttest.html' > My Main Section</h3>

allows a click on the header to open the page /scripttest.html in the same page and drops down the menu

thanks

**guimz** · 07-30-2009, 12:43 PM

Hi,

I'm using this script but have a problem...

How do I make sure that the menu apear closed when visitors come to the page?

It always shows some part of the menu content... but I would like to show only the main categories...

Help please.

You may see the testing page at www.reclacambra.com/web2009

**fastflagsrt4** · 07-30-2009, 02:24 PM

Originally Posted by guimz

Hi,

I'm using this script but have a problem...

How do I make sure that the menu apear closed when visitors come to the page?

It always shows some part of the menu content... but I would like to show only the main categories...

Help please.

You may see the testing page at www.reclacambra.com/web2009

I am having the same problem...
http://www.ashg.org/education/careers_paths1.shtml

Want to show all categories closed.

**haqpl** · 09-28-2009, 06:55 PM

is it possible to add more sub-categories to the sub-category? if yes could anyone help me doing so? cheers

Thread: Accordion Menu-nested list

Thread Tools

Search Thread

Accordion Menu-nested list

The Following User Says Thank You to ddadmin For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions