HTML Menu Retrátil em Html e Css não abre

navegador2 · 3 de outubro de 2017

Estou precisando criar um menu para um site que será retrátil, queria usar só html5 e css. Então vi algumas videos aulas e em 2 o processo é quase o mesmo. Fiz o código, mas ele não está abrindo. O que será?

Posto o código das partes relevantes ao assunto:

header {
	width: 100%;
	margin: auto;
	
}

#check {
	display: none;
}

#check:checked ~ .barra {
	-webkit-transform: translate(300px);
	   -moz-transform: translate(300px);
	    -ms-transform: translate(300px);
	     -o-transform: translate(300px);
	        transform: translate(300px);
}

.icone {
	font-size: 30px;
	position: fixed;
	z-index: 2;
	cursor: pointer;
}

.barra {
	width: 300px;
	height: 100%;
	position: fixed;
	background-color: #ccc;
	padding-top: 50px;
	left: -300px;
		-webkit-transition: all .25s linear;
	   -moz-transition: all .25s linear;
	    -ms-transition: all .25s linear;
	     -o-transition: all .25s linear;
	        transition: all .25s linear;
	
}

nav {
	
	
}

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

nav ul li {

	padding:10px;
	margin:0px;
	position:relative;

}


nav ul li a {
	width: 25%;
	background-image: url(../imagens/fundograd2.jpg);
	border: 1 px solid black;
	color:#000000;
	display: block;
	font-size: 18px;
	height: 25px;
	line-height: 25px;
	
	margin: 1px;
	padding:8px;
	text-decoration:underline;
}

nav ul li a:hover {
	
	color:#FFFFFF;
	background-color:#97CEFB;
	text-decoration: none;
}

<body>
<!-- Menu Retrátil-->
<input type="checkbox" id="check">
<label class="icone" for="check"><i class="fa fa-bars" aria-hidden="true"></i></label>

<header> <!-- Topo do Site-->
<div class="barra">
<nav>
	<ul>
		<li> <a href="#">Início</a></li>
		<li> <a href="#">A Empresa</a></li>
		<li> <a href="#">Serviços</a></li>
		<li> <a href="#">Avaliações</a></li>
		<li> <a href="#">Contato</a></li>
	</ul>	
</nav>

</div> <!--Fim Div Barra-->

	
</header>

A diferença entre as explicações numa o cara usou webkits, segundo ele era para funcionar em todos os navegadores, na outra não.

Adriano_web · 7 de outubro de 2017

Na minha observação você tem que ter um modo de programar ai para fazer a propriedade left: do seletor .barra ter o valor de 0 quando o botão <label> for clicado. Um pequeno evento de script não iria interferir em desempenho ou compatibilidade.

navegador2 · 10 de outubro de 2017

Resolvido!

Depois de pesquisar um pouco consegui. Agora o menu abre no meu aqui esta ok. Segue o html modificado e css,das partes importantes:

<header> <!-- Topo do Site-->

<input type="checkbox" id="check">
<label id="icone" for="check"><img src="imagens/icone.png"/>Menu</label>

<div class="barra">
<nav>
	
<a href=""><div class="link">Home</div></a>
<a href=""><div class="link">Quem Somos</div></a>
<a href=""><div class="link">Serviços</div></a>
<a href=""><div class="link">Contato</div></a>

</nav>

</header>

@charset "utf-8";
/* CSS Document */

* {
	margin:0;
	padding:0;
}

body {
	background:#f9f9f9;
}

#check {
	display:none;
}

#icone {
	cursor:pointer;
	padding:15px;
	position: absolute;
	z-index:1;
	font-size: 35px;
	color: #0729F4;
}

.barra {
	background:#333;
	height:300px;
	width:300px;
	position:Absolute;
	transition: all .2s linear;
	left: -300px;
	
}

nav {
	width:100%;
	position: absolute;
	top: 60px;
}

nav a {
	text-decoration:none;
}

.link {
	background-color:#494950;
	padding:20px;
	font-family:'Arial';
	font-size:12pt;
	transition: all .2s linear;
	color: #f4f4f9;
	border-bottom: 2px solid #222;
	opacity:0;
	margin-top:200px;

}

.link:hover {
	background-color: #050542;
}

#check:checked ~ .barra {
	
	transform: translatex(300px);
}

#check:checked ~ .barra nav a .link {
	
	opacity: 1;
	margin-top:0;
	transition-delay: .2s;
}

Maiores detalhes eu pesquisei: Css Menu Retratil

navegador2 · 26 de novembro de 2017

Caros colegas eu postei o código deste menu na pagina index.html esta ok, como citei acima. Só que quan coloquei mais páginas ele nas outras páginas que não seja o index esta perfeito em resoluções maiores, mas em resoluções menores ele não abre nas outras páginas exceto no index.

Quando eu faço páginas apesar de não saber quase nada de php, eu faço as páginas usando o seguinte critério:

Crio a página usando o require, nele eu chamo as 4 partes do site: header, conteudo, foooter e webdesing.... Faço por questão de praticidade porque caso precise alterar o rodapé, basta mudar o footer e ele mudará em todas as páginas. Então eu gostaria de saber se como no exemplo acima funcionou ok. Quando eu fiz fatiando usando o php começou este erro queria ver se tem algo que interfira. Então resumindo em resolução grande como maximizando a janela fica ok, mas quando reduz a resolução parece que algo está sobrepondo o menu, então envio o código do fatiamento para ficar mais claro. E o link do teste da pagina para vocês verem, cliquem por exemplo em A Empresa no menu e verão que a página abre, mas em resoluções pequenas eu não consigo mais clicar no menu dentro desta pagína (A empresa) já com a janela maximizada está ok.

index.php

<?php require 'header.php';?>
<?php require 'conteudoinicio.php';?>
<?php require 'footer.php';?>
<?php require 'webdesigner.php';?>

aempresa.php

<?php require 'header.php';?>
<?php require 'conteudoaempresa.php';?>
<?php require 'footer.php';?>
<?php require 'webdesigner.php';?>

Menu (Está no header.php)- O Css dele é o mesmo acima apenas chamo ele aqui num arquivo externo.

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Bac Móveis Planejados em Contagem</title>
<meta name="description" content="Site da Empresa Bac Móveis Planejados, situada em Contagem Minas Gerais. O site contém paginas com fotos dos móveis, página para fazer orçamentos e contato online">
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>

<link href="css/estilo.css" rel="stylesheet" type="text/css">
<link href="css/menuretratil.css" rel="stylesheet" type="text/css"
</head>

<body>
<header> <!--Topo do Site-->
<img src="imagens/logo.jpg" alt="logotipo Bac"/>
</header>

<input type="checkbox" id="check"> <!--Fim Div Barra-->
<label id="icone" for="check"><img src="imagens/icone.png"/>Menu</label>

<div class="barra">
<nav>
	
<a href="index.php"><div class="link">Início</div></a>
<a href="aempresa.php"><div class="link">A Empresa</div></a>
<a href="http://bacmoveisplanejados.com.br/wordpress/"><div class="link">Ambientes</div></a>
<a href="contato.php"><div class="link">Orçamento</div></a>
<a href="avaliacoes.php"><div class="link">Avaliações</div></a>

</nav>

</div> <!-- Fim Div Barra-->