Como criar menu lateral responsivo utilizando jQuery Sidr

Fonte: http://www.berriart.com/sidr/
Exemplo: Aqui
Arquivos: Aqui
Documentação: Aqui

É obvio que o próprio site do desenvolvedor contem todas as informações/exemplos necessários para a implementação dos menus.
Vou ressaltar aqui as funcionalidades básicas.

Após realizar o download do pacote, teremos:

<!DOCTYPE html>
<html>
  <head>
    <!-- Your stuff -->

    <!-- Include Sidr bundled CSS theme -->
    <link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
  </head>
  <body>
    <!-- Your stuff -->

    <!-- Include jQuery -->
    <script src="javascripts/jquery.js"></script>
    <!-- Include the Sidr JS -->
    <script src="javascripts/sidr/jquery.sidr.min.js"></script>
  </body>
</html>

Criando o menu:

<a id="simple-menu" href="#sidr">Toggle menu</a>

<div id="sidr">
  <!-- Your content -->
  <ul>
    <li><a href="#">List 1</a></li>
    <li><a href="#">List 2</a></li>
    <li><a href="#">List 3</a></li>
  </ul>
</div>

<script>
$(document).ready(function() {
  $('#simple-menu').sidr();
});
</script>

Seguindo a documentação do plugin é possível definir o tipo/formato do menu a criar.

Espero ter ajudado (:

Share Button