Accordion Menu Variation

**harmon45** · 02-26-2008, 10:13 PM

1) Script Title: Accordion Menu script

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

3) Describe problem: I would like to combine the Bullet List and Glossy example menus into an uber menu where the header class changes when the list is expanded (like the Bullet List) plus the header has the icon that changes depending on whether the menu is expanded or collapsed (like the Glossy). I assume this is very simple, but I'm not having any luck. Thanks.

**yuchien** · 02-26-2008, 10:31 PM

i need a solution for that too... do you already know how to solve it? i need the header to be linkable to a url when it expands the submenu at the same time..

**ddadmin** · 02-27-2008, 01:10 AM

Originally Posted by yuchien

i need a solution for that too... do you already know how to solve it? i need the header to be linkable to a url when it expands the submenu at the same time..

If the header becomes linkable when it expands, how will the user close the header afterwards, as clicking on it will always go to a URL now?

I would like to combine the Bullet List and Glossy example menus into an uber menu where the header class changes when the list is expanded (like the Bullet List) plus the header has the icon that changes depending on whether the menu is expanded or collapsed (like the Glossy).

Well, in general, you can have an icon show up that reflects the state of the header by setting this line within the script:

Code:

togglehtml: ["suffix", "<img src='plus.gif' class='statusicon' />", "<img src='minus.gif' class='statusicon' />"],

You can change "suffix" to "prefix" to have the icon show up in front of the header. Then, use CSS to style the statusicon class to fine tune how the icon looks and if it should be absolutely positioned etc.

**harmon45** · 02-27-2008, 05:41 PM

I guess what I really want to do is change the Glossy Menu so that toggleclass is used to apply a CSS class to the header div when it is expanded. Is this possible? I added openheader to toggleclass, but nothing happens. Here is the code:

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: "submenuheader", //Shared CSS class name of headers group
	contentclass: "submenu", //Shared CSS class name of contents group
	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
	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: ["suffix", "<img src='plus.gif' class='statusicon' />", "<img src='minus.gif' class='statusicon' />"], //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">

.glossymenu{
	margin: 5px 0;
	padding: 0;
	width: 171px;
}

.glossymenu .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;
}
.glossymenu  .openheader{ /*CSS class to apply to expandable header when it's expanded*/
	background-color: #DFDFBF;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 3px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #666666;
	border-bottom-color: #666666;
	border-left-color: #666666;
}

.glossymenu a.menuitem{
	color: #000000;
	display: block;
	position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
	width: auto;
	padding-left: 6px;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	background-color: #CCCC99;
	padding-top: 4px;
	padding-bottom: 4px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #CCCC99;
	border-bottom-color: #CCCC99;
	border-left-width: 3px;
	border-left-style: solid;
	border-left-color: #CCCC99;
}


.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
	color: #000000;
}

.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
	position: absolute;
	top: 5px;
	right: 5px;
	border: none;
}

.glossymenu a.menuitem:hover{
	background-color: #DFDFBF;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 3px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #666666;
	border-bottom-color: #666666;
	border-left-color: #666666;
}

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
	background-color: #CCCC99;
}

.glossymenu div.submenu ul{ /*UL of each sub menu*/
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.glossymenu div.submenu ul li{
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #000000;
}

.glossymenu div.submenu ul li a{
	display: block;
	color: black;
	text-decoration: none;
	padding-left: 11px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding-top: 1px;
	padding-right: 0;
	padding-bottom: 1px;
}

.glossymenu div.submenu ul li a:hover{
background: #DFDCCB;
color: black;
}

</style>

<title>Title</title></head>

<body>

<div class="glossymenu">
<a class="menuitem submenuheader" href="#">What You Can Do at Home</a>
<div class="submenu">
	<ul>
	<li><a href="#">Seasons of Savings</a></li>
	<li><a href="#">Room by Room</a></li>
	<li><a href="#">Lighting and Appliances</a></li>
	<li><a href="#">Downloads</a></li>
	</ul>
</div>
<a class="menuitem" href="#" >Energy Calculators</a>
<a class="menuitem" href="#">Rebates</a>
<a class="menuitem submenuheader" href="#">ENERGY STAR&reg; Products</a>
<div class="submenu">
	<ul>
	<li><a href="#">Item 1</a></li>
	<li><a href="#">Item 2</a></li>
	<li><a href="#">Item 3</a></li>
	</ul>
</div>
<a class="menuitem submenuheader" href="#">Energy Saving Tools</a>
<div class="submenu">
	<ul>
	<li><a href="#">Item 1</a></li>
	<li><a href="#">Item 2</a></li>
	<li><a href="#">Item 3</a></li>
	</ul>
</div>
<a class="menuitem" href="#" style="border-bottom-width: 0">Heating & Cooling</a>		
</div>

</body>
</html>

**yuchien** · 02-27-2008, 06:42 PM

Originally Posted by ddadmin

If the header becomes linkable when it expands, how will the user close the header afterwards, as clicking on it will always go to a URL now?

Well, in general, you can have an icon show up that reflects the state of the header by setting this line within the script:

Code:

togglehtml: ["suffix", "<img src='plus.gif' class='statusicon' />", "<img src='minus.gif' class='statusicon' />"],

You can change "suffix" to "prefix" to have the icon show up in front of the header. Then, use CSS to style the statusicon class to fine tune how the icon looks and if it should be absolutely positioned etc.

"If the header becomes linkable when it expands, how will the user close the header afterwards, as clicking on it will always go to a URL now?"

that is the exact dilema i am having. I would like the header button to have 2 actions. 1 toggable. 2 get URL.

please help? or point me to a right direction? different solution? thanks

**harmon45** · 02-27-2008, 07:03 PM

I think I figured out my issue. Below is the code to combine the two different versions of the accordion menu so you have both rollover effects and changing icons on the headings.

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: "submenu", //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: ["suffix", "<img src='closed.gif' class='statusicon' />", "<img src='open.gif' class='statusicon' />"], //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-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	padding-left: 12px;
	height: 2em;
	line-height: 2em;
	display: block;
	color: #000000;
	text-decoration: none;
	text-align: left;
	background-color: #CCCC99;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 3px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCCC99;
	border-bottom-color: #CCCC99;
	border-left-color: #CCCC99;
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
	display: block;
	background-color: #dfdfbf;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 3px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #666666;
	border-bottom-color: #666666;
	border-left-color: #666666;
}

.arrowlistmenu a.menuheader{
	position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
}

.arrowlistmenu a.menuheader:visited, .arrowlistmenu a.menuheader:active{
	color: #000000;
}

.arrowlistmenu a.menuheader .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
	position: absolute;
	top: 5px;
	right: 5px;
	border: none;
}

.arrowlistmenu a.menuheader:hover{
	background-color: #DFDFBF;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 3px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #666666;
	border-bottom-color: #666666;
	border-left-color: #666666;
}

.arrowlistmenu div.submenu{ /*DIV that contains each sub menu*/
	background-color: #CCCC99;
}

.arrowlistmenu div.submenu ul{ /*UL of each sub menu*/
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.arrowlistmenu div.submenu ul li{
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #000000;
}

.arrowlistmenu div.submenu ul li a{
	display: block;
	color: black;
	text-decoration: none;
	padding-left: 11px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding-top: 1px;
	padding-right: 0;
	padding-bottom: 1px;
}

.arrowlistmenu div.submenu ul li a:hover{
background: #DFDCCB;
color: black;
}


</style>

</head>

<body>

<div class="arrowlistmenu">

<a class="menuheader expandable" href="#">Item 1</a>
<div class="submenu">
	<ul>
	<li><a href="#">Item 1</a></li>
	<li><a href="#">Item 2</a></li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a></li>
	</ul>
</div>

<a class="menuheader expandable" href="#">Item 2</a>
<div class="submenu">
	<ul>
	<li><a href="#">Item 1</a></li>
	<li><a href="#">Item 2</a></li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a></li>
	</ul>
</div>

<h3 class="menuheader" style="cursor: default">FeedBack</h3>
<div>
Regular contents here. Header does not expand or contact.
</div>

</div>

</body>
</html>

**ddadmin** · 02-27-2008, 10:59 PM

Originally Posted by yuchien

that is the exact dilema i am having. I would like the header button to have 2 actions. 1 toggable. 2 get URL.

please help? or point me to a right direction? different solution? thanks

Well, there is a quick way to actually enable any links within the header to still work as normal liniks. It was intentionally disabled by the script, but you can enable it by commenting out the line:

Code:

//return false

inside ddaccordion.js

Thread: Accordion Menu Variation

Thread Tools

Search Thread

Accordion Menu Variation

Bookmarks

Bookmarks

Posting Permissions