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

Submenus Para Menus Em CSS


Read

Pergunta

5 respostass a esta questão

Posts Recomendados

  • 0

no exemplo acima tem uma barra com varios menus ( Menu 1 , Menu 2 , ETC )

eu quero que ao passar o mouse ou clicar em cada menu desses ele mostre opções

exemplo :

Menu 1

Opção 1

Opção 2

Opção 3

E Que cada opção direcione para uma url diferente

este menu tinha submenus más como não tava funcionando no FF

eu retirei e agora o site de onde o clonei retirou a barra por inteiro sendo assim

não tenho como restaurar o script já que conheço muito pouco esses codigos

Link para o comentário
Compartilhar em outros sites

  • 0

Leitura obrigatória: http://tableless.com.br/artigos/tutorial/

Aprenderá a fazer qualquer menu com sub-nível.

Link para o comentário
Compartilhar em outros sites

  • 0

Dá uma olhada nesse código aki!

<html>
<head>
    <title>Untitled</title>
    
    <!--|||||=========== COLOQUE ENTRE AS TAGS HEAD ==========|||||||||| -->
    
    <!-- ||**||**||**||  FOLHA DE ESTILOS (CSS) ||**||**||**|| -->
    <style type="text/css">    
    /*+++++++++++++++ RELATIVO AS CATEGORIAS +++++++++++++++++++++*/
    
    /**** LINKS DOS NOMES DAS CATEGORIAS ****/
    /* Link em estado natural*/
    a.link_menu:link{color:navy;text-decoration:none;font-weight:normal;font-family:arial;font-size:12px}
    /* Link depois de visitado*/
    a.link_menu:visited{color:navy;text-decoration:none;font-weight:normal;font-family:arial;font-size:12px}
    /* Link ao passar o mouse*/
    a.link_menu:hover{color:#ffffff;text-decoration:underline;font-weight:bold;font-family:arial;font-size:12px}
    /**** FIM LINKS DOS NOMES DAS CATEGORIAS ****/
    
    /**** CELULAS DOS NOMES DAS CATEGORIAS ****/
    /*padding top right bottom left */
    .titulo_menu{       
       background-color:red;
        background-image:url(none);
        width:150px;
        height:25px;
        border:1px solid blue;
        padding: 5px 0px 0px 5px;
    }
    /**** FIM CELULAS DOS NOMES DAS CATEGORIAS ****/
    
    /*++++++++++++ FIM RELATIVO AS CATEGORIAS +++++++++++++++++++++*/        
    
    
    
    /*++++++++++++  RELATIVO AS SUB-CATEGORIAS +++++++++++++++++++++*/
    
    /**** LINKS DOS NOMES DAS SUB-CATEGORIAS ****/
    /* Link em estado natural*/
    a.link_smenu:link{color:#ffffff;text-decoration:none;font-weight:normal;font-family:arial;font-size:12px}
    /* Link depois de visitado*/
    a.link_smenu:visited{color:#ffffff;text-decoration:none;font-weight:normal;font-family:arial;font-size:12px}
    /* Link ao passar o mouse*/
    a.link_smenu:hover{color:navy;text-decoration:underline;font-weight:bold;font-family:arial;font-size:12px}
    /**** LINKS DOS NOMES DAS SUB-CATEGORIAS ****/
        
    /**** CELULAS DOS NOMES DAS SUB-CATEGORIAS ****/
    /*padding top right bottom left */
    .itens_menu{
       background-color:blue;
        background-image:url(none);
        width:137px;
        height:25px;
        border:1px solid red;
        padding: 5px 0px 0px 5px;
    }    
    /**** FIM CELULAS DOS NOMES DAS SUB-CATEGORIAS ****/
    
    /**** CELULAS DE REVEZAMENTO DOS NOMES DAS SUB-CATEGORIAS ****/
    .itens_menu_r{
       background-color:#0099ff;
        background-image:url(none);
        width:137px;
        height:25px;
        border:1px solid red;
        padding: 5px 0px 0px 5px;        
    }    
    /**** FIM CELULAS DE REVEZAMENTO DOS NOMES DAS SUB-CATEGORIAS ****/
    
    /*++++++++++++ FIM RELATIVO AS SUB-CATEGORIAS +++++++++++++++++++++*/    
    </style>    
    <!-- ||**||**||** FIM FOLHA DE ESTILOS (CSS) ||**||**||** -->
    
    <!-- |||||||||||||||| FUNÇÕES JAVASCRIPT (NÃO EDITE) |||||||||||||||| -->
    <script language="javascript">
       c=0
        du="";
       function escondediv(dv,n){        
            
           for(i=1;i<=n;i++){            
               if(i==dv ){
                   if(du!=dv){
                      document.getElementById('mdiv'+i).style.display="inline"
                       du=dv
                    }else{
                       du=""
                       document.getElementById('mdiv'+i).style.display="none"
                    }
               }else{
                     document.getElementById('mdiv'+i).style.display="none"                                      
               }                
                
            }        
        }
        
    function reveza(qualquer){
      document.getElementById(qualquer).className="itens_menu_r"
    }
    function volta(qualquer){
      document.getElementById(qualquer).className="itens_menu"
    }
    </script>
    <!-- ||||||||||||| FIM FUNÇÕES JAVASCRIPT (NÃO EDITE) |||||||||||||||| -->    
    
    <!--|||||========== FIM COLOQUE ENTRE AS TAGS HEAD =========|||||||||| -->
</head>

<body>

<!--|||||||||||||||||  COLOQUE DENTRO AS TAGS BODY||||||||||||||||||||||||||||| -->

<script>
//Coloque aqui o número de itens de menu
n_divs='5'
</script>

<div class="titulo_menu"><a href="#" class="link_menu"  target="alvo">Link fixo</a></div>

<div class="titulo_menu"  ><a href="java script:void(escondediv('1',n_divs))" class="link_menu" >Categoria 1</a></div>
<div id="mdiv1"  style="display:none">
   <table border="0">
       <tr><td id="um" class="itens_menu" ><a href="#" onmouseover="reveza('um')" onmouseout="volta('um')" class="link_smenu" target="alvo">link item1A</a></td></tr>
        <tr><td class="itens_menu" ><a href="#" class="link_smenu" target="alvo">link item2A</a></td></tr>
        <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item3A</a></td></tr>
    </table>
</div>

<div class="titulo_menu"><a href="java script:void(escondediv('2',n_divs))" class="link_menu">Categoria 2</a></div>
<div id="mdiv2"  style="display:none">
   <table border="0">
       <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item1B</a></td></tr>
        <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item2B</a></td></tr>
        <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item3B</a></td></tr>
    </table>
</div>

<div class="titulo_menu"><a href="java script:void(escondediv('3',n_divs))" class="link_menu">Categoria 3</a></div>
<div id="mdiv3"  style="display:none">
   <table border="0">
       <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item1C</a></td></tr>
        <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item2C</a></td></tr>
        <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item3C</a></td></tr>
    </table>
</div>

<div class="titulo_menu"><a href="java script:void(escondediv('4',n_divs))" class="link_menu">Categoria 4</a></div>
<div id="mdiv4"  style="display:none">
   <table border="0">
       <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item1D</a></td></tr>
        <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item2D</a></td></tr>
        <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item3D</a></td></tr>
    </table>
</div>

<div class="titulo_menu"><a href="java script:void(escondediv('5',n_divs))" class="link_menu">Categoria 5</a></div>
<div id="mdiv5"  style="display:none">
   <table border="0">
       <tr><td class="itens_menu"><a href="#" class="link_smenu">link item1E</a></td></tr>
        <tr><td class="itens_menu"><a href="#" class="link_smenu">link item2E</a></td></tr>
        <tr><td class="itens_menu"><a href="#" class="link_smenu">link item3E</a></td></tr>
    </table>
</div>
<!--|||||||||||||||||  COLOQUE DENTRO AS TAGS BODY||||||||||||||||||||||||||||| -->

</body>
</html>

Serviu???

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