Menu responsivo em slider lateral

Introdução

No dia 06 de maio de 2014 lancei a nova versão do design deste site, sem alterar a estrutura HTML desenvolvida em 2003 quando o site foi criado.

Entre as melhorias feitas juntamente com o novo design, de autoria do [Sérgio Andrade], destaco a codificação de caracteres do site que passou de iso-8959-1 para utf-8, a marcação passou de XHTML Strict para HTML5, acrescentei várias funcionalidades CSS3 e transformei o layout de fixo para responsivo.

Não foi possível adotar todas as funcionalidades da HTML5, tal como os novos elementos semânticos, pois a estrutura original do site foi criada para a XHTM com uso de DIVs. Para o seu projeto faça as adaptações na marcação mostrada neste tutorial.

Uma das alterações que fiz foi optar por "esconder" o mecanismo de navegação do site na lateral esquerda da tela fazendo ele "aparecer" quando o usuário interagisse com um ícone consagrado como indicativo de menu fechado.

Adotando essa solução para o mecanismo de navegação do site, liberei toda a largura da viewport (exceto a largura de uma barra lateral esquerda de 50px) para apresentar conteúdos em telas desktop.

Recebi vários emails de meus leitores solicitando explicar como criar um menu semelhante àquele. Assim resolvi publicar este tutorial para atender o pedido dos amigos leitores e adianto que a técnica para obtenção do efeito é bem simples.

1^a. etapa — Marcação HTML

A marcação HTML do menu foi criada por ocasião do lançamento do site em outubro de 2003 e permaneceu intacta. A estrutura do menu é como descrita a seguir:

• um elemento container geral denominado div#lateral contém dois containers: um div#menu e um div#link. O primeiro contém o menu e o segundo, que não contém links , foi usado em designs anteriores e nessa versão do site está vazio,
• o mecanismo de navegação propriamente dito foi estruturado em seções e cada seção com seu título marcado com um elemento h3,
• ao título da seção segue-se um elemento ul container dos links para aquela seção.

A estrutura, resumida, do mecanismo de navegação (menu) é como mostrada a seguir.

<div id="lateral">
<div id="menu">
  			
<h3 class="link-titulo">Destaques</h3>
  <ul class="box">					
    <li><a href="#">FAQ - CSS</a></li>
    <li><a href="#">QUIZ - CSS</a></li>
    <li ><a href="#">Editor CSS do DWMX 2004</a></li>
    <li ><a href="#">Aprenda CSS desde o início</a></li>
  </ul>

<h3 class="link-titulo">Fundamentos CSS</h3>
  <ul class="box">
    <li><a href="#">Introdução às CSS</a></li>
    <li><a href="#">Sintaxe CSS</a></li>
      <!-- mais links -->
  </ul>

<h3 class="link-titulo">CSS em ação</h3>
  <ul class="box">					
    <li><a href="#">Font interativo</a></li> 			
    <li><a href="#">Text interativo</a></li> 			
    <!-- mais links -->
  </ul>

<h3 class="link-titulo">Efeitos CSS gerais</h3>
  <ul class="box">
    <li><a href="#">Sombras em textos 1 (desatualizado)</a></li>
    <li><a href="#">Sombras em textos 2 (desatualizado)</a></li>
    <!-- mais links -->
  </ul>
    
<!-- mais seções -->

</div> <!-- /#menu -->
</div id="link"> <!-- vazio --> <div>
</div> <!-- /#lateral -->

A renderização da marcação do menu a ser usada neste tutorial pode ser visualizada em 1^a. etapa — Estrutura do menu (link abre em nova janela).

2^a. etapa — Estilização geral

Nessa etapa mostraremos a estilização geral aplicada ao site e sua influência no menu.

@charset "UTF-8";
/* =CSS Reset */
/* https://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
*, html, body {
	margin:0;
	padding:0;
	}
... /* mais regras CSS reset */

/* regra para o box-sizing */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
/* regra para o clear float */
.cf:before,
.cf:after {content: " ";display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}
body {
	margin-left:55px; /* espaço à esquerda para a barra vertical vísivel do menu */
	font:  62.5%/1.2 Verdana, Helvetica, Arial, sans-serif;
	}

A renderização do menu com aplicação de mais estas regras CSS pode ser visualizada em 2^a. etapa — Estilização geral (link abre em nova janela).

3^a. etapa — Esconde o menu

Nessa etapa veremos as regras CSS para aplicar o efeito slider lateral no menu

#lateral {
	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.2em;
	background:rgb(44,62,80);
	background-image: -moz-linear-gradient(135deg, rgb(3,8,12), rgb(16,57,79));
     background-image: -webkit-linear-gradient(135deg, rgb(3,8,12), rgb(16,57,79));
      background-image: -o-linear-gradient(135deg, rgb(3,8,12), rgb(16,57,79) );
       background-image: -ms-linear-gradient(135deg, rgb(3,8,12), rgb(16,57,79));
        background-image: linear-gradient(135deg, rgb(3,8,12), rgb(16,57,79));
	height:100%;
	overflow:hidden;
	width:370px; 
	position:fixed;
	top:0;
	left:-320px;
	}
#lateral:before {
	z-index:1000;
	content: url(icone-menu.png);
	font-size:4em;
	color:white;
	position:fixed;
	left:4px;
	top:45px;
	}
#lateral:hover:before, #lateral:focus:before {
left:-500px
	}
#lateral:hover, #lateral:focus,  #lateral:active  {
	overflow-y:scroll;
	-moz-transform: translate(320px, 0);
		-webkit-transform: translate(320px, 0);
			-o-transform: translate(320px, 0);
				transform: translate(320px, 0);
	padding-right:0;
	}	

A renderização do menu com aplicação de mais estas regras CSS pode ser visualizada em 3^a. etapa — Esconde o menu (link abre em nova janela).

4^a. etapa — Estilização das seções do menu

Nessa etapa veremos as regras CSS para estilizar os conteúdos da seções do menu

#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 {padding:0; margin: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;
	}

A renderização do menu com aplicação de mais estas regras CSS pode ser visualizada em 4^a. etapa — Estilização das seções do menu (link abre em nova janela).

5^a. etapa — Responsivo

Nessa etapa veremos as regras CSS para estilizar o menu para dispositivos móveis. Para fins de demonstração adotamos um breakpoint igual a 500px, mas convém ressaltar com forte ênfase que quem determina os breakpoints de um projeto responsivo é o conteúdo.

@media (max-width: 500px) {
body {margin-left:0;background-size:100% 28em!important;}
#lateral {
	padding: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.2em;
	height:100%;
	overflow:auto;
	width:100%; 
	position:static;
	top:0;
	left:0;
	}
#lateral:before {
	z-index:1000;
	width:0;
	text-align:center;
	content: "";
	font-size:0;
	color:white;
	position:static;
	top:0;
	left:0;
	display:inline-block; 
	}
#lateral:hover, #lateral:focus {
	overflow:scroll;
	-moz-transform: none;
		-webkit-transform: none;
			-o-transform:none;
				transform:none;
	}
#menu li a {border-bottom:1px solid #ccc;}
#menu li:first-child a {border-top:1px solid #ccc;}	
}

A renderização final do menu com aplicação de mais estas regras CSS para o breakpoint de 500px pode ser visualizada em 5^a. etapa — Responsivo (link abre em nova janela). Ao visitar a página redimensione a janela do navegador para viewport menor do que 500px.

Nota: Nas CSS usamos prefixos proprietários para algumas propriedades. Analise a necessidade do uso daqueles prefixos para o seu projeto.

Compartilhe essa matéria com seus amigos