Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Fábio BN

Menu Responsivo não Funciona na no IE 11

Por , em Desenvolvimento frontend

Recommended Posts

Fábio BN    17

Fábio BN
Postado

Oi Pessoal.

 

Tenho um Menu Responsivo, que funciona no FireFox, funciona no Chrome, porém quando abro ele no IE 11 ao espremer a tela na horizontal o MENU não fica responsivo, nada acontece.

Noto que o comando abaixo não funciona:
@media ( max-width: 650px ) {
.menu ul{display:none;
margin-left:0;
}

 

HTML

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Império das Mágicas</title>
<!-- Bootstrap -->
<link href="../css/fabio5.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../js/menu.js"></script>

</head>
<body style="background:#eee;">
<!-- Inicio Menu -->
<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></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> 
</body>
</html>

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');
		}
		
	  })
	})

Em cima do arquivo do JS antes eu abro o jquery-1.11.1.min.js

Sem alguém descobrir o motivo deste Menu não funcionar no eu agradeço.

Eu notei que o comando abaixo não está funcionando o IE 11, até tentei fazer direto sem usar o @media mas a UL não fica em modo Vertical, o MENU em linha não desaparece. Ou seja, quando espremo a tela na horizontal o menu continua em linha na vertical, que estranho!

Esse comando abaixo não faz nenhum efeito no IE 11:

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

 

Nem colocando direto, funciona:
.menu ul{display:none;
margin-left:0;
}


Muito Obrigado!

Fábio!

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fábio BN    17

Fábio BN
Postado

Oi Pessoal.

 

Fiz uns testes aqui, e o problema está aqui:

@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%;
}

Qualquer uma desses parâmetros acima, sendo os 3 juntos ou apenas um deles estão anulando a rotina abaixo:

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

Notei que só está funcionado 1 @media, caso eu usar mais de um na UL dá o problema!

Estranho que só acontece no IE, alguém tem alguma sugestão?

 

Abraços!

 

Fábio!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fábio BN    17

Fábio BN
Postado

Eu consegui resolver o problema adicionando uma ( } ) a mais em cada @media, mas estranho o fato de no último @media eu ter que deixar sem o ( } ) para funcionar.

 

@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:0px;}

 

Esse último @media acima, se eu colocar o ( } ) falha o menu, estranho, sendo que os demais acima, eu fechei e no último tenho que deixar uma ( } ) aberta.

 

Abraços!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito