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

sublink


Diogo Freitas

Pergunta

Boa tarde,

Estou com dificuldades em criar um sublink.

Imaginemos umas letras link que ao passar por cima faz aparecer outros links por baixo.

<div id="botoes">
        <span class="styletop"><a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">semana</a> | <a href="#">emprego</a> | <a href="#">passa-tempo</a> | <a href="#">downloads</a> | <a href="#">artigos de opini&atilde;o</a> | <a href="#">espa&ccedil;o jovem</a> </span></div>
        <div id="sublink1" class="sublinknav"><a href="#">Semana1</a></div>
        </div>

alguém me consegue dizer pk o sublink não aparece ao passar por cima do link principal?

abraço

Link para o comentário
Compartilhar em outros sites

7 respostass a esta questão

Posts Recomendados

  • 0

Ai gigabyte,

Obrigado pela disponibilidade.

Você me pediu o stylesheet ne?

aqui vai:

.tabela #principal{
    background-color:#FFFFFF;
    width:800px;
    height:auto;
    top:0;
    color:#666666;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    margin: 0 auto;
}

.tabela #down{
    background-color:#D5E1A7;
    color:#666666;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    width:810px;
    margin:0 auto;
    height:auto;
    padding:5px;
    border-top:solid;
    border-top-width:thin;
    border-top-color:#BDC719;
}

/* ---------------------- tabela centro ------------------- */

.tabela #centro_principal{
    background-color:#FFFFFF;
    width:800px;
    height:auto;
    margin: 0 auto;
    color:#666666;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    line-height: 16px;
    padding:10px;
}

.tabela #centro_top_pub{
    width:800px;
    height:auto;
    padding-bottom:10px;
}

.tabela #esquerda_float{
    background-color:#FFFFFF;
    float: left;
    width:200px;
    height:auto;
    top:0px;
    color:#666666;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    padding-bottom:20px;
    padding-right:20px;
    position:relative;
}

.tabela #direita_float{
    background-color:#FFFFFF;
    float: right;
    width:255px;
    height:auto;
    top:0px;
    color:#666666;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    padding-bottom:20px;
    padding-left:20px;
    position:relative;
}

/* ------------------- tabela topo --------------------- */

.top{
    background-color:#FFFFFF;
    float:left;
    top:0;
    color:#FFFFFF;
    width:800px;
    margin:0 auto;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:0px;
    line-height:16px;
}

.top img{
    float:left;
    padding-right:20px;
    padding-left:20px;
}

.tabela #botoes{
    background-image:url(../gifs/img_botoes.gif);
    background-position:center;
    background-repeat:no-repeat;
    width:800px;
    height:26px;
    margin:0 auto;
    text-align:center;
    padding:10px;
    padding-bottom:0px;
}

.sublinknav{
    min-width: 800px;
    height: 20px;
    color: #666666;
    visibility:hidden;
    padding-left:20px;
    margin:0 auto;
    font-size:10px;
}

/* ---------------------- texto ---------------------------- */

.styletop{
    color:#617819;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:bold;
}

.styletitulos{
    color:#333333;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:bold;
}

/* ---------------------- links ------------------------------ */

a:link, a:visited{
    color:#666666;
    text-decoration:none;
}

a:hover{
    color: #BDC719;
    text-decoration: underline;
}

.sublinknav a:link, .sublinknav a:visited {
    font-size:10px;
    color: #666666;
}

.sublinknav a:hover{
    color: #cccccc;
}

Link para o comentário
Compartilhar em outros sites

  • 0

Rsrsrsrs...

Fala Diogo!!!

Eu pedi pra postar o js, ou seja o javascript, porém analisei o css (chique, né?) e creio que imagino o que está ocorrendo.

Em primeiro lugar, você está utilizando a propriedade de css visibility, que oculta, porém reserva o local onde o objeto está. Em seu lugar eu usaria a propriedade display. Em segundo, essa propriedade está definida dentro da classe css, então não adianta tentar mudá-la por js que não dá. Para isso você deveria ou identificar direto no objeto:

<div id="sublink1" class="sublinknav" style="display:none"><a href="#">Semana1</a></div>
Ou então criar uma classe com as características que você quer que o objeto tenha ao ser exibido e atribuí-la por completo:
// HTML...
        <a onmouseover="java script:document.getElementById('sublink1').className='sublinkview'">
        <div id="sublink1" class="sublinknav"><a href="#">Semana1</a></div>
// CSS:
.sublinknav{
    display:none;
}
.sublinkview{
    display:block;
    min-width: 800px;
    height: 20px;
    color: #666666;
    padding-left:20px;
    margin:0 auto;
    font-size:10px;
}

Link para o comentário
Compartilhar em outros sites

  • 0

Td bem?

Penso que é isto que você quer

<script type="text/javascript">
function MM_CheckFlashVersion(reqVerStr,msg){
  with(navigator){
    var isIE  = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
    var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
    if (!isIE || !isWin){  
      var flashVer = -1;
      if (plugins && plugins.length > 0){
        var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
        desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
        if (desc == "") flashVer = -1;
        else{
          var descArr = desc.split(" ");
          var tempArrMajor = descArr[2].split(".");
          var verMajor = tempArrMajor[0];
          var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
          var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
          flashVer =  parseFloat(verMajor + "." + verMinor);
        }
      }
      // WebTV has Flash Player 4 or lower -- too low for video
      else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;

      var verArr = reqVerStr.split(",");
      var reqVer = parseFloat(verArr[0] + "." + verArr[2]);
  
      if (flashVer < reqVer){
        if (confirm(msg))
          window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
      }
    }
  } 
}
</script>

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