PDA

View Full Version : 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/dynamicindex17/ddaccordionmenu.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
http://img88.imageshack.us/img88/7656/picture18zy4.png
"Global Sites" sub expanded
http://img221.imageshack.us/img221/8540/picture17qo6.png

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 (http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm) itself, and if you can nest collapsible content, you can do the same for menu lists. Visually it may look something like:

http://i25.tinypic.com/5kehiw.gif

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


<!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/showthread.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:


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

to


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