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.

NOTA: Em 05 de maio de 2016 alterei novamente o mecanismo de navegação e possivelmente hoje a navegação do site não seja mais "escondida" na lateral da tela. De toda forma o mecanismo de navegação mostrado neste tutorial pode ser visualizado nesta página (link abre em nova janela). Redimensione a página para viewport menor do que 500px e observe a responsividade do menu.

1a. 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:

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

HTML
<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 -->
Altere a marcação mostrada usando os elementos semânticos da HTML5. Por exemplo: use <nav class="nav"> em lugar de <div id="menu">

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

2a. etapa — Estilização geral

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

CSS
CSS
@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 2a. etapa — Estilização geral (link abre em nova janela).

3a. etapa — Esconde o menu

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

CSS
CSS
#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 3a. etapa — Esconde o menu (link abre em nova janela).

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

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

CSS
#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 4a. etapa — Estilização das seções do menu (link abre em nova janela).

5a. 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.

CSS
@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 5a. 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.

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.