header_nav.html 1.0 KB

123456789101112131415161718192021222324252627282930
  1. <div id="header_nav">
  2. <div class="navSlideout">
  3. <i class="menuExpand" id="header_nav_expander"><span></span><span></span><span></span></i>
  4. </div>
  5. <nav class="slidingNav">
  6. <ul>
  7. {% for item in site.data.nav %}
  8. <li class="navItem">
  9. <a href="{{ item.href }}"{% if item.category == "external" %} target="_blank"{% endif %}>{{ item.title }}</a>
  10. </li>
  11. {% endfor %}
  12. {% if site.searchconfig %}
  13. {% include nav_search.html inputselector="search_input_react" %}
  14. {% endif %}
  15. </ul>
  16. </nav>
  17. </div>
  18. <script>
  19. var event = document.createEvent('Event');
  20. event.initEvent('slide', true, true);
  21. document.addEventListener('slide', function (e) {
  22. document.body.classList.toggle('sliderActive');
  23. }, false);
  24. var headerNav = document.getElementById('header_nav');
  25. var headerNavExpander = document.getElementById('header_nav_expander');
  26. headerNavExpander.addEventListener('click', function(e) {
  27. headerNav.classList.toggle('navSlideoutActive');
  28. document.dispatchEvent(event);
  29. }, false);
  30. </script>