CSS - Menu responsivo em slider lateral
Menu responsivo em slider lateral
Atualizações: 21/08/2016
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:
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.
<h3 class="link-titulo">Destaques</h3>
<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>
<h3 class="link-titulo">Fundamentos CSS</h3>
<li><a href="#">Introdução às CSS</a></li>
<li><a href="#">Sintaxe CSS</a></li>
<!-- mais links -->
<h3 class="link-titulo">CSS em ação</h3>
<li><a href="#">Font interativo</a></li>
<li><a href="#">Text interativo</a></li>
<h3 class="link-titulo">Efeitos CSS gerais</h3>
<li><a href="#">Sombras em textos 1 (desatualizado)</a></li>
<li><a href="#">Sombras em textos 2 (desatualizado)</a></li>
<!-- mais seções -->
</div id="link"> <!-- vazio --> <div>
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.
... /* mais regras CSS reset */
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
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));
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
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.
body {margin-left:0;background-size:100% 28em!important;}
#lateral:hover, #lateral:focus {
#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.