_includes/nav.html

   1         <!-- Nav -->
   2         <nav id="nav">
   3                 <ul>
   4                         {% assign current = page.url | downcase | split: '/' %}
   5                         <li class='{% if page.url == '/' %}not-desktop {%endif %}home'><a href="/">Home</a>
   6                         </li><li {% if current[1] == 'download' %}class='current'{% endif %}><a href="/download">Download</a>
   7                         </li><li {% if current[1] == 'support' %}class='current'{% endif %}><a href="/support">Support</a>
   8                         </li><li {% if current[1] == 'contribute' %}class='current'{% endif %}><a href="/contribute">Contribute</a>
   9                         </li><li {% if current[1] == 'documentation' %}class='current'{% endif %}><a href="/documentation">Documentation</a>
  10                         </li><li {% if current[1] == 'blog' %}class='current'{% endif %}><a href="/blog">Blog</a></li>
  11                 </ul>
  12         </nav>
  13
  14 <script>
  15 $('body').addClass('js');
  16 $('#nav').hide().before('<div id="titleBar"><div><button role="button" aria-pressed="false" aria-controls="nav" aria-label="Toggle navigation bar"><span class="fa fa-lg fa-bars"></span></button></div></div>');
  17 $('button[aria-controls="nav"]').click(function() {
  18         jqNav = $('#nav');
  19         if ($(this).attr('aria-pressed') == 'true') {
  20                 $(this).attr('aria-pressed', false);
  21                 $('#nav, #titleBar>div').animate(
  22                         { 'margin-left': '-=80%' },
  23                         { 'duration': 400 });
  24                 jqNav.promise().done(function() { jqNav.hide().css('margin-left', 0); });
  25         } else {
  26                 $(this).attr('aria-pressed', true);
  27                 jqNav.css('margin-left', '-80%').show();
  28                 $('#nav, #titleBar>div').animate(
  29                         { 'margin-left': '+=80%' },
  30                         { 'duration': 400 });
  31         }
  32 });
  33 </script>