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

Barra De Navegação...


nadia_xidea

Pergunta

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.

Link para o comentário
Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

  • 0

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>

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
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...