Accordion Menu Script active selection

[ravimmrk]

1) Script Title: Accordion Menu Script : Active selection of sub menu

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

3) Describe problem: 1. First item of main menu - if its not having a submenu - when i click the that menu it should take to some page.. how to do that.. in submenu we are using href.. but when we have no sub menu how to give for main menu.

2. when the main menu is clicked it goes to activated mode.. same when the submenu is clicked i need activated mode(current selection mode)..

how to do this.. please let me know.. as already i implemented this our project as today i have to deliver the project please let me know how to do that..

Thanks in advance..

ravimmrk@hotmail.com

[rangana]

If you're header has no submenu, ensure you don't have the higlighted:

<h3 class="menuheader expandable">JavaScript Kit</h3>

If you want your header to fire as a link, have you tried adding an <a> tag on it:

<a href="http://www.google.com"><h3 class="menuheader">JavaScript Kit</h3></a>

See if it helps

[ravimmrk]

thanks for ur help..

But let me know how to make the submenu to active state..

suppose if i clicked submenuitem it should show in active state... as what now header do..

thanks for ur needfulness..

regards,
ravi.m

[rangana]

See if adding the highlighted to the script helps:

<script type="text/javascript">
window.onload=function() 
{
   var accept=document.getElementsByTagName('a');
for(var start=0;start<accept.length;start++)
{accept[start].onclick=function() 
   {for(var start=0;start<accept.length;start++) 
	{accept[start].style.background='url(arrowbullet.png) no-repeat left';
	accept[start].style.paddingLeft='19px';
		{this.style.background='#eee url(arrowbullet.png) no-repeat left';// Whatever you want here
		}}}}}

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"
	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
		//do nothing
	},
	onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed
		//do nothing
	}
})


</script>

[ravimmrk]

Dear Mr. Rangana,

Thanks for your help....

Its doesn't work.. its spoling the menu structure.. the sub menu of select item gets active state but all other menu items disappears,

below given is the menu struture i am using... i hope still something has to be changes.

thanks for your needfulness... i hope i will get the solution..

regards,
ravi.m

-------------------------------------------------------------------------

<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: [], //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: false, //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: "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed
if (state=="block" && isclicked==true){ //if header is expanded and as the result of the user clicking on it
//window.open(header.getAttribute('href'))
//alert(header.getAttribute('href'))
loadpage(header.getAttribute('href'), 'contentarea')
}
}
})


</script>

<style type="text/css">
/*css for the side TOC*/
.arrowlistmenu{
width: 185px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 12px Arial;
color: white;
background: black url(../images/titlebar.gif) repeat-x center left;
margin-bottom: 1px; /*bottom spacing between header and rest of content*/
border-bottom:1px;
border-bottom-color:#000000;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .menuheader a { /*CSS class for menu headers in general (expanding or not!)*/
font: bold 12px Arial;
display: block;
color: white;
margin-bottom: 5px; /*bottom spacing between header and rest of content*/
padding: 4px 0 4px 0px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
text-decoration:none;

}

a.menuheader{
background: black url(../images/titlebar.gif) repeat-x bottom left;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
}
.arrowlistmenu .menuheader h3{
font-size:12px;
color: white;
display: block;
}
.arrowlistmenu .menuheader a:hover{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 12px Arial;
display: block;
color: #A70303;
margin-bottom: 5px; /*bottom spacing between header and rest of content*/
padding: 4px 0 4px 0px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
text-decoration:none;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(../images/titlebar-active.gif);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom:3px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul .back {
border-bottom: 1px solid #999999;
background-color:#E5E5E5;
color:#FFCC00
}


.backalter {
border-bottom: 1px solid #FFE7CE;


}
.arrowlistmenu ul li{
padding-bottom: 2px;
padding-left:10px /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(../images/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 22px; /*link text is indented 19px*/
text-decoration: none;
font-size: 100%;
vertical-align:text-top;
text-decoration:none;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #FF6600;
background-color: #F3F3F3;
}

</style>

--------------------------

<div class="arrowlistmenu">

<a class="menuheader expandable" href="home.html"><h3>Course Objective</h3></a>
<ul class="categoryitems"></ul>
<a class="menuheader expandable" href="3.html"><h3>About this Course</h3></a>
<ul class="categoryitems">
<li class="backalter"><a href="javascript:loadpage('3.html', 'contentarea');">Using this Course</a></li>
<li class="backalter"><a href="javascript:loadpage('0.html', 'contentarea');">Overview </a></li>
</ul>

<a class="menuheader expandable" href="4.html"><h3>Breakbulk Trading</h3></a>
<ul class="categoryitems">
<li class="backalter"><a href="javascript:loadpage('4.html', 'contentarea');">Global Trade </a></li>
<li class="backalter"><a href="javascript:loadpage('5.html', 'contentarea');">Specialty of Breakbulk </a></li>
<li class="back"><a href="javascript:loadpage('2.html', 'contentarea');"><p style="color:#0066FF" >Trade System</p></a></li>
</ul>

<a class="menuheader expandable" href="6.html"><h3>Breakbulk Cargoes and Trade Patterns</h3></a>
<ul class="categoryitems">
<li class="backalter"><a href="javascript:loadpage('6.html', 'contentarea');">Types of Cargoes</a></li>
<li class="back"><a href="#"><p style="color:#0066FF" >Cargo Characteristics</p></a></li>
<li class="back"><a href="#"><p style="color:#0066FF" >Breakbulk Trade Patterns</p></a></li>
</ul>

<a class="menuheader expandable" href="dummy.html">
<h3> Transportation Modes</h3>
</a>
<ul class="categoryitems">
<li class="backalter"><a href="#">Modes</a></li>
<li class="back"><a href="#"><p style="color:#0066FF" >Characteristics of Ships</p></a></li>
<li class="back"><a href="#"><p style="color:#0066FF" >Vessel Operations</p></a></li>
<li class="back"><a href="#"><p style="color:#0066FF" >Ports and Terminals </p></a></li>
</ul>

<a class="menuheader expandable" href="dummy.html"><h3>Breakbulk Process</h3></a>
<ul class="categoryitems">
<li class="backalter"><a href="#">Process</a></li>
<li class="back"><a href="#"><p style="color:#0066FF" >Planning</p></a></li>
<li class="back"><a href="#"><p style="color:#0066FF" >Execution</p></a></li>
<li class="back"><a href="#"><p style="color:#0066FF" >Monitoring</p></a></li>
<li class="back"><a href="#"><p style="color:#0066FF" >Control</p></a></li>
</ul>

<a class="menuheader expandable" href="dummy.html"><h3>Roles and Responsibilities of Stakeholders</h3></a>
<ul class="categoryitems">
<li class="backalter"><a href="#">Major Stakeholders</a></li>
<li class="back"><a href="#"><p style="color:#0066FF" >Roles of Stakeholders</p></a></li>
<li class="back"><a href="#"><p style="color:#0066FF" >Customer Interaction</p></a></li>
</ul>

<a class="menuheader expandable" href="dummy.html"><h3>Documentation</h3></a>
<ul class="categoryitems">
<li class="backalter"><a href="#">Common Documents </a></li>
<li class="back"><a href="#"><p style="color:#0066FF" >Documentation Process</p></a></li>
</ul>

<a class="menuheader expandable" href="dummy.html"><h3>Liabilities</h3></a>
<ul class="categoryitems">
<li class="backalter"><a href="#">Cargo Damage and Losses</a></li>
<li class="back"><a href="#"><p style="color:#0066FF" >Cargo Care</p></a></li>
<li class="back"><a href="#"><p style="color:#0066FF" >Hazards</p></a></li>
</ul>

<a class="menuheader expandable" href="8.html"><h3>Resources</h3></a>
<ul class="categoryitems">
<li class="backalter"><a href="javascript:loadpage('8.html', 'contentarea');">References</a></li>
<li class="backalter"><a href="javascript:loadpage('7.html', 'contentarea');">Downloads</a></li>
<li class="backalter"><a href="javascript:loadpage('9.html', 'contentarea');">External Links </a></li>
</ul>
</div>

[rangana]

The (simplier) way for this one is to have an active pseudo-class in our a element.
Try adding this in your CSS:

.arrowlistmenu ul li a:active
{
color:#fff;
background:#f00 url(arrowbullet.png) no-repeat center left;
}

Apparently, this only works (well) in IE, but not with FF. I can't find any turnaround for this FF.

[ravimmrk]

It worked out.. thanks a lot.. thanks for all ur timely needfulness..

regards,
ravi.m

[ravimmrk]

but i have another problem sorry to disturb u.. it works fine in IE but its not working in firefox.. on press its works.. once i release the mouse it goes to same state...... what will be problem..

regards,
ravi.m