PseudoClasse :focus não está funcionando em nenhum navegador exceto IE

[matheushirota 0]

Olá pessoal, tudo bem?

 

Estou criando um menu que só aparece quando a tela tiver 568px ou menos de largura, porém ele só esta funcionando no IE, nos outros navegadores não está funcionando, estou utilizando o :focus porque eu quero que ele só ative quando a pessoa clicar e não quando passar o mouse

 

HTML:

Menu

• Início

• Sobre

Serviços

Portfólio

Contato

 

CSS:

@media screen and (max-width:568px)

{

.menu

{

display:none;

}

#lateral

{

display:inherit;

padding:0 50px 0 0;

-moz-transition: all 0.5s ease;

-webkit-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

transition: all 0.5s ease;

font-size:1.0em;

background-color:#000;

height:10%;

overflow:hidden;

width:200px;

position:fixed;

top:0px;

left:-320px;

}

#lateral:before

{

z-index:1000;

content: url(../img/MENU.png);

font-size:4em;

color:white;

position:fixed;

left:4px;

height:100%;

}

#lateral:focus

{

-webkit-transform: translate(320px, 0);

-moz-transform: translate(320px, 0);

-o-transform: translate(320px, 0);

-ms-transform: translate(320px, 0);

padding-right:0;

height:100%;

}

#lateral .box

{

list-style-type:none;

margin-bottom:1em;

padding-bottom:1em;

}

#lateral h3

{

display:inline-block;

font-weight:bold;

font-size:1.6em;

font-style:normal;

padding-bottom:0.2em;

margin: 2em 0 2em 0.81em;

color:rgb(255,255,255);

border-bottom: 4px solid rgb(155,155,155);

}

#menu

{

font-style:italic;

position:relative;

font-size:1.0em;

margin:1em 0 1em -1em;

padding:0;

}

#menu li a, #menu li a:link

{

font-size:1.2em;

color:rgb(255,255,255);

text-decoration: none;

padding: 0.8em 0 0.8em 1em;

display: block;

-moz-transition: all 1.2s ease;

-webkit-transition: all 1.2s ease;

-o-transition: all 1.2s ease;

transition: all 1.2s ease;

}

#menu li a:hover

{

color:rgb(255,255,255);

background-color:rgba(255,255,255,0.2);

-moz-transition: all 0.5s ease;

-webkit-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

transition: all 0.5s ease;

}

}

[reebr 94]

Tenta indentar esse código ai, fica complicado ler.

 

"#lateral" é o que? O "focus" é permitido em elementos que aceitam eventos do teclado ou outros tipos de entrada. "#lateral" é um input?

[matheushirota 0]

Perdão amigo, eu estava postando pelo IE e no IE não aparece o botão para postar código, agora vou postar corretamente!

 

HTML:

<div id="lateral">
   <div id="menu">
	<h3 class="link-titulo">Menu</h3>  			
	    <ul class="box">					
		<li><a href="index.html">Início</a></li>
		<li><a href="#">Sobre</a></li>
		<li><a href="#">Serviços</a></li>
		<li><a href="#">Portfólio</a></li>				
		<li><a href="#">Contato</a></li>
	    </ul>
   </div>
</div>

CSS:

@media screen and (max-width:568px)
{
	.menu
	{
		display:none;
	}
	#lateral 
	{
		display:inherit;
		padding:0 50px 0 0;
		-moz-transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
		font-size:1.0em;
		background-color:#000;
		height:10%;
		overflow:hidden;
		width:200px; 
		position:fixed;
		top:0px;
		left:-320px;
	}
	#lateral:before 
	{
		z-index:1000;
		content: url(../img/MENU.png);
		font-size:4em;
		color:white;
		position:fixed;
		left:4px;
		height:100%;
	}
	#lateral:focus
	{
		-webkit-transform: translate(320px, 0);
		-moz-transform: translate(320px, 0);
		-o-transform: translate(320px, 0);
		-ms-transform: translate(320px, 0);
		padding-right:0;
		height:100%;
	}	
	#lateral .box 
	{
		list-style-type:none;
		margin-bottom:1em;
		padding-bottom:1em;
	}
	#lateral h3 
	{
		display:inline-block;
		font-weight:bold;
		font-size:1.6em;
		font-style:normal;
		padding-bottom:0.2em;
		margin: 2em 0 2em 0.81em;
		color:rgb(255,255,255);
		border-bottom: 4px solid rgb(155,155,155);
	}
	#menu 
	{
		font-style:italic;
		position:relative;
		font-size:1.0em;
		margin:1em 0 1em -1em;
		padding:0;
	}
	#menu li a,  #menu li a:link 
	{
		font-size:1.2em;
		color:rgb(255,255,255);
		text-decoration: none;
		padding: 0.8em 0 0.8em 1em;
		display: block;
		-moz-transition: all 1.2s ease;
		-webkit-transition: all 1.2s ease;
		-o-transition: all 1.2s ease;
		transition: all 1.2s ease;
	}
	#menu li a:hover 
	{
		color:rgb(255,255,255);
		background-color:rgba(255,255,255,0.2);
		-moz-transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
}

[matheushirota 0]

Não, não é um input, é um menu responsivo que eu montei a partir do tutorial do Maujor

 

http://www.maujor.com/tutorial/menu-responsivo-em-slider-lateral.php

 

No meu, esse menu só aparece em telas menores que 568px

 

O que acontece é que se eu colocar hover ou active quando a pessoa acessa pelo celular, ela não consegue abrir o menu a não ser que ela fique segurando o dedo em cima do menu! Queria que ela simplismente tocasse e abrisse o menu, igual como acontece no Internet Explorer