Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal, estou com um probleminha! Estou tentando criar um menu com sub-menu dentro de um arquivo do Smarty no caso no arquivo inxdex.tpl, mas por algum motivo ele não exibe o menu como eu quero ele é um menu quando eu passo o mouse em cima do link ele abre o sub-menu alguém pode me dar uma dica.
index.tpl
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22)<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml%22)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sistema de controle de gasotos</title>
<script type="text/javascript" src="../js/menu.js"></script>
<link rel="stylesheet" type="text/css" href="../css/menu.css" />
</head>
<body>
<p>Página Incial do Sistema</p>
<p><a href="logout.php">Sair</a></p>
<div class="menu-hv">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub-menu 2</a>
<li><a href="#">Sub-menu 2</a></li>
<li><a href="#">Sub-menu 2</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub-menu 3</a></li>
<li><a href="#">Sub-menu 3</a></li>
<li><a href="#">Sub-menu 3 >></a>
<ul>
<li><a href="#">Sub-Sub-menu 3 >></a>
<ul>
<li><a href="#">Sub-Sub-Sub-menu 3</a></li>
</ul>
</li>
<li><a href="#">Sub-Sub-menu 3</a></li>
<li><a href="#">Sub-Sub-menu 3</a></li>
<li><a href="#">Sub-Sub-menu 3</a></li>
<li><a href="#">Sub-Sub-menu 3</a></li>
</ul>
</li>
<li><a href="#">Sub-menu 3</a></li>
<li><a href="#">Sub-menu 3</a></li>
</ul>
</li>
<li><a href="#">Tabelas basicas</a>
<ul>
<li><a href="#">Assuntos</a></li>
<li><a href="#">Atividades >></a>
<ul>
<li><a href="#">Nova Atividade</a></li>
<li><a href="#">Alterar Atividade</a></li>
<li><a href="#">Consultar Atividades</a></li>
</ul>
</li>
<li><a href="#">Custos</a></li>
<li><a href="#">Documentos</a></li>
<li><a href="#">Impressões</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>menu.js
CODE
function DOMgetElementsByClassName($node,$className){/* Description: retorna um array com todos os elementos dentro
de $node que possuam a classe indicada em $className
Versão: 1.0 - 30/08/2006
Author: Micox - Náiron J.C.G - micoxjcg@yahoo.com.br
Site: http://elmicox.blogspot.com
Não retire estas informações pra não infringir direitos autorais!
*/
var $node, $atual, $className, $retorno = new Array(), $novos = new Array();
$retorno = new Array();
for (var $i=0;$i<$node.childNodes.length;$i++){
$atual = $node.childNodes[$i];if($atual.nodeType==1){// 1 = XML_ELEMENT_NODE
$classeAtual = $atual.className;
if(new RegExp("\\b"+$className+"\\b").test($classeAtual)){
$retorno[$retorno.length] = $atual;
}
if($atual.childNodes.length>0){
$novos = DOMgetElementsByClassName($atual,$className);
if($novos.length>0){
$retorno = $retorno.concat($novos);
}
}
}
}
return $retorno;
}
function addEvent(obj, evType, fn){//adiciona evento, versao crossbrowser
//retirado de http://elcio.com.br/crossbrowser/#7
if (obj.addEventListener){
obj.addEventListener(evType, fn, true)}
if (obj.attachEvent){
obj.attachEvent("on"+evType, fn)}
}
function ativaHover(classe) {
//ativa o hover para elementos n?o links, por causa de bug do IE
//retirado de http://www.maujor.com/tutorial/ddownmenu-a.php
var pais = DOMgetElementsByClassName(document.body,classe);
for (var j=0; j<pais.length; j++) {
var sfEls = pais[j].getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls*.onmouseover=function() {*this.className+=" over";
}
*sfEls**.onmouseout=function() {*
*this.className=this.className.replace(new RegExp(" over\\b"), "");*}
}
}
}
addEvent(window,"load",function () { ativaHover("menu-hv"); });
menu.css
CODE
*body { font: normal 62.5% verdana; }**/ menu horizontal-vertical by micox /*
** { margin: 0; padding: 0;}*
.menu-hv a { display: block; }
.menu-hv li { list-style: none; float: left; height: 1%; }
.menu-hv li ul { position: absolute; visibility: hidden;}
.menu-hv li ul li { float: none; white-space: nowrap; display: inline; / o inline é pro IE /}
.menu-hv li ul li ul { position: absolute; left: 100%; top: 0; }
.menu-hv li:hover ul, .menu-hv li.over ul { visibility: visible;}
.menu-hv li:hover ul ul, .menu-hv li.over ul ul { visibility: hidden; }
.menu-hv ul ul li:hover ul, .menu-hv ul ul li.over ul { visibility: visible;}
.menu-hv li ul ul ul li { position: absolute; visibility: hidden;}
.menu-hv ul li ul li ul li:hover ul li, .menu-hv ul li ul li ul li.over ul li { visibility: visible; }
/ visual /
.menu-hv { background: #fff; width: auto; height: 51px; margin:30px; }
.menu-hv a { border: 1px solid #ccc; font-weight: normal; text-decoration: none; color: #999; padding: 0 10px; line-height: 23px;}
.menu-hv a:hover { text-decoration: none; background-color: #f5f5f5; color: #ff0000;}
.menu-hv ul li ul { background-color: #fff; }
se alguém puder me ajudar serei muito grato! Uma coisa este código adicionando da mesma forma só mudando o nome do arquivo de .tpl para .html ele funciona direitinho.
Carregando comentários...