Apple Accordion Script

**tdp** · 03-29-2012, 03:10 AM

1) Script Title: Apple style Accordion Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...menu-apple.htm
3) Describe problem:
I have three issues: 1. How do you make it so that when you first go the page all of the menus are closed. You have to mouseover to open the first one.
2. How do you stop the text underneath the menu from moving up and down..depending on the size of the submenus.

The link can be found here:
http://www.halfwayenterprises.com/sidenavbest.htm

**vwphillips** · 03-29-2012, 07:53 AM

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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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: "silverheader", //Shared CSS class name of headers group
	contentclass: "submenu", //Shared CSS class name of contents group
	revealtype: "mouseover", //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: [], //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: false, //persist state of opened contents within browser session?
	toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
	animatespeed: "0", //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>


<style type="text/css">

.applemenu{
position:absolute;
z-Index:101;
left:100px;
top:100px;
margin: 5px 0;
padding: 0;
width: 207px; /*width of menu*/
height:500px;


}

.applemenu div.silverheader a{
background: black url(silvergradient.gif) repeat-x center left;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: #0b3c5c;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left: 8px;
text-decoration:none;
}


.applemenu div.silverheader
 a:visited {color:#0b3c5c}




 , .applemenu div.silverheader a:active{
color: #0b3c5c; /*title colors*/
}

.applemenu div.selected a, .applemenu div.silverheader a:hover{
background-image: url(silvergradient.gif);
color:#ffffff;
text-decoration: none;
}


.applemenu div.submenu{ /*DIV that contains each sub menu*/
background-color: #a8abb0;
padding: 5px;
}
.applemenu div.submenu1{ /*DIV that contains each sub menu*/
height: 75px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
}

 .applemenu div.submenu a:link{
color: #000000; /*submenutitle colors*/
text-decoration:none;
}

 .applemenu div.submenu a:visited{
color: #000000; /*submenutitle colors*/
text-decoration:none;
}

 .applemenu div.submenu a:hover{
color: #000000; /*submenutitle colors*/
text-decoration:underline;
}

 .applemenu div.submenu a:active{
color: #000000; /*submenutitle colors*/
text-decoration:none;
}


</style>

</head>

<body>

<div class="applemenu">
<div class="silverheader"><a href="test.htm">Asset Management</a> </div>
	<div class="submenu"><div class="submenu1">
	<a href="test1.htm">Portfolio</a><br  />
	<a href="test2.htm">Pricing</a><br  />
	<a href="test3.htm">Valuation</a><br  />
	</div></div>
<div class="silverheader"><a href="test.htm">Budget/Finance</a> </div>
	<div class="submenu">
	<a href="test.htm">Claims</a><br  />
	<a href="test.htm">Financial Management</a><br  />
	<a href="test.htm">Funding</a><br  />
	<a href="test.htm">Internal Controls</a><br  />
	<a href="test.htm">Rent/Billing</a><br  />
	</div>
<div class="silverheader"><a href="test.htm">Disposal</a> </div>
	<div class="submenu">
	<a href="test1.htm">Disposal</a><br  />
		</div>
<div class="silverheader"><a href="test.htm">Customer Account Management</a> </div>
	<div class="submenu">
	<a href="test1.htm">Customer Relationship Managment</a>
	</div>
	<div class="silverheader"><a href="test.htm">Procurement/Contracting</a> </div>
	<div class="submenu">
	<a href="test.html">Procurement</a><br />
	<a href="test.html">Procurement Instructional Bulletins (PIBs)</a>
	</div>

	<div class="silverheader"><a href="test.htm">Real Property Acquisition</a></div>
	<div class="submenu">
	<a href="test.htm">Assignment &amp; Utilization of Space</a><br />
	<a href="test.htm">Lease Administration/Lease Policy</a><br />
	<a href="test.htm">Occupancy Services</a><br />
     <a href="test.htm">Site Acquisition</a><br />
	</div>

	<div class="silverheader"><a href="test.htm">Real Property Mgmt/Lease Admin</a> </div>
	<div class="submenu">
	<a href="test.htm">Building Operations, Maintenance,&amp; Cleaning</a><br />
    <a href="test.htm"> Emergency Preparedness</a><br />
<a href="test.htm">Energy and Utilities</a><br />
 <a href="test.htm">Environment</a><br />
<a href="test.htm">Fire Protection/Life Safety</a><br />
    <a href="test.htm">Health</a><br />
 <a href="test.htm"> Lease Administration</a><br />
    <a href="test.htm"> Naming Buildings</a><br />
     <a href="test.htm">Occasional Use of Public Space</a><br />
     <a href="test.htm">Recycling</a><br />
    <a href="test.htm"> Repairs and Alterations</a><br />
    <a href="test.htm"> Security</a><br />
	</div>
	<div class="silverheader"><a href="test.htm">Design &amp; Construction</a></div>
	<div class="submenu">
<a href="test.htm">Accessibility</a><br />
<a href="test.htm">Art in Architecture</a><br />
<a href="test.htm">Border Stations</a><br />
<a href="test.htm">Building Information Modeling</a><br />
<a href="test.htm">Courthouse Program</a><br />
<a href="test.htm">Design Criteria and Guidelines</a><br />
<a href="test.htm">Design Excellence</a><br />
<a href="test.htm">Facilities Standards</a><br />
<a href="test.htm">Fire Protections/Life Safety</a><br />
<a href="test.htm">Project Development </a><br />
<a href="test.htm">Project Management</a><br />
<a href="test.htm">Repairs and Alterations</a><br />
<a href="test.htm">Security</a><br />
<a href="test.htm">Seismic</a><br />
<a href="test.htm">Urban Design</a>

	</div>
	<div class="silverheader"><a href="test.htm">Organization/Resource Management</a> </div>
	<div class="submenu">
	<a href="test.htm">Business Planning and Improvement</a><br />
<a href="test.htm">Communications/Branding</a><br />
   <a href="test.htm"> Congressional/Press/Public/FOIA</a><br />
  <a href="test.htm">Correspondence Management</a><br />
    <a href="test.htm">Information Technology</a><br />
   <a href="test.htm">Management Controls</a><br />
 <a href="test.htm"> Occupation Safety and Health (OSH)</a><br />
    <a href="test.htm">Telework</a>
	</div>

	<div class="silverheader"><a href="test.htm">Client Services</a> </div>
	<div class="submenu">
	<a href="test.html">Child Care</a><br />
    <a href="test.htm">Concessions</a><br />
    <a href="test.htm">Delegations</a><br />
    <a href="test.htm">Directives Management</a><br />
    <a href="test.htm">Historic Preservation</a><br />
    <a href="test.htm">Records Management</a><br />
    <a href="test.htm">Reimbursable Services</a><br />
    <a href="test.htm">Sustainable Design</a><br />
    <a href="test.htm">WorkPlace Programs</a><br />

	</div>




</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?silverheader=0">Expand 1st header within "submenuheader" header 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>

</body>
</html>

Thread: Apple Accordion Script

Thread Tools

Search Thread

Apple Accordion Script

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

Bookmarks

Bookmarks

Posting Permissions