Jump to content
Fórum Script Brasil
  • 0

Barra De Navegação...


nadia_xidea
 Share

Question

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 to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 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 to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      151k
    • Total Posts
      649.1k
×
×
  • Create New...