_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="{{ relative_root }}/">Home</a>
   6                         </li><li {% if current[1] == 'download' %}class='current'{% endif %}><a href="{{ relative_root }}/download">Download</a>
   7                         </li><li {% if current[1] == 'support' %}class='current'{% endif %}><a href="{{ relative_root }}/support">Support</a>
   8                         </li><li {% if current[1] == 'contribute' %}class='current'{% endif %}><a href="{{ relative_root }}/contribute">Contribute</a>
   9                         </li><li {% if current[1] == 'documentation' %}class='current'{% endif %}><a href="{{ relative_root }}/documentation">Docs</a>
  10                         </li><li><a href="https://wiki.qemu.org">Wiki</a>
  11                         </li><li {% if current[1] == 'blog' %}class='current'{% endif %}><a href="{{ relative_root }}/blog">Blog</a></li>
  12                 </ul>
  13         </nav>
  14
  15 <script>
  16 $('body').addClass('js');
  17 $('#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>');
  18 $('button[aria-controls="nav"]').click(function() {
  19         jqNav = $('#nav');
  20         if ($(this).attr('aria-pressed') == 'true') {
  21                 $(this).attr('aria-pressed', false);
  22                 $('#nav, #titleBar>div').animate(
  23                         { 'margin-left': '-=80%' },
  24                         { 'duration': 400 });
  25                 jqNav.promise().done(function() { jqNav.hide().css('margin-left', 0); });
  26         } else {
  27                 $(this).attr('aria-pressed', true);
  28                 jqNav.css('margin-left', '-80%').show();
  29                 $('#nav, #titleBar>div').animate(
  30                         { 'margin-left': '+=80%' },
  31                         { 'duration': 400 });
  32         }
  33 });
  34 </script>