0

Oi eu preciso que meu submenu scroll para aparecer as outras opções pq quando abre não cabe na página, e nem nos layouts de tablet e de celular. Ja tentei usar o css overflow-y e mais não está funcionando então estou procurando uma solução em jquery, mais não consegui nada ainda. Alguem poderia dar uma olhada e uma ajuda? Obrigado.

fiddle: https://jsfiddle.net/w4pnams9/2/

HTML

    <nav class="nav" id="nav">
    <span class="menuMobile" id="menuMobile">&#9776</span>
      <ul id="navulfirst">
        <li><a href="#"><img class="lupa" alt="Pesquisar" src="img/lupa.png" ></a>
            <div id="caixaPesquisa">
                <form id="formPesquisa" action="" method="post">
                    <input id="pesquisa" type="text" value="" maxlength="150" placeholder="Pesquisar...">
                  </form>
              </div>
          </li>
          <li><a href="#">Página Inicial</a></li>
          <li><a href="#">Produtos<img class="flechaVertical" alt="Flecha" src="img/flecha.png"></a>
            <ul>
                <li><a href="#">Aparadores de livros</a></li>
                  <li><a href="#">Caixinhas</a></li>
                  <li><a href="#">Chaveiros</a></li>
                  <li><a href="#">Decoração</a></li>
                  <li><a href="#">Pontos Turísticos</a></li>
                  <li><a href="#">Porta Celulares</a></li>
                  <li><a href="#">Porta Guardanapos</a></li>
                  <li><a href="#">Porta Retratos</a></li>
                  <li><a href="#">Relógios</a></li>
                  <li><a href="#">Topos de Bolos</a></li>
                  <li><a href="#">Veículos</a></li>
              </ul>
          </li>
          <li><a href="#"><img id="navLogo" class="navLogo" alt="Versatyll" src="img/logotipo.png"></a></li>
          <li><a href="#">Sobre</a></li>
          <li><a href="#">Contatos</a></li>
          <li><a href="#">Dúvidas</a></li>
      </ul>
  </nav>

CSS

        .lupa{
  width:30px;
  height:30px;
  padding-left:35px;    
}

.flechaVertical{
  width:8px;
  height:8px;
  padding-left:5px;
  padding-top:20px;
  position:absolute;
  transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
  -o-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg); 
}

.menuMobile{
  width:40px;
  height:40px;
  position:fixed;
  display:block;
  text-align:center;
  background-color:#FFFFFF;
  font-size:30px;
  cursor:pointer;
  z-index:100;
  left:0;
  -moz-transition:left 1s ease;
  -webkit-transition:left 1s ease;
  -o-transition:left 1s ease;
  -ms-transition:left 1s ease;
}

#menuMobile.visible{
  left:200px;   
}

.navLogo{
  width:160px;
  height:90px;
  display:block;    
}

.nav{
  width:200px;
  text-align:left;
  background-color:#FFFFFF;
  position:fixed;
  z-index:101;
  left:-200px;
  transition:left 1s ease;
  -moz-transition:left 1s ease;
  -webkit-transition:left 1s ease;
  -o-transition:left 1s ease;
  -ms-transition:left 1s ease;
}

#nav.visible{
  left:0;   
}

.nav ul{
  list-style:none;
  padding:0;
  margin:0;
  position:relative;    
}

#navulfirst li:nth-child(4){
  display:none; 
}

#navulfirst li ul li:nth-child(4){
  display:block;
  /* Para aparecer o li do segundo ul */
}

.nav ul li a,visited{
  color:#000000;
  display:block;
  padding:20px;
  padding-left:45px;
  text-decoration:none;
}

.nav ul li a:hover{
  color:#990000;
  text-decoration:none;
}
/*-------------------------------*/

/* Nav Submenu */

.nav ul li:hover ul{
  display:block;
}

.nav ul ul{
  display:none;
  position:absolute;
  background-color:#FFFFFF;
  margin-left:100%;
  margin-top:-30%;
  height:550px;
  width:180px;
  z-index:101;
}

.nav ul ul li{
  display:block;
  padding:10px; 
}

.nav ul ul li a,visited{
  color:#000000;
  padding:0;    
}

.nav ul ul li a:hover{
  color:#FFFFFF;
  background-color:#990000; 
}

JS

       ShowHide();
MenuMobile();

//Functions

function ShowHide(){
    $(".lupa").click(function(){
        $("#pesquisa").css("display", "inline-block");  
    });

    $("#pesquisa").blur(function(){
        $(this).css("display", "none"); 
    });
}

function MenuMobile(){
    $(".menuMobile").click(function(){
        $(".nav").toggleClass("visible");
        $(".menuMobile").toggleClass("visible");
    });
}

1 Resposta 1

1

O overflow-y: scroll só vai fazer algum efeito se tu especificar uma altura menor que a necessária para mostrar todos os itens do submenu (por exemplo, com height: 300px o scroll já começa a funcionar bem).

Porém, em termos de usabilidade, é horrível colocar um scroll em um submenu. Sugiro que tu ajuste o margin-top pra que o submenu apareça mais para cima.

Tudo isso que eu falei se refere ao .nav ul ul.

1
  • Obrigado ajudou bastante :) Commented 20/06/2016 às 3:29

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 .