Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Responsive Web Design

Como Criar um Layout Com Navegação Off-Canvas Usando Bootstrap

by
Difficulty:IntermediateLength:MediumLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

O Bootstrap é projetado para servir a vários cenários, provendo diversos componentes web úteis. Há botões, barra de navegação responsiva, carrosséis e muitos outros. Ainda assim, mesmo com tudo isso que o Bootstrap nos fornece, ainda falta fornecer um padrão de navegação muito popular: a navegação off-canvas.

Essa abordagem para navegação coloca o menu para fora da área visível (a tela - do inglês canvas), focando e dando mais espaço para o conteúdo principal. Navegação off-canvas tornou-se popular, primeiramente, em aplicativos para dispositivos móveis e, só então, tornou-se um padrão usado na web responsiva (graças em parte ao artigo de Luke Wroblewski). Geralmente, lança mão do jQuery para ativar ou desativar a navegação.

Falando nisso, o Bootstrap sendo tão popular e com o ótimo suporte da comunidade, os desenvolvedores criaram plugins e extensões para incluir componentes que não estão disponíveis no Bootstrap oficial. Entre eles, temos uma implementação para a navegação off-canvas.

Nesse tutorial, mostrarei como adicionar uma navegação off-canvas usando uma extensão chamada Jasny Bootstrap, criada por Arnold Daniels. Os dois motivos para essa escolha são:

  • Como o nome implica, é específica para o Bootstrap. Assim, o código condiz com o código encontrado no Bootstrap. Ele segue as mesmas convenções de nomeação e de implementação dos componentes.
  • Jasny Bootstrap vem com o plugin de navegação Off-canvas bastante flexível e configurável através de uma série de classes, atributos HTML5 ou através do JavaScript.

Um Pouco Sobre o Bower

Por esse tutorial, apresentarei um fluxo de trabalho que auxilia na manutenção de um website, usando o Bower. Então, tenha certeza de tê-lo instalado no seu sistema. Se não quiser usá-lo, tudo bem. Contudo, para iniciá-lo a essa ferramenta, já publicamos alguns tutoriais para iniciantes.

Pois bem, vamos lá.

1. Começando

Comecemos o projeto criando o diretório que usaremos para guardar os arquivos necessários.

Nós usaremos o diretório assets para guardar os arquivos de imagens, folhas de estilo, JavaScript e coisas do tipo. O diretório sources será o local onde colocaremos os arquivos LESS e JavaScript não compilados. Além disso, definiremos as especificações do projeto — nome, versão, dependências e outras coisas — com Bower.

Execute o comando bower init dentro do diretório e preencha todas as requisições que aparecerem.

Um exemplo de entradas para o comando "bower init"

Você não precisa seguir à risca as entradas mostradas acima. Ajuste-as de acordo com seus requisitos. Uma vez finalizado, um novo arquivo, bower.json, deve aparecer no diretório, contendo as especificações do projeto que acabamos de preencher.

2. Instalando as Dependências do Projeto

Esse projeto requer duas frameworks: Bootstrap e Jasny Bootstrap. Antes de instalá-las, especifiquemos onde o Bower deve instalar os pacotes. Para tanto, crie um novo, .bowerrc, na pasta raiz do diretório e coloque o trecho a seguir dentro dele, para indicar o diretório.

Agora, inclua as linhas abaixo, dentro do arquivo bower.json. Elas indicam ao Bower que o projeto tem como dependências o Bootstrap e a Jasny Bootstrap versão 3.1.1 ou mais novos.

Na Linha de Comando, execute o comando bower install para obter todas as dependências especificadas.

Como indicado no arquivo .bowerrc, as dependências do projeto devem estar, agora, no novo diretório chamado components.

3. Organizando as Folhas de Estilo

Com todas as dependências prontas, podemos trabalhar no nosso projeto! Começaremos organizando as folhas de estilo. Teremos de criar quatro folhas de estilo com LESS, que são:

  • variables.less — como o nome indica, essa folha de estilo contem as variáveis usadas pelo Bootstrap. Criaremos essa cópia caso queiramos customizar o Bootstrap sem afetar os arquivos originais (copie as variáveis do Bootstrap desse Gist).
  • variables-jasny.less — de forma similar, essa folha de estilo contem as variáveis usadas na extensão Jasny Bootstrap (copie as variáveis daqui).
  • app.less — essa folha de estilo contém referências às folhas de estilo do Bootstrap e da Jasny Bootstrap que precisamos para construir o site (você pode copiar o conteúdo aqui).
  • style.less — escreveremos nossos estilos nessa folha de estilo.

Crie e coloque-os juntos, dessa forma:

O próximo passo é compilar essas folhas de estilo. Para isso, usaremos o aplicativo Koala, com as seguintes configurações:

  • Tenha certeza que a opção Auto Compilar está marcada. Dessa forma, o Koala compilará, imediatamente, os arquivos LESS em CSS, sempre que houver alguma mudança.
  • Configure o destino do retorno de app.less, bem como de style.less, para o diretório assets/css/.
  • Selecione a opção de Source Map para gerar os arquivos .map para facilitar a depuração das folhas de estilo. Se essa é a primeira vez em que ouve falar de Source Map, veja nosso tutorial no Tuts+ Code, o Source Map 101.

Uma vez que a configuração esteja pronta, compile os arquivos LESS em CSS.

Nota: tenha em mente que você não é obrigado a usar o Koala. Use seu meio preferido de compilar arquivos LESS. 

4. Construindo a Página

Crie um novo arquivo HTML chamado index.html. Além da estrutura básica com elementos HTML5, o arquivo index.html também contém a meta viewport, a meta description, a tag title, e os links para as folhas de estilo, assim:

A Navegação Off-canvas

É hora de adicionar a navegação Off-canvas. A Jasny Bootstrap usa uma abordagem similar a do Bootstrap quando se trata em código de componente. É assim que começamos a implementar a estrutura da navegação Off-canvas:

Ela inclui várias classes úteis. Três classes chamadas de navmenu, navmenu-inverse e navmenu-fixed-right definem o elemento como um navmenu. O navmenu é um dos componentes do Jasny Bootstrap que configura o elemento em questão como uma navegação vertical. A offcanvas é uma classe que configura o elemento para fora da área de visualização. Adicionalmente, também adicionamos uma nova classe, navmenu-site, que nos permitirá customizar a navegação com nossos próprios estilos.

Os itens do menu da navegação Off-canvas podem ser criados usando o elemento <ul> com as classes nav navmenu-nav, dessa forma.

Você tem a liberdade de incluir componentes originais do Bootstrap junto desse código, como os Menus Suspensos e os Botões

Adicionaremos nesse tutorial um trecho HTML para a navegação que é bem longo. Assim, para facilitar, o código completo pode ser obtido através desse Gist.

O Conteúdo da Página

A imagem a seguir mostra nossos planos sobre como posicionaremos o conteúdo da página:

O diagrama da página, mostrando o layout.
 

Como mostrado acima, o conteúdo do site compreende a logo, o botão de ativação da navegação, em forma de "Hambúrguer" e algumas linhas de frases chamativas com um botão gigantesco — conhecido como botão de ação (call to action, em inglês)

O trecho HTML do conteúdo também é bem longo para ser colocado nesse tutorial. Ao invés disso, sinta-se a vontade de copiá-lo por inteiro desse Gist.

5. Os Estilos

Muitos dos estilos presentes na página serão, meramente, decorativos, tratando apenas de cores, tamanhos e posicionamentos. Esse estilo decorativo será obtido através da customização dos estilos pré-definidos do Bootstrap, bem como da escrita dos nossos próprios estilos. Assim, ao invés de passar por pontos que talvez sejam bastante óbvios, gostaria de apontar alguns detalhes que são mais importantes.

Antes de tudo, antes até de escrever uma linha de código sequer, importe a folha de estilo app.less para dentro da style.less. Isso nos permite reusar as Variáveis e Mixins dentro dela.

Depois, criaremos uma variável LESS para definir o caminho das imagens. Nomearemos essa variável de @path-img.

Toda vez que precisarmos nos referir a uma imagem dentro de nossas folhas de estilo, incluiremos essa variável. O exemplo abaixo mostra como a usamos para apontar para a logo.

Centralização Vertical

Por último, centralizaremos verticalmente o conteúdo, as frases de efeito e o botão. O CSS, até agora, ainda não nos proporcionou uma forma conveniente para alinhar conteúdos verticalmente usando apenas uma única propriedade. Consequentemente, há inúmeras maneiras que poder usar e, honestamente, nenhuma é melhor que a outra.

Nesse caso, alinharemos o conteúdo usando o método CSS Table. Se olhar o código fonte da página, verá que envolvemos o conteúdo dela em duas <div>. Cada <div> foi atribuída uma classe, site-wrapper e site-wrapper-inner, respectivamente.

Para alinhar o conteúdo verticalmente, configuraremos a propriedade display de site-wrapper para table e faremos com que ela tome todo tamanho da área visível, configurando as propriedades width e height para o valor de 100%. Então, configuraremos a propriedade display da div interna como table-cell. Isso nos permitirá aplicar a propriedade vertical-align para alinhar o conteúdo verticalmente.

Detalhes completos sobre os estilos podem ser obtidos nesse Gist.

6. Dê Vida à Página

Assim que adicionarmos os estilos, a página estará parecida com a captura de tela abaixo:

Entretanto, o site ainda não está totalmente funcional. Tente clicar no ícone de "Hambúrguer"; a navegação Off-canvas não surge. Essa funcionalidade vem a partir da biblioteca JavaScript, logo, temos de compilá-lo e adicioná-la ao site.

Precisamos de quatro bibliotecas JavaScript para usar a navegação Off-canvas, que são: jQuery, transition.js e dropdown.js para habilitar o menu suspenso que adicionamos na navegação; e, por último, o offcanvas.js. Para compilá-los em um único arquivo, criaremos um arquivo JavaScript no diretório source/js. Nesse caso, chamaremos ele de app.js.

Importe as bibliotecas JavaScript usando @koala-prepend, dessa forma:

Configure o retorno para o diretório /assets/js, e aperte o botão Compile. Não esqueça de chamar o arquivo final compilado lá em nossa página.

Agora, você deve ser capaz de fazer a navegação off-canvas aparecer e desaparecer. 

Transições

Você também pode adicionar o seguinte trecho de código JavaScript ao final da página, e ele habilitará os efeitos de transição do menu suspenso.

Conclusão

Nesse tutorial, incluímos uma navegação Off-canvas no Bootstrap usando uma extensão chamada Jasny Bootstrap. 

Ao usar Bower nesse tutorial, teremos uma maior facilidade em manter as bibliotecas atualizadas. Depois de um tempo, é provável que elas sejam atualizadas por seus mantenedores. Com o Bower, você pode executar o comando bower list para listar todos os pacotes instalados e verificar se há alguma versão nova para cada um deles.

No caso de uma nova versão estar disponível, simplesmente execute o comando bower update ou o bower install para atualizar o pacote. Simples assim.

Espero que tenha aprendido alguns métodos e dicas legais nesse tutorial. Se tiver alguma pergunta, sinta-se à vontade de deixá-las nos comentários.

Leitura Adicional

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.