Need Help On Bullet List Accordion Menu

**tsidell** · 10-27-2008, 06:39 PM

1) Script Title: Bullet List Accordion Menu

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

3) Describe problem: I currently am using this navigation for my webpage. I am using the 2nd example with a 3 level navigation.

For example:
About Us
-Constitution
-Meetings
-Contact Us
-Board Members
-Office Members
How To Join
Night Division

---------------------------------
When I click on How to Join it takes you to another page on my website. I want all the previous navigation (ie. about us, constitution...) to be collapse since that link is not part of that navigation. I tried collapseall but to no prevail. Maybe I'm missing something. So basically the navigation should be dependent on the page you current are on. Expanding and Collapsing depending if a page is active. Like if Board Members was active about us, constitution, meetings, contact us would still be open.

**ddadmin** · 10-28-2008, 01:06 AM

If you have persistence set to true, and assuming all your pages that use Accordion Menu are on the same domain, then going from page to page should maintain the last known expanded structure of the menu, for the Top Level menu headers that is. Now, since you also have a sub menu ("Constitution", "meeting" etc) that operates off of its own settings, I think your question is basically how to ensure that this sub menu is contracted whenever the user expands a non related parent header. If so, what you'd do is define the onopenclose() event handler of the Top Level headers to:

1) Fire whenever a top level header other than the one containing a sub menu is clicked on
2) When that happens, collapse the sub menu explicitly.

Inside the configuration code for the top level headers, you'd define something like:

Code:

	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		if (isuseractivated && index!=1) //if user clicks on any top level header that's not the 2nd one (1==2nd)
			ddaccordion.collapseone("subexpandable", 0) //collapse sub menu with class="subexpandable", specifically, the first header within it
	}

Here's the complete HTML code using 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.6.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
	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: [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
		if (isuseractivated && index!=1)
			ddaccordion.collapseone("subexpandable", 0)
	}
})

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


</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="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Image CSS</a></li>
<li><a href="#">Form CSS</a></li>
<li><a href="#">DIVs and containers</a></li>
<li><a href="#">Links & Buttons</a></li>
<li><a href="#">Other</a></li>
<li><a href="#">Browse All</a></li>
</ul>

<h3 class="menuheader expandable">CSS Drive</h3>
<ul class="categoryitems">
<li><a href="#">CSS Gallery</a></li>
<li><a href="#" class="subexpandable">Menu Gallery</a>
	<ul class="subcategoryitems" style="margin-left: 15px">
	<li><a href="#">Blue Color</a></li>
	<li><a href="#">Green Color</a></li>
	<li><a href="#">Orange Color</a></li>
	<li><a href="#">Red Color</a></li>
	<li><a href="#">Brown Color</a></li>
	</ul>
</li>
<li><a href="#">Web Design News</a></li>
<li><a href="#">CSS Examples</a></li>
<li><a href="#">CSS Compressor</a></li>
<li><a href="#">CSS Forums</a></li>
</ul>

<h3 class="menuheader expandable">JavaScript Kit</h3>
<ul class="categoryitems">
<li><a href="#" >Free JavaScripts</a></li>
<li><a href="#">JavaScript tutorials</a></li>
<li><a href="#">JavaScript Reference</a></li>
<li><a href="#">DOM Reference</a></li>
<li><a href="#">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>

Thread: Need Help On Bullet List Accordion Menu

Thread Tools

Search Thread

Need Help On Bullet List Accordion Menu

Bookmarks

Bookmarks

Posting Permissions