7

Estou dando manutenção em um site que foi feito com o Foundation, e realmente não tenho conhecimento nenhum nesse framework, pelo fato de só trabalhar com o Bootsrap.

Já procurei na documentação do Foundation mas não achei nada que resolvesse o meu problema.

Problema

No site tem uma <ul class="nav-bar"> e dentro dela suas respectivas li.
No navegador fica legal, mas quando vou para uma tela de celular ou tablet ou qualquer outro dispositivo móvel, esse menu fica para a direita.

Nota:
Alterar o tamanho da janela do navegador num computador desktop para um tamanho bem pequeno também permite replicar o problema.

Código:

<ul class="nav-bar">
  <li><a href="index.php">Home</a></li>
  <li><a href="clinica.php">Clínica</a></li>
  <li><a href="hospitais.php">Hospitais</a></li>
  <li><a href="equipe.php">Equipe</a></li>
  <li><a href="dicas_links.php"> Links</a></li>
  <li><a href="localizacao.php">Localização</a></li>
  <li><a href="contato.php">Contato</a></li>
</ul>
<ul class="nav-bar pink_menu">
  <li class="has-flyout"><a href="home.php">Cirurgia Plástica</a>
    <ul class="flyout">
      <li><a href="ce_mamas.php">Mamas</a></li>
      <li><a href="ce_ccc.php">Cirurgias do Contorno Corporal</a></li>
      <li><a href="ce_rf.php">Cirurgias do Rejuvenescimento Facial</a></li>
      <li><a href="ce_outras.php">Cirurgia de outras partes da face</a></li>
      <li><a href="ce_lc.php">Cirurgias de Lifting Corporal (Cirurgias plásticas do corpo)</a></li>
      <li><a href="ce_cc.php">Cirurgias do contorno corporal após grandes perdas de peso</a></li>
      <li><a href="ce_homem.php">Cirurgias masculinas</a></li>
      <li><a href="ce_reparadoras.php">Cirurgias Reparadoras</a></li>
      <li><a href="gestante.php">Gestantes</a></li>
      <li><a href="hidrolipoaspiracao.php"> Hidrolipoaspiração</a></li>
    </ul>
  </li>
  <li class="has-flyout"><a href="home.php">Medicina estética </a>
    <ul class="flyout">
      <li><a href="proc_botox.php">Toxina Botulínica</a></li>
      <li><a href="proc_estetico.php">Preenchimento Facial</a></li>
      <li><a href="proc_peeling.php">Peelings Químicos</a></li>
      <li><a href="proc_dermo.php">Dermoabrasão</a></li>
      <li><a href="laser.php">Laser C02</a></li>
      <li><a href="skin.php">Skin Booster</a></li>
    </ul>
  </li>
  <li class="has-flyout"><a href="home.php">Procedimentos estéticos</a>
    <ul class="flyout">
      <li><a href="peel_dmt.php">Peeling de Diamante</a></li>
      <li><a href="peel_cri.php">Peeling de Cristal</a></li>
      <li><a href="limp_pele.php">Limpeza de Pele</a></li>
      <li><a href="depi_laser.php">Depilação à  laser </a></li>
      <li><a href="dren_linf.php">Drenagem Linfática Manual</a></li>
      <li><a href="estrias.php">Tratamento de Estrias</a></li>
      <li><a href="vasos.php">Escleroterapia de vasos</a></li>
      <li><a href="colageno.php">Máscara de Colágeno</a></li>
    </ul>
  </li>     
</ul>

Pergunta

O que está a causar este comportamento do menu e qual a solução para manter o mesmo no local visto nos navegadores de desktop?

0

1 Resposta 1

4

O seu problema é que no CSS do Foundation existem instruções específicas para lidar com telas de largura pequena (nota: layout do código aprimorado para legibilidade):

/* Mobile Styles */
@media only screen and (max-device-width: 1280px) { 
    .touch .nav-bar li.has-flyout > a { padding-right: 36px !important; } 
}
@media only screen and (max-width: 1279px) and (min-width: 768px) {
    .touch .nav-bar li a { font-size: 13px; font-size: 1.3rem; }
    .touch .nav-bar li.has-flyout > a.flyout-toggle { padding: 20px !important; }
    .touch .nav-bar li.has-flyout > a { padding-right: 36px !important; } 
}
@media only screen and (max-width: 767px) {
    .nav-bar { height: auto;margin-top: 20px; margin-bottom: 20px; float:none;  }
    .nav-bar > li { height:auto; padding:0px; text-align: center;float: none; display: block; border: none; border-bottom: solid 1px gray; line-height: 33px; border-radius: none;}
    .nav-bar > li:first-child{border-bottom-left-radius:0px;-moz-border-bottom-left-radius:0px;-webkit-border-bottom-left-radius:0px; }
    .nav-bar > li:last-child{border-bottom-right-radius:0px;-moz-border-bottom-right-radius:0px;-webkit-border-bottom-right-radius:0px; }
    .nav-bar > li > a:first-child {position: relative; padding: 0px; display: block; text-decoration: none; font-size: 14px; }
    .nav-bar > li > a { height: auto; color: #ffac4b;  transition: all 0.25s ease-in-out;  -webkit-transition: all 0.25s ease-in-out;  -moz-transition: all 0.25s ease-in-out; padding:0px;}
    .nav-bar > li:last-child{border: none;}
    .nav-bar > li > a.main { text-align: left; border-top: 1px solid #ddd; border-right: none; }
    .nav-bar > li:first-child > a.main { border-top: none; }
    .nav-bar > li.has-flyout > a.flyout-toggle { position: absolute; right: 0; top: 0; padding: 22px; z-index: 2; display: block; }
    .nav-bar > li.has-flyout.is-touch > a.flyout-toggle span { content: ""; width: 0; height: 0; display: block; }
    .nav-bar > li.has-flyout > a.flyout-toggle:hover span { border-top-color: #141414; }
    .nav-bar.vertical > li.has-flyout > .flyout { left: 0; }
    .flyout { position: relative; width: 100% !important; top: auto; margin-right: -2px; border-width: 1px 1px 0 1px; }
    .flyout.right { float: none; right: auto; left: -1px; }
    .flyout.small, .flyout.large { width: 100% !important; }
    .flyout p:last-child { margin-bottom: 18px; } 
}

Por alguma razão, a framework achou que o menu horizontal ficaria ruim/ilegível/feio nesse tipo de tela, e optou por mudar a formatação nesse caso (não fica como você quer, mas todos os itens do menu ficam acessíveis e legíveis, pelo menos).

Se você por qualquer razão ainda quiser mudar o menu nesse caso, sugiro mexer no CSS, seja removendo/modificando essas instruções específicas, seja inserindo suas próprias instruções que sobrecarregem as da framework. Alternativamente, você pode atribuir estilos diretamente aos elementos desejados, via markup (atributo style) ou via JavaScript/jQuery (ex.: .css()).

Atualização: Para que o menu fique centralizado, remova a margem do seu nav-bar (que no momento inclui 200px à esquerda - forçando o conteúdo para a direita - e coloque-a como auto. Dessa forma ficará centralizado, mas sem um width fixo ocupará a largura inteira. Um width fixo resolve o problema:

@media only screen and (max-width: 767px) {
    .nav-bar {
        width: 300px;
        margin:0px auto;
    }
}

Exemplo no jsFiddle. Experimente aumentar e diminuir o tamanho do frame Result para ver o comportamento.

2
  • Então, acho que não me expressei bem Eu não preciso que o menu fique na horizontal, eu preciso sim que ele fique na vertical, mas não que fique para a direita, eu preciso que ele fique centralizado Commented 10/01/2014 às 22:06
  • @DanielSwater Atualizei a resposta. Funcionou no exemplo que montei, mas é difícil ter certeza se ficará igualmente bom na página real. Experimente e, se ainda tiver problemas, atualize sua pergunta com os detalhes adicionais.
    – mgibsonbr
    Commented 13/01/2014 às 10:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .