Submenus Para Menus Em CSS

Read · Novembro 1, 2008

.

Editado Novembro 4, 2008 por Read

Read · Novembro 1, 2008

aff

será possivel q ninguém saiba fazer isso

Jonathan Queiroz · Novembro 2, 2008

Cara, posta mais detalhadamente o que você quer fazer

Fica meio complicado criar o submenu sem ter nem idéia do que você quer fazer

Tenta usar o atributos "visibility" das camadas

Read · Novembro 3, 2008

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

KaKarotto · Novembro 3, 2008

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

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

MuRiLo H4Ck3R · Novembro 4, 2008

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???

Entrar

Submenus Para Menus Em CSS

Pergunta

Read

Link para o comentário

Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

Read

Link para o comentário

Compartilhar em outros sites

Jonathan Queiroz

Link para o comentário

Compartilhar em outros sites

Read

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

MuRiLo H4Ck3R

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades