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>
<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-Color: red;
}
.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 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 id="tst" class="arrowlistmenu">
<div>
<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><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></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>
</div>
<div>
<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>
</div>
<div>
<h3 class="menuheader expandable">JavaScript Kit</h3>
<ul class="categoryitems">
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li>
</ul>
</div>
<div>
<h3 class="menuheader" style="cursor: default">FeedBack</h3>
<div>
Regular contents here. Header does not expand or contact.
</div>
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Simple Accordian (21-June-2013) DRAFT
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcAccordian={
init:function(o){
var id=o.ID,obj=document.getElementById(id),ms=o.Animate,cls=o.OpenClass,mse=o.EventType=='mouseover',md=o.MouseDelay,days=o.Persistence,nu=o.Open;
if (obj){
var clds=obj.childNodes,h,ul,d=document.createElement('DIV'),sz,a,c,cnt=0,ary=[],oop={ary:[]},days=(typeof(days)=='number'&&days>0)||days=='session'?days:-1,ck=this.cookie(id),z0=0;// nu=days!=-1&&ck?ck*1:nu,
d.style.overflow='hidden';
for (;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
h=clds[z0].getElementsByTagName('*')[0];
ul=clds[z0].getElementsByTagName('UL')[0];
d=d.cloneNode(false);
if (ul){
d.appendChild(ul);
clds[z0].appendChild(d);
}
sz=(nu!=cnt||!ul?0:ul.offsetHeight);
d.style.height=sz+'px';
c=h.className;
a=[h,d,ul?ul:false,sz,c,c+' '+cls,cnt];
h.className=a[sz==0?4:5];
oop.ary[cnt]=a;
if (mse){
this.addevt(clds[z0],'mouseover','mse',oop,a);
this.addevt(clds[z0],'mouseout','mse',oop,a);
}
else {
this.addevt(clds[z0],'click','open',oop,a);
}
cnt++;
}
}
oop.id=id;
oop.days=days;
oop.a=oop.ary[nu]?oop.ary[nu]:null;
oop.ms=typeof(ms)=='number'&&ms>0?ms:1000;
oop.md=typeof(md)=='number'&&ms>0?md:200;
zxcAccordian['zxc'+id]=oop;
oop.lst=o.CloseLast!==false;
oop.tog=o.Toggle===true;
oop.onopen=typeof(o.onopen)=='function'?o.onopen:false;
typeof(o.oninit)=='function'?o.oninit(oop.ary,nu):null;
}
},
mse:function(o,a,e){
var oop=this;
clearTimeout(o.to);
e.type=='mouseover'?o.to=setTimeout(function(){ oop.open(o,a); },o.md):null;
},
open:function(o,a){
if (o.lst&&o.a&&o.a[2]){
this.animate(o,o.a,o.a[3],0,new Date(),o.ms);
o.a[0].className=o.a[4];
}
if (a[2]){
this.animate(o,a,a[3],!o.tog||a[3]==0?a[2].offsetHeight:0,new Date(),o.ms);
}
o.a=a;
o.onopen?o.onopen(a[0],a[1],a[2],a[6]):null;
return a[2]?false:true;
},
animate:function(o,a,f,t,srt,mS,nxt){
clearTimeout(a[7]);
var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[3]=Math.max(n,0);
a[1].style.height=a[3]+'px';
}
if (ms<mS){
a[7]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,nxt); },10);
}
else {
a[3]=t;
a[1].style.height=t+'px';
a[0].className=a[t==0?4:5];
document.cookie=o.id+a[6]+'='+(t!=0)+(typeof(o.days)=='number'?';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path=/;':';');
}
},
addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
}
},
cookie:function(nme){
var re=new RegExp(nme+'=[^;]+','i');
return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:'false';
}
}
zxcAccordian.init({
ID:'tst', // the unique ID name of parent DIV. (string)
Open:0, //(optional) the index number of the content to expand. (number, default = no open content)
Animate:100, //(optional) the animation speed in milli seconds. (number, default = 1000)
OpenClass:'openheader', //(optional) the class name of the open header. (string, default = no open class)
Toggle:true, //(optional) true = toggle the header open and close. (booleah, default = false = no toggle)
CloseLast:true, //(optional) false = do not close the previous opened header. (booleah, default = true = close the previous opened header)
EventType:'click', //(optional) the event type, 'click' or 'mouseover'. (string, default = 'click')
MouseDelay:200, //(optional) the mouseover open delay in milliseconds. (number, default = 200)
// Persistence:1, //(optional) the number of days to restore the last display. (number, default = -1)
// //(optional) 'session' = restore the last display for the browser session. (number, default = -1 days)
oninit:function(ary,i){ //(optional) the function to call on initilization. (function, default = no function call)
// ary = array of all child objects
// field 0 = the header.
// field 1 = the script div containing the UL.
// field 2 = the UL.
// field 6 = the index number.
// i = the index number of the open array
},
onopen:function(h,d,ul,i){ //(optional) the function to when a header is opended. (function, default = no function call)
// h = the open header.
// d = the open header script div containing the UL.
// ul = the open header UL.
// i = the index number of the open header
}
});
/*]]>*/
</script>
</body>
</html>
Accordion Menu - click on unexpandable items, collapse everything else
Reply With Quote
Bookmarks