menu.js 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. document.addEventListener('DOMContentLoaded', function() {
  2. var menuCollapsed = false,
  3. mobileMenu = document.getElementById('mobile-menu');
  4. document.getElementById('btn-menu').addEventListener('click', function() {
  5. if (menuCollapsed) {
  6. mobileMenu.style.display = 'none';
  7. } else {
  8. mobileMenu.style.display = 'block';
  9. document.getElementsByTagName('body')[0].style['overflow-y'] = 'hidden';
  10. }
  11. menuCollapsed = !menuCollapsed;
  12. });
  13. // collapse menu
  14. var classnameMenuToggler = document.getElementsByClassName('menu-toggler'),
  15. faAngleUpClass = 'fa-angle-up',
  16. faAngleDownClass = 'fa-angle-down',
  17. toggleItemMenu = function(e) {
  18. e.preventDefault();
  19. var element = $(e.target);
  20. if (element.hasClass(faAngleUpClass)) {
  21. element.addClass(faAngleDownClass);
  22. element.removeClass(faAngleUpClass);
  23. } else {
  24. element.addClass(faAngleUpClass);
  25. element.removeClass(faAngleDownClass);
  26. }
  27. };
  28. for (var i = 0; i < classnameMenuToggler.length; i++) {
  29. classnameMenuToggler[i].addEventListener('click', toggleItemMenu, false);
  30. }
  31. // Scroll to active link
  32. var menus = document.querySelectorAll('.menu'),
  33. i = 0,
  34. len = menus.length,
  35. activeMenu,
  36. activeMenuClass,
  37. activeLink;
  38. for (i; i<len; i++) {
  39. if (getComputedStyle(menus[i]).display != 'none') {
  40. activeMenu = menus[i];
  41. activeMenuClass = activeMenu.getAttribute('class').split(' ')[0];
  42. }
  43. }
  44. if (activeMenu) {
  45. activeLink = document.querySelector('.' + activeMenuClass + ' .active');
  46. activeMenu.scrollTop = activeLink.offsetTop;
  47. if (activeLink.innerHTML.toLowerCase().indexOf('readme') != -1 || activeLink.innerHTML.toLowerCase().indexOf('overview') != -1) {
  48. activeMenu.scrollTop = 0;
  49. }
  50. }
  51. });