Ir para conteúdo
Fórum Script Brasil
  • 0

Menu Accordion


sanntanna

Pergunta

3 respostass a esta questão

Posts Recomendados

  • 0

segue todo o codigo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tecmov</title>
<style type="text/css">
@import url("css/style_accordion.css");

body {
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}


</style>

<script type="text/javascript" src="js/mootools.svn.84.HACKED.js"></script>

<script language="javascript">


/////////////////////////////////////////////////////////
//
// START OF CHRIS ESLER FUNCTIONS
//


/////////////////////////////////////////////////////////
//
// QUICK TOGGLE FUNCTION
// objClass is the target flag className
//
function toggleDisplay(objClass){

$S('.'+objClass).each(function(el){

if (el.className.indexOf("Hide") != -1) el.className = el.className.replace("Hide","Show");
else el.className = el.className.replace("Show","Hide");

});

}


/////////////////////////////////////////////////////////
//
// SETUP KEYPRESS CONTROL VARS
//
var control = false;
var nextKey = false;

/////////////////////////////////////////////////////////
//
// DETERMINE WHICH KEYPRESS FUNCTIONS TO
// USE BY BROWSER TYPE
//
if (!/MSIE (5\.5|6|7\.)/.test(navigator.userAgent)) {
/////////////////////////////////////////////////////////
//
// MOZILLA-STYLE PROPAGATE DOWN EVENT ARCHITECTURE
//
// Much better than IE's. Actually captures key combo's
// and doesn't affect other key combo's

function detectspecialkeys(e){
var evtobj= e
var keyCode = e.which;
if (evtobj.ctrlKey){
toggleAccordion(keyCode);
}
}
document.onkeypress=detectspecialkeys;

}else{
//
/////////////////////////////////////////////////////////
//
// MICROSOFT-STYLE BUBBLE UP EVENT ARCHITECTURE
//
// retarded IE requires this funky capture system
// checks if control key pressed, then marks true
// then captures next key, then marks it true
// if control key true and next key true, then it does
// conditional statement

document.onkeydown = function () {

var keyCode=event.keyCode

// if its control key, mark it true
// and reset nextKey
if(keyCode == 17){

control = true;
nextKey = false;

// if control is true, then flag nextKey
}else{
nextKey = true;
}

// if both control and next key, then do our conditional statements
if (control && nextKey) {

if(keyCode == 49 || keyCode == 50 || keyCode == 51 || keyCode == 52 || keyCode == 53){
//alert ('control key pressed + '+keyCode);
toggleAccordion(keyCode);
}

// reset control vars
control = false;
nextKey = false;

// this is here last, so it nullifies IE beviours for these buttons
// otherwise we don't want it to nullify other bbuttons such as Control-P (for print), etc
if(keyCode == 49 || keyCode == 50 || keyCode == 51 || keyCode == 52 || keyCode == 53){
return false;
}

} else {

return true;

}
}
//
/////////////////////////////////////////////////////////
}

/////////////////////////////////////////////////////////
//
// SETUP ACCORDION ASSOCIATIVE ARRAY
// maps key presses to the accordion toggle
// 49 = number 1 key, 50 = number 2 key, and so on
//
var accArray = [0, 1, 2, 3, 4];
var keyArray = [49, 50, 51, 52, 53];
var newAccArray = accArray.associate(keyArray);
var currentArrow = 0;

/////////////////////////////////////////////////////////
//
// FUNCTION TO TOGGLE ACCORDION BASED ON KEYPRESS COMBO
// control key + number 1 key opens accordion[0]
//
function toggleAccordion(obj) {

// check if the 1-5 keys are pressed in conjunction with the control key
if(obj == 49 || obj == 50 || obj == 51 || obj == 52 || obj == 53) {

// get the associated accordion to the key pressed
var newAccObj = newAccArray[obj];

// grab our accordion object
var newArrow = $('arrow'+newAccArray[obj]);

// set the new current Arrow
currentArrow = newAccArray[obj];

// toggle the accordion
//myAccordion.showThisHideOpen(newAccArray[obj]);
myAccordion.showThisHideOpen(newAccArray[obj]);

}

}

/////////////////////////////////////////////////////////
//
// FUNCTIONS TO TOGGLE THE PILL IMAGE AND SET CURRENT TOGGLE
//
// change pill to ON
function toggleAccordionImageShow(el) {

// grab our pill image
var obj = el.getLast().getFirst();

// get our arrow id / accordion id
var newArrowId = obj.id.replace(/arrow/g,'');

// set current Arrow
currentArrow = newArrowId;

// set the new source
if(!obj.src.test('Lite')){
obj.setProperty('src',obj.src.replace(/.gif/g,'Lite.gif'));
}

}

// change pill to off
function toggleAccordionImageHide(el) {

// grab our pill image
var obj = el.getLast().getFirst();

// set the new source
obj.setProperty('src',obj.src.replace(/Lite/g,''));

}


/////////////////////////////////////////////////////////
//
// ACCORDION VARS SETUP
//
var myAccordion;
var myStretch;
var myStretcher;

/////////////////////////////////////////////////////////
//
// WINDOW ONLOAD STUFF - onDomReady from Moottools
//
Window.onDomReady(function() {

// get accordion elements
myStretch = document.getElementsByClassName('toggler');
myStretcher = document.getElementsByClassName('accordion');

// setup the accordion elements by clearing display styles
myStretcher.each(function(el){
el.style.display = '';
});

// Create the accordion
myAccordion = new fx.Accordion(myStretch, myStretcher,
{
/*fixedHeight: 125,*/
opacity : true,
openClose : true,
onActive : function(el){toggleAccordionImageShow(el)},
onBackground : function(el){toggleAccordionImageHide(el)},
itemsOpen : [],
/*
itemsOpen : [0,1,2],
start : 'first-open'
*/
});
/////////////////////////////////////////////////////////
//
// SETUP THE TOOLTIPS
//

// tooltip array
var as = [];

// grab all images that are supposed to have a tooltip
$S('img.hasTooltip').each(function(a){ if (a.getAttribute('title')) as.push(a); });

// create tooltip instance
new Tips(as, {maxOpacity: 0.9, maxTitleChars: 300});


});

//--->
</script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-278350-1";
urchinTracker();
</script>
<script src="/mint/?js" type="text/javascript">
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><table width="1000" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&lt;script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','1000','height','163','src','flash/menu','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','flash/menu' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1000" height="163">
<param name="movie" value="flash/menu.swf" />
<param name="quality" value="high" />
<embed src="flash/menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1000" height="163"></embed>
</object></noscript></td>
</tr>
<tr>
<td valign="top" background="img/back.jpg"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="715" valign="top"><table width="715" border="0" cellpadding="0" cellspacing="19">
<tr>
<td valign="top"><table width="715" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="715" height="33" valign="top" background="img/curva_branca.png">&nbsp;</td>
</tr>
<tr>
<td height="450" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" align="left" cellpadding="8" cellspacing="5" >
<tr>
<td align="left" valign="top"><table width="685" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="produtos/titulo_podutos.jpg" alt="Fale conosco" width="680" height="30" /></td>
</tr>
<tr>
<td width="200" valign="top"><img src="produtos/btn_rodas.jpg" alt="Contato" width="200" height="20" /></td>
<td width="200" valign="top">&lt;script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','200','height','20','src','produtos/btn_paleteiras','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','produtos/btn_paleteiras' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="200" height="20">
<param name="movie" value="produtos/btn_paleteiras.swf" />
<param name="quality" value="high" />
<embed src="produtos/btn_paleteiras.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="20"></embed>
</object></noscript></td>
<td width="280" valign="top">&lt;script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','200','height','20','src','produtos/btn_carrinhos','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','produtos/btn_carrinhos' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="200" height="20">
<param name="movie" value="produtos/btn_carrinhos.swf" />
<param name="quality" value="high" />
<embed src="produtos/btn_carrinhos.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="20"></embed>
</object></noscript></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top"><table width="300%" border="0" cellspacing="10" cellpadding="5">
<tr>
<td><div class="wrap">
<div class="toggler" onmouseover="this.className = 'togglerHover';" onmouseout="this.className = 'toggler';">
<div><img src="images/marcador_inv.jpg" width="1" height="1" /> <span>Industriais</span></div>
</div>
<div class="accordion">
<div>
<div>
<div align="left">
<table width="100%" border="0" cellspacing="2" cellpadding="4">
<tr>
<td width="90">&nbsp;</td>
<td width="153" bgcolor="#EBEBEB" class="style10"><a href="rodas_ind_s_L10.html">S&eacute;rie L-10</a></td>
<td width="280" bgcolor="#EBEBEB"><a href="rodas_ind_s_L10.html" class="style5"></a></td>
<td width="78" align="right" bgcolor="#EBEBEB" class="style5">at&eacute; 80 kg</td>
</tr>
<tr>
<td width="90">&nbsp;</td>
<td bgcolor="#EBEBEB" class="style10"><a href="rodas_ind_s_L12.html">S&eacute;rie L-12<br />
</a></td>
<td width="280" bgcolor="#EBEBEB"><a href="rodas_ind_s_L12-14.html" class="style5"></a></td>
<td width="78" align="right" bgcolor="#EBEBEB" class="style5">at&eacute; 170 kg<br /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td bgcolor="#EBEBEB" class="style10"><a href="rodas_ind_s_L14.html">S&eacute;rie L-14</a></td>
<td width="280" bgcolor="#EBEBEB">&nbsp;</td>
<td width="78" align="right" bgcolor="#EBEBEB" class="style5">at&eacute; 300 kg</td>
</tr>
<tr>
<td width="90">&nbsp;</td>
<td bgcolor="#EBEBEB" class="style10"><a href="rodas_ind_s_PCX.html">S&eacute;rie PCX</a></td>
<td width="280" bgcolor="#EBEBEB" class="style5">Pneum&aacute;tico Axial</td>
<td width="78" align="right" bgcolor="#EBEBEB" class="style5">at&eacute; 300 kg</td>
</tr>
<tr>
<td width="90">&nbsp;</td>
<td bgcolor="#EBEBEB" class="style10"><a href="rodas_ind_s_S14.html">S&eacute;rie S14</a></td>
<td width="280" bgcolor="#EBEBEB"><span class="style5">Export</span></td>
<td width="78" align="right" bgcolor="#EBEBEB" class="style5">at&eacute; 400 kg</td>
</tr>
<tr>
<td width="90">&nbsp;</td>
<td bgcolor="#EBEBEB" class="style10"><a href="rodas_ind_s_PMX.html">S&eacute;rie PMX</a></td>
<td width="280" bgcolor="#EBEBEB"><span class="style5">Pneumacico Axial</span></td>
<td width="78" align="right" bgcolor="#EBEBEB" class="style5">at&eacute; 500 kg</td>
</tr>
<tr>
<td width="90">&nbsp;</td>
<td bgcolor="#EBEBEB" class="style10"><a href="rodas_ind_s_EXTREMES.html">S&eacute;rie Extremes</a></td>
<td width="280" bgcolor="#EBEBEB"><span class="style5">Inox</span></td>
<td width="78" align="right" bgcolor="#EBEBEB" class="style5">at&eacute; 700 kg</td>
</tr>
<tr>
<td width="90">&nbsp;</td>
<td bgcolor="#EBEBEB" class="style10"><a href="rodas_ind_s_S2.html">S&eacute;rie S2</a></td>
<td width="280" bgcolor="#EBEBEB"><span class="style5">Export</span></td>
<td width="78" align="right" bgcolor="#EBEBEB" class="style5">at&eacute; 700 kg</td>
</tr>
<tr>
<td width="90">&nbsp;</td>
<td bgcolor="#EBEBEB" class="style10"><a href="rodas_ind_s_M.html">S&eacute;rie M</a></td>
<td width="280" bgcolor="#EBEBEB"><span class="style5">M&eacute;dio Estampado</span></td>
<td width="78" align="right" bgcolor="#EBEBEB" class="style5">at&eacute; 700 kg</td>
</tr>
<tr>
<td width="90">&nbsp;</td>
<td bgcolor="#EBEBEB" class="style10"><a href="rodas_ind_s_MX.html">S&eacute;rie MX</a></td>
<td width="280" bgcolor="#EBEBEB"><span class="style5">M&eacute;dio Axial</span></td>
<td width="78" align="right" bgcolor="#EBEBEB" class="style5">at&eacute; 900 kg</td>
</tr>
<tr>
<td width="90">&nbsp;</td>
<td bgcolor="#EBEBEB" class="style10"><a href="rodas_ind_s_CMX.html">S&eacute;rie CMX</a></td>
<td bgcolor="#EBEBEB"><span class="style5">Mola Anti-choque M&eacute;dio axial</span></td>
<td align="right" bgcolor="#EBEBEB" class="style5">at&eacute; 1200 kg</td>
</tr>
<tr>
<td width="90">&nbsp;</td>
<td bgcolor="#EBEBEB" class="style10"><a href="rodas_ind_s_PMX.html">S&eacute;rie PMX</a></td>
<td bgcolor="#EBEBEB"><span class="style5">Meio Pesado Axial</span></td>
<td align="right" bgcolor="#EBEBEB" class="style5">at&eacute; 1400 kg</td>
</tr>
<tr>
<td width="90">&nbsp;</td>
<td bgcolor="#EBEBEB" class="style10"><a href="rodas_ind_s_PX.html">S&eacute;rie PX</a></td>
<td bgcolor="#EBEBEB"><span class="style5">Super Pesado Axial</span></td>
<td align="right" bgcolor="#EBEBEB" class="style5">at&eacute; 1400 kg</td>
</tr>
<tr>
<td width="90">&nbsp;</td>
<td bgcolor="#EBEBEB" class="style10"><a href="rodas_ind_s_CPX.html">S&eacute;rie CPX</a></td>
<td bgcolor="#EBEBEB"><span class="style5">Mola Anti-choque Pesado axial</span></td>
<td align="right" bgcolor="#EBEBEB" class="style5">at&eacute; 2000 kg</td>
</tr>
<tr>
<td width="90">&nbsp;</td>
<td bgcolor="#EBEBEB" class="style10"><a href="rodas_ind_s_PEX.html">S&eacute;rie PEX</a></td>
<td bgcolor="#EBEBEB"><span class="style5">Extra Pesado Axial</span></td>
<td align="right" bgcolor="#EBEBEB" class="style5">at&eacute; 2800 kg</td>
</tr>
<tr>
<td width="90">&nbsp;</td>
<td bgcolor="#EBEBEB" class="style10"><a href="rodas_ind_s_DE-DERX.html">S&eacute;rie DE / DERX</a></td>
<td bgcolor="#EBEBEB"><span class="style5">Dolly Extra Axial</span></td>
<td align="right" bgcolor="#EBEBEB" class="style5">at&eacute; 6000 kg</td>
</tr>
</table>
</div>
</div>
<div class="bottomMargin"> </div>
</div>
</div>
<div class="toggler" onmouseover="this.className = 'togglerHover';" onmouseout="this.className = 'toggler';">
<div><img src="images/marcador_inv.jpg" width="1" height="1" /> <span>M&oacute;veis</span> </div>
</div>
<div class="accordion">
<div>
<div>
<table width="100%" border="0" cellspacing="2" cellpadding="4">
<tr>
<td width="90">&nbsp;</td>
<td width="152" bgcolor="#EBEBEB" class="style10"><a href="rodizios_mov_classic.html">Classic</a></td>
<td width="280" bgcolor="#EBEBEB"><a href="rodas_ind_s_L10.html" class="style5"></a></td>
<td width="78" align="right" bgcolor="#EBEBEB" class="style5">&nbsp;</td>
</tr>
<tr>
<td width="90">&nbsp;</td>
<td bgcolor="#EBEBEB" class="style10"><a href="rodizios_mov_color_gel.html">Color Gel </a></td>
<td width="280" bgcolor="#EBEBEB"><a href="rodas_ind_s_L12-14.html" class="style5"></a></td>
<td width="78" align="right" bgcolor="#EBEBEB" class="style5">&nbsp;</td>
</tr>
<tr>
<td width="90">&nbsp;</td>
<td bgcolor="#EBEBEB" class="style10"><a href="rodizios_mov_disney.html">Disney</a></td>
<td width="280" bgcolor="#EBEBEB" class="style5">&nbsp;</td>
<td width="78" align="right" bgcolor="#EBEBEB" class="style5">&nbsp;</td>
</tr>
<tr>
<td width="90">&nbsp;</td>
<td bgcolor="#EBEBEB" class="style10"><a href="rodizios_mov_evidence.html">Evidence</a></td>
<td width="280" bgcolor="#EBEBEB">&nbsp;</td>
<td width="78" align="right" bgcolor="#EBEBEB" class="style5">&nbsp;</td>
</tr>
<tr>
<td width="90">&nbsp;</td>
<td bgcolor="#EBEBEB" class="style10"><a href="rodizios_mov_mobile.html">Mobile</a></td>
<td width="280" bgcolor="#EBEBEB">&nbsp;</td>
<td width="78" align="right" bgcolor="#EBEBEB" class="style5">&nbsp;</td>
</tr>
<tr>
<td width="90">&nbsp;</td>
<td bgcolor="#EBEBEB" class="style10"><a href="rodizios_mov_squadroni.html">Squadroni</a></td>
<td width="280" bgcolor="#EBEBEB">&nbsp;</td>
<td width="78" align="right" bgcolor="#EBEBEB" class="style5">&nbsp;</td>
</tr>
</table>
</div>
<div class="bottomMargin"> </div>
</div>
</div>
</div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td valign="top"><table width="100%" border="0" cellspacing="30" cellpadding="0">
<tr>
<td align="center"><img src="img/banner_dir.jpg" width="187" height="269" /></td>
</tr>
<tr>
<td valign="top"><img src="img/banner_bit.png" width="188" height="113" /></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/rodape.jpg" width="1000" height="110" /></td>
</tr>
<tr>
<td align="right"><a href="http://www.len.com.br/" target="_blank" style="font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration:none; color:#666666; font-size:10px;">LEN COMUNICA&Ccedil;&Atilde;O &amp; BRANDING &copy;</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>[/codebox]

alguém?

Editado por fercosmig
Adicionar tag CODE
Link para o comentário
Compartilhar em outros sites

  • 0

no ie apresentou erro nesta linha:

AC_FL_RunContent( 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0', 'width', '200', 'height', '20', 'src', 'produtos/btn_carrinhos', 'quality', 'high', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'movie', 'produtos/btn_carrinhos' );

erro: "objeto esperado"

dá uma olhada para ver se não está utilizando algum objeto que ainda não foi criado.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...