little contribution - accordion menu for anycontent

Quinti · July 12, 2006, 02:55:15 PM

Hi

i'm using it into project_vii theme

and is an AJAX menu type "accordion" from: http://openrico.org/rico/demos.page

look: http://www.fotosdesarria.com/dautomne

to insert it in anycontent.php, put:

in anycontent.php

Code Select

<?php
starttable("100%", "TABLE TITLE");
?>
<tr><td class="tableb">
<!--MENU -->
<div style="border-bottom: 1px solid rgb(31, 102, 155); margin-top: 6px; border-top-width: 1px; border-top-style: solid; " id="accordionExample">

	<div id="panel1">
	  <div style="background-color:#828282; color:#FFFFFF; font-weight: bold;" id="panel1Header" class="accordionTabTitleBar">
	  	TITLE ONE HEREEEEEEEEE
	  </div>
	  <div style="border-style: solid; border-color: rgb(31, 102, 155); border-width: 0px 1px; margin: 0px; overflow: visible; height: 500px;" id="panel1Content" class="accordionTabContentBox">
CONTENT ONE HEREEEEEEEEEEEE
		 
	  </div>
	</div>

	<div id="panel2">
	  <div style="background-color:#828282; color:#FFFFFF; font-weight: normal;" id="panel2Header" class="accordionTabTitleBar">
	  	TITLE TWO HEREEEEEE
	  </div>

	  <div style="border-style: solid; border-color: rgb(31, 102, 155); border-width: 0px 1px; margin: 0px; overflow: hidden; height: 1px; display: none;" id="panel2Content" class="accordionTabContentBox">
	
CONTENT TWO HEREEEEEEEEE
 </div>
  </div>

	<div id="panel3">

	  <div style="background-color:#828282; color:#FFFFFF; font-weight: normal;" id="panel3Header" class="accordionTabTitleBar">
	  	TITLE THREE HEREEE
	  </div>
		<div style="border-style: solid; border-color: rgb(31, 102, 155); border-width: 0px 1px; margin: 0px; overflow: hidden; height: 1px; display: none;" id="panel3Content" class="accordionTabContentBox">

THE CONTENT THREE HEREEEEE
</strong>
	  </div>
	</div>


</div>

<script type="text/javascript"> onloads.push( accord ); function accord() { new Rico.Accordion( 'accordionExample', {panelHeight:227} ); } </script>
<!--fin MENU -->
</td></tr>
<?php
endtable();

?>

and in your template.html
put:
in head

Code Select

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/rico.js" type="text/javascript"></script>
<script src="js/util.js" type="text/javascript"></script>

and body:

Code Select

<body onload="javascript:bodyOnLoad()">
<script type="text/javascript">
	   var onloads = new Array();
	   function bodyOnLoad() {
	      new Rico.Effect.Round( null, 'roundNormal' );
	      new Rico.Effect.Round( null, 'roundCompact', {compact:true} );
	      for ( var i = 0 ; i < onloads.length ; i++ )
	         onloads[i]();
	   }
	  showMenuContext()      
	</script>

now, we need the JS files, waht must be in yourgallery.com/js folder.
what i attack here

ups, i forget the css, to insert into your css theme and play with it

Code Select

.accordionTabTitleBar {

   font-size           : 12px;

	padding             : 4px 6px 4px 6px;

   border-style        : solid none solid none;

	border-top-color    : #BDC7E7;

	border-bottom-color : #182052;

   border-width        : 1px 0px 1px 0px;

}



.accordionTabTitleBarHover {

   font-size        : 11px;

	background-color : #828282;

	color            : #000000;

}



.accordionTabContentBox {
	font-size        : 11px;
	border           : 1px solid #1f669b;
	border-top-width : 0px;
	height: 300px;
	padding-top: 0px;
	padding-right: 8px;
	padding-bottom: 0px;
	padding-left: 8px;

}
#accordionExample {
	width : 100%;
}

coppermine-gallery.com/forum

News:

little contribution - accordion menu for anycontent

Quinti