1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Menu CSS --> Menu Horizontal SubMenu Vertical

Discussão em 'Web Development' iniciada por khaluh, 15 de Maio de 2007. (Respostas: 9; Visualizações: 64932)

  1. khaluh

    khaluh Power Member

    Viva.

    Pretendo fazer um típico menu em CSS onde o menu visivel está na horizontal e ao fazermos o hover sobre um item, aparece o submenu respectivo na vertical.

    Tenho já o menu feito, só que o submenu aparece na horizontal. Tenho código para horizontal e para vertical, mas nao consigo combiná-lo de modo a ficar como pretendo.

    Se puderem ajudar, agradeço.
     
    Última edição pelo moderador: 16 de Maio de 2007
  2. scroll

    scroll Power Member

    posta código.
     
  3. khaluh

    khaluh Power Member

    Bem, cá vai código:

    Código CSS

    Código:
    
    /* Ínicio menu horizontal */
    #menu_hor ul {
        display:table;
        list-style-type: none;
        margin: 0px;
        padding-top: 4px;
        padding-right: 0px;
        padding-bottom: 4px;
        padding-left: 0px;
        text-align: center;
    }
    #menu_hor ul li {
        display: inline;
        padding: 0px;
        height: 25px;
    }
    
    #menu_hor ul li a {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: navy;
        text-decoration: none;
        margin: 0px;
        height: 19px;
        padding-top: 3px;
        padding-right: 5px;
        padding-bottom: 3px;
        padding-left: 5px;
    }
    
    
    #menu_hor ul li a:hover {
        color: #666666;
        border-top: 1px solid #FFF;
        border-right: 1px solid #C6C5D3;
        border-bottom:1px solid #545478;
        border-left:1px solid #F1F1F5;
        padding:0 4px;
    }
    /* Fim menu Horizontal */
    
    /* Ínicio menu Vertical */
    #menu_ver ul {
        display:table;
        list-style-type: none;
        margin: 0px;
        padding-top: 4px;
        padding-right: 0px;
        padding-bottom: 4px;
        padding-left: 0px;
        text-align: center;
    }
    
    #menu_ver ul li a {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: navy;
        text-decoration: none;
        margin: 0px;
        height: 19px;
        padding-top: 3px;
        padding-right: 5px;
        padding-bottom: 3px;
        padding-left: 5px;
    }
    #menu_ver ul li a:hover {
        color: #666;
        border-top: 1px solid #FFF;
        border-right: 1px solid #C6C5D3;
        border-bottom:1px solid #545478;
        border-left:1px solid #F1F1F5;
        padding:0 4px;
        display:block;
    }
    /* Fim menu Vertical */
    
    Código do menu

    Código:
    
    <div id="menu_hor">
        <div align="center">
          <ul> 
              <li><a href="#">A Instituição</a>
              <ul>                  
                      <li><a href="#">Quem somos</a></li>
                    <li><a href="#">Onde estamos</a></li>
                    <li><a href="#">Estrutura Orgânica</a></li>
                    <li><a href="#">Associados|Promotores</a></li>
              </ul>
              </li>
              <li><a href="#">A Escola Tecnológica</a>
              <ul>
                      <li><a href="#">Evolução Histórica</a></li>
                    <li><a href="#">Áreas de Formação</a></li>
                    <li><a href="#">Finalidades Educativas</a></li>
                    <li><a href="#">Acreditações</a></li>
                    <li><a href="#">Instalações</a></li>
              </ul>
              </li>
              <li><a href="#">Cursos</a>
              <ul>
                      <li><a href="#">Especialização Tecnológica</a></li>
                    <li><a href="#">Actualização de Activos</a></li>
                    <li><a href="#">Qualificação|Inserção Profissional</a></li>
              </ul>
              </li>
              <li><a href="#">Oportunidades</a>
              <ul>
                      <li><a href="#">Formadores</a></li>
                    <li><a href="#">Formandos</a></li>
                    <li><a href="#">Empregos</a></li>
              </ul>
              </li>
          </ul>
      </div>
    </div>
    
    

    Independentes, funcionam bem (só vertical ou só horizontal). Transcrevi apenas a parte que pretendo que tenha as 2 opções.
     
    Última edição pelo moderador: 16 de Maio de 2007
  4. trovial

    trovial Power Member

    isto é totalmente feito em css, nao é?
    nk fiz em css, so em javascript.

    alguem me traduz por miudos kual e o conceito por tras disto em css?

    kd o mouse (hover) flutua em cima do menu horizontal aparece o vertical, mas como? estava com o atributo hidden e passa para visible?
     
  5. khaluh

    khaluh Power Member

    Sim, basicamente é isso.

    Bem, entretanto arranjei um código, bastante simples.

    Código HTML

    Código:
    
     <div class="menu-hv">
       <ul>
         <li><a href="quem-somos.php">Quem  somos</a></li>
         <li><a  href="produtos.php">Produtos</a>
           <ul>
             <li><a  href="radios-portateis.php">Rádios  portáteis</a>
               <ul>
                  <li><a href="#">Terceiro  nível</a></li>
                  <li><a href="#">Link 2</a></li>
                  <li><a href="#">Link 3</a></li>
               </ul>
             </li>
             <li><a  href="radios-moveis.php">Rádios  móveis</a></li>
             <li><a  href="repetidoras.php">Repetidoras</a></li>
             <li><a  href="sistemas-hf.php">Sistemas HF</a></li>
             <li><a  href="acessorios.php">Acessórios</a></li>
           </ul>
         </li>
         <li><a  href="revendas.php">Revendas</a></li>
         <li><a href="cotato.php">Solicite uma  cotação</a></li>
         <li><a  href="assistencia-tecnica.php">Assistência  técnica</a></li>
         <li><a  href="locacao.php">Locação</a></li>
         <li><a href="contato.php">Contate-nos  </a></li>
       </ul>
     </div>
    
    
    Código CSS

    Código:
    
     /* menu horizontal-vertical by micox */
     .menu-hv * { margin: 0; padding: 0;}
     .menu-hv a { display: block; }
     .menu-hv li { list-style: none; float: left; height: 1%; }
     .menu-hv li ul { position: absolute; visibility: hidden;}
     .menu-hv li ul li { float: none; white-space: nowrap; display: inline; /* o inline é pro IE */}
     .menu-hv li ul li ul { position: absolute; left: 100%; top: 0; }
     .menu-hv li:hover ul, .menu-hv li.over ul { visibility: visible;}
     .menu-hv li:hover ul ul, .menu-hv li.over ul ul { visibility: hidden;}
     .menu-hv ul ul li:hover ul, .menu-hv ul ul li.over ul { visibility: visible;}
     /* visual */
     .menu-hv {  background: #DF2800 url(img/bg-menu.jpg) repeat-x top;
                                        width: 757px;  margin: 0 0 0 12px; height: 31px;}
                 .menu-hv a { font-weight: bold;  text-decoration: none; color: #FFF;
                                            padding: 0 10px; line-height: 23px;}
                 .menu-hv a:hover { text-decoration:  underline; background-color: #000; color: #FFF;}
                 .menu-hv ul li ul {  background-color: #DF2800; border: 1px solid #000; }
    
    


    Relativamente aos direitos de autor: http://elmicox.blogspot.com
     
  6. trovial

    trovial Power Member

    nao sei se ja reparaste, mas esse kodigo so funciona em firefox, nao funciona no explorer.
    (pelo menos nao no 6.0 e anteriores.)
     
  7. khaluh

    khaluh Power Member

    Relativamente a nao funcionar em Explorer, apenas coloquei a parte do CSS pois referia-se a pergunta que eu tinha colocado.

    A parte do Explorer está com JavaScript
     
  8. majo-san

    majo-san Power Member

  9. Devil_Angel100

    Devil_Angel100 Power Member

    boas...

    Eu tentei fazer um menu e ate consegui o pior e o submenu quando carrego no menu não me aparece o submenu já fiz com hover mas não consegui apenas me aparece na horizontal sem texto, queria evitar usar as listas e muito menos o javascript alguém sabe outra maneira idêntica a do khaluh???
     
  10. Mike

    Mike [email protected] Member

Partilhar esta Página