Preciso De Um Menu Horizontal Em Cascata

Kllaus · Junho 16, 2007

Olá...

Estou querendo colocar no meu site www.cjcinformatica.com.br um menu horizontal que mostre os submenus em cascata, estilo esse http://www.opencube.com/, alguém sabe de algum código pronto em que eu precise somente alterar os nomes e os links para que eu possa usar?

Obrigado.

juliano.ma · Junho 17, 2007

Aqui está um bom exemplo em javascript

<html>
<head>
<title>Menu Horizontal com Sub-Menus vertical</title>


<style type="text/css">
<!--
a.bi{
background-color:lightyellow;
color:black;
display:block;
font-family:Arial;
font-size:12pt;
font-weight:bold;
padding:3px 3px 3px 3px;
text-decoration:none;
border-color: #225555 #000000 #000000 #225555;
border-style:solid;
border-width:2px;
}
a.bi:hover{
background-color:yellowgreen;
color:lightslategrey;
}
a.mi{
background-color:lightyellow;
color:black;
display:block;
font-family:Arial;
font-size:12pt;
font-weight:bold;
padding: 3px 3px 3px 3px;
text-decoration:none;
}
a.mi:hover{
background-color:yellowgreen;
color:lightslategrey;
}
.mn{
background-color:lightyellow;
border-color: #225555 #000000 #000000 #225555;
border-style:solid;
border-width:2px;
z-index:100;
}
.sp{
BORDER-TOP:#000000 1px solid;
MARGIN:2px;
BORDER-BOTTOM:#225555 1px solid
}
//-->
</style>
</head>
<body>
<script language="JavaScript">
<!--//
var D6=window,Y7=document;function B8(){this.ver=navigator.appVersion;this.agent=navigator.userAgent;this.dom=Y7.getElementById?1:0;this.opera5=this.agent.indexOf("Opera 5")>-1;this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:1;this.ie4=(Y7.all && !this.dom && !this.opera5)?1:1;this.ie=this.ie4||this.ie5||this.ie6;this.mac=this.agent.indexOf("Mac")>-1;this.ns6=(this.dom && parseInt(this.ver)>=5)?1:0;this.ns4=(Y7.layers && !this.dom)?1:0;this.bw=(this.ie6||this.ie5||this.ie4||this.ns4||this.ns6||this.opera5);return this}bw=new B8();z=1;b=1;g="";if(bw.opera5||bw.ns6){b=2};if(bw.ie){g=" style='width: 100%'"}else{z=6}muito=50;ml=50;w=150;mh=23;mw=ml-w;k=1;muito=muito-z;p="<a class='mi'"+g+" href='";que="' title='";r="\"; return true' onmouseout='window.status=\"\"; return true'>";t="</a>";a="' onmouseover='window.status=\"";v="<div class=sp></div>"
m=new Array();n=new Array();s=new Array();sw=new Array();su=new Array();st=new Array()
m[0]='';n[0]='#';sw[0]=150;su[0]='';st[0]="";s[0]=""
+p+"http://www.otimizacao-sites-busca.com/"+que+a+"Otimização Sites"+r+""+t
m[0]='Home';n[0]='#';sw[0]=150;su[0]='Home';st[0]="";s[0]=""
+p+"http://www.otimizacao-sites-busca.com/"+que+a+"Home"+r+"Home"+t
m[1]='Otimização';n[1]='#';sw[1]=150;su[1]='Otimização';st[1]="";s[1]=""
+p+"http://www.otimizacao-sites-busca.com/otimizacao/index.htm"+que+a+"Textos"+r+"Textos"+t
+p+"http://www.otimizacao-sites-busca.com/art-otimizacao/index.htm"+que+a+"Artigos"+r+"Artigos"+t
m[2]='Posicionamento';n[2]='#';sw[2]=150;su[2]='Posicionamento';st[2]="";s[2]=""
+p+"http://www.otimizacao-sites-busca.com/posicionamento/index.htm"+que+a+"Textos"+r+"Textos"+t
+p+"http://www.otimizacao-sites-busca.com/art-posicionamento/index.htm"+que+a+"Artigos"+r+"Artigos"+t
m[3]='Artigos';n[3]='#';sw[3]=150;su[3]='Artigos';st[3]="";s[3]=""
+p+"http://www.otimizacao-sites-busca.com/art-blogs/index.htm"+que+a+"Blogs"+r+"Blogs"+t
+p+"http://www.otimizacao-sites-busca.com/art-buscas/index.htm"+que+a+"Mecanismos Busca"+r+"Mecanismos Busca"+t
+p+"http://www.otimizacao-sites-busca.com/art-diretorios/index.htm"+que+a+"Diretórios"+r+"Diretórios"+t
+p+"http://www.otimizacao-sites-busca.com/art-misc/index.htm"+que+a+"Miscelânea"+r+"Miscelânea"+t
+p+"http://www.otimizacao-sites-busca.com/art-otimizacao/index.htm"+que+a+"Otimização"+r+"Otimização"+t
+p+"http://www.otimizacao-sites-busca.com/art-posicionamento/index.htm"+que+a+"Posicionamento"+r+"Posicionamento"+t
+p+"http://www.otimizacao-sites-busca.com/art-tags/index.htm"+que+a+"TAGS"+r+"TAGS"+t
+p+"http://www.otimizacao-sites-busca.com/art-xml/index.htm"+que+a+"XML"+r+"XML"+t
ma=m.length
if (k==1) {mw2=ml-w;
for (i=0; i < ma; i++){document.write("<div id='sb"+i+"' class='mn' style='position: absolute; top:"+(muito+mh)+";left:"+(mw+=w+2)+";width:"+(sw[i]-b)+"' onmouseover='o["+i+"].showIt()' onmouseout='o["+i+"].hideIt()'>"+s[i]+"</div>")}
for (i=0; i < ma; i++){document.write("<div style='position: absolute; top:"+muito+";left:"+(mw2+=w+2)+";width:"+w+"' onmouseover='o["+i+"].showIt()' onmouseout='o["+i+"].hideIt()'><a class='bi'"+g+" href='"+n[i]+que+st[i]+a+su[i]+r+m[i]+t+"</div>")}}
else {mw2=muito-mh;mt2=muito-mh+2
for (i=0; i < ma; i++){document.write("<div id='sb"+i+"' class='mn' style='position: absolute; top:"+(mt2+=(mh+1))+";left:"+(ml+w-10)+";width:"+sw[i]+"' onmouseover='o["+i+"].showIt()' onmouseout='o["+i+"].hideIt()'>"+s[i]+"</div>")}
for (i=0; i < ma; i++){document.write("<div style='position: absolute; top:"+(mw2+=(mh+1))+";left:"+ml+";width:"+w+"' onmouseover='o["+i+"].showIt()' onmouseout='o["+i+"].hideIt()'><a class='bi'"+g+" href='"+n[i]+que+st[i]+a+su[i]+r+m[i]+t+"</div>")}}
function lib_obj(obj,nest){nest=(!nest) ? "":'document.'+nest+'.';this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt;this.ref=bw.dom||bw.ie4?document:this.css.document;this.x=parseInt(this.css.left)||this.css.pixelLeft||this.evnt.offsetLeft||0;this.y=parseInt(this.css.top)||this.css.pixelTop||this.evnt.offsetTop||0;return this}
function lib_doc_size(){this.x=0;this.x2=bw.ie && document.body.offsetWidth-20||innerWidth||0;this.y=0;this.y2=bw.ie && document.body.offsetHeight-5||innerHeight||0;this.x50=this.x2/2;this.y50=this.y2/2;return this;}
lib_obj.prototype.showIt = function(){this.css.visibility="visible"}
lib_obj.prototype.hideIt = function(){this.css.visibility="hidden"}
function libinit(){page=new lib_doc_size();o=new Array();for (i=0; i < ma; i++){o[i]=new lib_obj('sb'+i);o[i].hideIt()}}
libinit()
//-->
</script>
</body>
</html>

Aqui está um bom exemplo em css

<html>
<head>
<!--[if lte IE 6]>
<script>
function DOMgetElementsByClassName($node,$className){
  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){
     if (obj.addEventListener){
         obj.addEventListener(evType, fn, true)}
     if (obj.attachEvent){
         obj.attachEvent("on"+evType,  fn)}
}
function ativaHover(classe) {
  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[i].onmouseover=function()  {
    this.className+="  over";
   }
   sfEls[i].onmouseout=function()  {
    this.className=this.className.replace(new  RegExp(" over\\b"), "");
   }
   }
  }
}

addEvent(window,"load",function  () { ativaHover("menu-hv"); });
</script>
<![endif]-->
<style>
.menu-hv * { 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 {  background: #DF2800 url(img/bg-menu.jpg) repeat-x top;
                                    width: 757px;  margin: 0 0 0 12px; height: 31px;}
             .menu-hv a { font-weight: bold;  text-decoration: none; color: #FFF;
                                        padding: 0 10px; line-height: 23px;}
             .menu-hv a:hover { text-decoration:  underline; background-color: #000; color: #FFF;}
             .menu-hv ul li ul {  background-color: #DF2800; border: 1px solid #000; }
</style>
</head>
<body>
<div class="menu-hv">
   <ul>
     <li><a href="quem-somos.php">Quem  somos</a></li>
     <li><a  href="produtos.php">Produtos</a>
       <ul>
         <li><a  href="radios-portateis.php">Rádios  portáteis</a>
           <ul>
              <li><a href="#">Terceiro  nível</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
           </ul>
         </li>
         <li><a  href="radios-moveis.php">Rádios  móveis</a></li>
         <li><a  href="repetidoras.php">Repetidoras</a></li>
         <li><a  href="sistemas-hf.php">Sistemas HF</a></li>
         <li><a  href="acessorios.php">Acessórios</a></li>
       </ul>
     </li>
     <li><a  href="revendas.php">Revendas</a></li>
     <li><a href="cotato.php">Solicite uma  cotação</a></li>
     <li><a  href="assistencia-tecnica.php">Assistência  técnica</a></li>
     <li><a  href="locacao.php">Locação</a></li>
     <li><a href="contato.php">Contate-nos  </a></li>
   </ul>
</div>
</body>
</html>

Editado Junho 17, 2007 por juliano.ma

Kllaus · Junho 17, 2007

Eu testei os dois, mas não era isso, ou não soube usar, mas eu queria como o do link acima, que a pessoa passa o mouse sobre o texto e desce uma cascata com os links.

juliano.ma · Junho 18, 2007

Estes que eu te passei faz exatamente isso.

Bom, já que você quer esse do site, aqui está o link para download do menu e outros mais disponibilizado no próprio site que você passou o link;

Exemplos de menus

Entrar

Preciso De Um Menu Horizontal Em Cascata

Pergunta

Kllaus

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

juliano.ma

Link para o comentário

Compartilhar em outros sites

Kllaus

Link para o comentário

Compartilhar em outros sites

juliano.ma

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades