Barra De Navegação...

nadia_xidea · Novembro 23, 2006

Oi pessoal,,,

gostaria de saber qual a melhor forma de criar essa barra de navegação dos sites, como a barra da Globo.com que está em vários sites afiliados... Ou mesmo a barra da UOL, da IG...

Um modelo é este site, www.ifronteira.com

Veja a barra da Globo e uma do mesmo site que fica fixo em todas as páginas...

isto é include?

Obrigada.

Marcos-rj · Novembro 23, 2006

O nome é Abas.

um exemplo de utilização de abas.

<html>
    <head>
<style>
.abaativa {
    font-family: verdana;
    font-size: 10px;
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    font-variant: normal;
    text-transform: capitalize;
    color: #FFFFFF;
    background-image: url(../imagens/telas/abaAtiva.png);
    background-color: #999999;
}

.abainativa {
    font-family: verdana;
    font-size: 10px;
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    font-variant: normal;
    text-transform: capitalize;
    color: #FFFFFF;
    background-image: url(../imagens/telas/abaInativa.png);
    background-color: #666666;
}
</style>    
        <title>    
             Desenvolvido por Tenko            
        </title>
        
        
        <script>
        
        var aAbas       = new Array();  // Lista de abas do documento atual
        var sAbaAtiva   = ""                 // Define qual é a aba ativa no momento
        var ABA_ID      = 1
        var ABA_BLOCO   = 2
        var ABA_CAMPOS  = 3
        
        function defineAba( sId, sBloco ){
           var aAba  = new Array( ABA_CAMPOS );
           aAba[ ABA_ID    ]  = sId;
           aAba[ ABA_BLOCO ]  = sBloco;
           aAbas.push( aAba );
        }

        function defineAbaAtiva( sId ){
           trataCliqueAba( sId );
        }

        function trataMouseAba( oAba ){
           oAba.style.cursor  = "pointer";
        }

        function trataCliqueAba( sId ){
           for ( var iAba  = 0; iAba < aAbas.length; iAba++ ){
              var aAba  = aAbas[ iAba ];

              if   ( aAba[ ABA_ID ] == sId ) ativaAba( aAba );

              else                           inativaAba( aAba );
           }
        }

        function ativaAba( aAba ){
           var sAba       = aAba[ ABA_ID ];
           var oAba       = document.getElementById( sAba );
           mudaClasse( oAba, "abaativa" ); // Esse comando chama a classe css para fazer a troca

           var sBlocoAba  = aAba[ ABA_BLOCO ];
           var oBlocoAba  = document.getElementById( sBlocoAba );
           oBlocoAba.style.display  = "block";
        }

        function inativaAba( aAba ){
           var sAba       = aAba[ ABA_ID ];
           var oAba       = document.getElementById( sAba );
           mudaClasse( oAba, "abainativa" ); // Esse comando chama a classe css para fazer a troca

           var sBlocoAba  = aAba[ ABA_BLOCO ];
           var oBlocoAba  = document.getElementById( sBlocoAba );
           oBlocoAba.style.display  = "none";
        }
        
        function mudaClasse( oObjeto, sClasse ){
           oObjeto.className  = sClasse;
        }
        
        </script>
<link href="estiloSistema.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="50%" border="0" cellpadding="0" cellspacing="1">
<tr>
<td width="10%" height="36" align="center" valign="middle" class="abaativa" id="celAbaCadastro" onClick="trataCliqueAba( this.id );" onMouseOver="trataMouseAba( this );">Cadastro</td>
<td id="celAbaRelatorio" align="center" valign="middle" width="10%" class="abainativa" onMouseOver="trataMouseAba( this );" onClick="trataCliqueAba( this.id );">Relatório</td>
<td id="celAbaConsultas" align="center" valign="middle" width="10%" class="abainativa" onMouseOver="trataMouseAba( this );" onClick="trataCliqueAba( this.id );">Consultas</td>               
<td id="celAbaModelos" align="center" valign="middle" width="10%" class="abainativa" onMouseOver="trataMouseAba( this );" onClick="trataCliqueAba( this.id );">Modelos Impress&atilde;o</td>
</tr></table>
<br>
<div id="divCadastro" style="display: block">
<table border="0" width="50%"><tr><td>CADASTRO</td></tr></table></div>
<div id="divRelatorio" style="display: none">
<table border="0" width="50%"><tr><td>RELATÓRIOS</td></tr></table></div>
<div id="divConsulta" style="display: none"><table border="0" width="50%">
<tr><td>CONSULTAS</td></tr></table></div>
<div id="divModelo" style="display: none">
<table border="0" width="50%"><tr><td>MODELOS DE IMPRESSÃO</td></tr></table></div>
<script>
defineAba( "celAbaCadastro"  , "divCadastro"   );
defineAba( "celAbaRelatorio" , "divRelatorio"  );
defineAba( "celAbaConsultas" , "divConsulta"   );
defineAba( "celAbaModelos"   , "divModelo"     );
defineAbaAtiva( "celAbaCadastro" );
</script>
</body>
</html>

.Andreia. · Novembro 23, 2006

include

nadia_xidea · Novembro 23, 2006

Marcos RJ muito legal o seu modelo... me fala uma coisa... nesse modelo seu eu vi que em cada guia que eu clico e exibe um texto(conteúdo). Eu posso ao invés do texto chamar outra página? Uso uma include?

No topo então de cada página do meu site eu chamo as Abas usando uma include ou iframe...

Marcos-rj · Novembro 24, 2006

você pode fazer usando include. você cria essa barra de navegação e chama nas paginas por include.

Entrar

Barra De Navegação...

Pergunta

nadia_xidea

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

Marcos-rj

Link para o comentário

Compartilhar em outros sites

.Andreia.

Link para o comentário

Compartilhar em outros sites

nadia_xidea

Link para o comentário

Compartilhar em outros sites

Marcos-rj

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades