Menu SubMenu Responsivo

[Fábio BN 17]

Oi Pessoal.

Eu tenho um Menu para Mobile que funciona perfeitamente, porém estou tentando fazer Alguns SubMenus dentro dele, ai começaram os problemas!

 

HTML:

HTML:<nav class="menu" > 
<ul>
<li class="menu_ativo"><a href="#" title="">Home</a></li>
<li><a href="#" title="">Cadastra-se</a></li>
<li><a href="#" title="">Tira Dúvidas</a></li>
<li><a href="#" title="">Loja Virtual</a></li>
<li><a href="#" title="">Atacado</a></li>
<li><a href="#" title="">Empresa</a>
<ul>
                <li><a href="#">sub - 1</a></li>
                <li><a href="#">sub - 2</a></li>
                <li><a href="#">sub - 3</a></li>
            </ul>

</li>
<li><a href="#" title="">Fale Conosco</a></li>
</ul>

<a href="#" class="menu-mobile"><img src="../imagens/icon-menu.png" width="33" border="0" align="middle" class="icone"></a> 
</nav> 

CSS:

/* CSS Document */

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
 }
 
body {
    font: 14px sans-serif;
     }
    
   .menu_ativo {
    background: #86aed7;
    }

/* Para inverter opacidade, colocar 1 no hover, e .4 em todas opções de cima */
             
.icone {
    opacity: 1;
    transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -webkit-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
}


.icone:hover{
    opacity: .4;
}
        



    
.menu {
  width: 100%;
  max-width: 1024px;
  margin: auto;
  background: #6394CE;
  display: table;

}

.menu ul { text-align: center;
margin-left: 20%;

}

.menu li {
    float:left;
    border-right: 1px solid #ffffff;

}
.menu li:hover{
background:#86aed7;

}

.menu a{
    display: block;
    padding: 10px;
    color: #fff;
    
}

.menu .menu-mobile {
display: none;
}


      /* Tira última dorda do Menu */
        .menu ul li:last-child {
        border-right: 0;
         /* Tira última dorda do Menu */
}


@media ( max-width: 900px ) {
.menu ul {
margin-left: 15%;
}

    @media ( max-width: 800px ) {
.menu ul {
margin-left: 10%;
}

            @media ( max-width: 750px ) {
.menu ul {
margin-left: 5%;
}




@media ( max-width: 650px ) {
.menu ul{display:none;
margin-left:0;
}

.menu .menu-mobile {
background: #86aed7;
display: block;
padding-top: 3px;
padding-bottom: 3px;
text-align: right;
}



 .menu li{
     float:none;
    border-right: 0;
    border-bottom: 1px solid #ffffff;

}

JS:

// JavaScript Document


    $(document).ready(function(){
    
     $('.menu-mobile').click(function(){
    
        $('.menu ul').slideToggle();
    
         })    
        
        $(window).resize(function(){
        
        if($(window).width() >480 ) {
        $('.menu ul').removeAttr('style');
        }
        
      })
    }) 

Os problemas começam quando eu insiro os SubMenus conforme linhas abaixo:

<li><a href="#" title="">Empresa</a>
<ul>
                <li><a href="#">sub - 1</a></li>
                <li><a href="#">sub - 2</a></li>
                <li><a href="#">sub - 3</a></li>
            </ul>

</li>

Fica tudo desconfigurado o SubMenu.

Eu queria fazer de uma forma que ao clicar no SubMenu ele abrisse, tanto em modo Horizontal para PC e em modo Vertical para Mobile.

Lembrando que depois eu irei inserir uma imagem de uma setinha para baixo para as pessoas verem que é um SubMenu.

 

Se alguém puder me ajudar.

 

Obrigado

 

Fábio!

[Fábio BN 17]

Eu tenho um Menu Responsivo com SubMenu em BootStrap e estou tentando modificar as cores do mesmo usando uma técnica do Inspetor de Elementos observando e alterando as cores nas (Regras) do Firefox, até agora está tudo bem, e já consegui alterar quase todas as cores, só falta mudar a cor de fundo do MENU e do LINK ACTIVE, provavelmente eu estarei usando este Menu do BootSStrap, assim não preciso modificar os meus antigos!

 

Abraços!

Fábio!

[leonardo de andrade baessa 16]

Acredito que seu conflito esteja no css.

.menu {
  width: 100%;
  max-width: 1024px;
  margin: auto;
  background: #6394CE;
  display: table;

}

.menu ul { text-align: center;
margin-left: 20%;

}

.menu li {
    float:left;
    border-right: 1px solid #ffffff;

}
.menu li:hover{
background:#86aed7;

}

.menu a{
    display: block;
    padding: 10px;
    color: #fff;
    
}

esse é seu código mas para encrementar outro sub menu dentro, é preciso chamar tbm ele no css.

.menu ul li, ul {


}

.menu ul li, ul li {


}

.menu ul li, ul li a {


}
.menu ul li, ul li a:hover {


}

[Fábio BN 17]

Vou tentar.

Agora estou com um problema no IE, por que será que esse menu no IE não está ficando em Modo Responsivo? Quando espreme a tela o menu se remonta todo e não entra em modo horizontal, será que em algum problema no código?

 

Parece que o comando abaixo não está funcionando no IE:

@media ( max-width: 702px ) {
.menu ul{display:none;
margin-left:0;
}

Engraçado é que eu tenho outro menu semelhante com o mesmo comando e funciona no IE.

 

No Chrome e Fire Fox funciona normal.

 

Abraços!

[leonardo de andrade baessa 16]

Geralmente Funciona,

mas quando Eu quero fazer ele responsivo eu prefiro fazer uma css para cada modelo específico

no caso.

Celulares.css

Tablets.css

Desktop.css

 

ja pra não correr muito risco.

[Fábio BN 17]

Eu resolvi fechando algumas chaves que irei destacar em vermelho:

@media ( max-width: 900px ) {
.menu ul {
margin-left: 15%;
}
}

@media ( max-width: 800px ) {
.menu ul {
margin-left: 10%;
}
}

@media ( max-width: 750px ) {
.menu ul {
margin-left: 5%;
}
}



@media ( max-width: 650px ) {
.menu ul{display:none;
margin-left:0;
}

Já essa última acima eu tive que deixar a chave aberta e funcionou, estranho mas deu certo no IE.

 

Abraços!