Slidebars: Um plugin jQuery para criar sidebars animadas

Slidebars

Nenhum produto encontrado nessa seleção.

Provavelmente você já deve ter utilizado um site ou app que tem barras laterais para configurações e menus. Essas barras laterais tem um efeito que parece empurrar o conteúdo para fora da página enquanto a mesma desliza para dentro, revelando seu conteúdo oculto. Slidebars faz exatamente isso para você, ajuda na criação de barras laterais com aquele efeito para seu site.

Slidebars é um plugin do jQuery que cria barras laterais no estilo "Revela/Oculta", deslizando o conteúdo do site para fora da página para revelar a parte interna da barra lateral, e retornando este mesmo conteúdo para seu local de origem, escondendo a sidebar.

Slidebars - Exemplo

Funciona para seu layout responsivo e é bastante leve, já que o arquivo CSS necessário (slidebars.min.css) tem 4KB, e o JS (slidebars.min.js) 8KB. Além disso, Slidebars tenta utilizar aceleração por hardware em transições sempre que possível. Isso garante uma transição mais suave e precisa. Caso não tenha essa possibilidade, ele utiliza jQuery.animate()como fallback.

Fiz um pequeno exemplo que pode ser encontrado no link abaixo:

Faça um teste e veja se gosta do efeito.

Veja abaixo como utilizar o plugin.

Utilizando o Slidebars

1 – Primeiramente, você deve fazer o download (ou clonar o repositório) do Slidebars em seu computador local.

2 – Feito isso, você precisa pegar os arquivos de uma das versões utilizadas, de preferência a última. Os arquivos necessários são:

  • slidebars.min.css
  • slidebars.min.js

3 – Depois você deve linkar estes dois arquivos no seu documento HTML. Vale lembrar que, como o slidebars utiliza jQuery, é necessário que este esteja presente no seu projeto (sei que é óbvio, mas ficou a dica).

O cabeçalho ficaria mais ou menos assim:

<!-- CSS do Slidebars -->
<link rel="stylesheet" media="all" href="css/slidebars.min.css">

<!-- CSS do site -->
<link rel="stylesheet" media="all" href="css/style.css">

<!-- jQuery, Slidebars.js e scripts que possam ser utilizados no layout -->
<script src="js/jquery.js"></script>
<script src="js/slidebars.min.js"></script>
<script src="js/scripts.js"></script>

4 – Com isso "em mãos", você precisa fazer o load do Slidebars. Para isso, basta adicionar isso no Javascript do seu documento:

$(function(){
	$.slidebars();
});

Ou, se for adicionar em qualquer parte dos seus scripts jQuery, basta esta linha:

$.slidebars();

5 – Feito isso, você precisa mencionar quais os botões para abrir as barras laterais, por exemplo:

<!-- Menu para abrir a barra lateral da esquerda -->
<a class="sb-toggle-left" href="#">Menu da esquerda</a>
<!-- Menu para abrir a barra lateral da Direita -->
<a class="sb-toggle-right" href="#">Menu da direita</a>

As classes sb-toggle-left e sb-toggle-right, são, respectivamente, para abrir a barra lateral da esquerda, e a da direita.

6 – E criar o código das barras laterais em si:

<!-- A barra lateral da esquerda -->
<div class="sb-slidebar sb-left sb-width-custom" data-sb-width="50%">
	<ul>
		<li><a href="http://www.todoespacoonline.com/w/">Menu</a></li>
		<li><a href="http://www.todoespacoonline.com/w/">Menu</a></li>
	</ul>
</div>		

<!-- A barra lateral da direita -->
<div class="sb-slidebar sb-right sb-width-custom" data-sb-width="150px">
	<ul>
		<li><a href="http://www.todoespacoonline.com/w/">Menu</a></li>
		<li><a href="http://www.todoespacoonline.com/w/">Menu</a></li>
	</ul>
</div>

6 – Perceba as classes sb-slidebar sb-left e sb-width-custom, elas são extremamente necessárias para que Slidebars funcione perfeitamente. A primeira, sb-slidebar, indica que essa DIV é uma barra lateral que vai ser utilizada com o plugin, a segunda, sb-left, indica que é uma barra lateral na parte da esquerda, e a terceira, sb-width-custom, habilita uma opção para ativar a largura da sidebar, que pode ser configurada com o atributo data-sb-width="tamanho em pixel ou porcentagem".

7 – Um id muito importante para ser utilizado, é o sb-site, que indica o local que estará o site por completo. Isto vai fazer apenas aquela parte do site deslizar para mostrar a barra lateral. Um problema que encontrei aqui, é quando utilizamos a barra de menus com position: fixed;. Sua barra de menus não vai deslizar com a página. No entanto, isso também foi pensado no Slidebars.

Basta adicionar a classe sb-slide ao seu menu, ou qualquer elemento posicionado de maneira absoluta ou fixa.

Meu menu ficou assim:

<!-- A classe sb-slide faz o menu deslizar junto com a barra -->
<div class="menu sb-slide">
	<ul>
		<!-- Menu para abrir a barra lateral da esquerda -->
		<li><a class="sb-toggle-left" href="#">Menu da esquerda</a></li>
		<!-- Menu para abrir a barra lateral da Direita -->
		<li><a class="sb-toggle-right" href="#">Menu da direita</a></li>
	</ul>
</div>

É isso, não precisa fazer mais nada!

Download e exemplo

Como eu disse no início, fiz um exemplo que pode ser acessado no link abaixo:

Você também pode baixar este exemplo no link abaixo:

E pode até desenvolver seu layout sobre este demo, a escolha é sua. É tudo grátis.

Concluindo

Hoje em dia, estamos cheios de opções para criar layouts funcionais, bonitos e intuitivos para nossos clientes e leitores. Plugins e aplicativos que facilitam o desenvolvimento aparecem diariamente, e eles vêm para somar. As barras laterais estão sumindo cada vez mais dos layouts mais novos, a maioria dos desenvolvedores já está se acostumando com a moda dos sites sem barra lateral. Porém, se o seu site precisa dela para exibir qualquer coisa, você pode fazer algo inteligente utilizando o slidebars, ocultar a sidebar e só exibir quando o cliente quiser vê-la.

Não deixe de compartilhar suas dúvidas ou sua opinião nos comentários.

/por