diff --git a/js/navigation.js b/js/navigation.js index 22f7444e..d4f9cf8b 100644 --- a/js/navigation.js +++ b/js/navigation.js @@ -4,29 +4,31 @@ * Handles toggling the navigation menu for small screens. */ ( function() { - var container = document.getElementById( 'site-navigation' ), - button = container.getElementsByTagName( 'h1' )[0], - menu = container.getElementsByTagName( 'ul' )[0]; + var container, button, menu; - if ( undefined == button || undefined == menu ) - return false; + container = document.getElementById( 'site-navigation' ) + if ( ! container ) + return; + + button = container.getElementsByTagName( 'h1' )[0]; + if ( 'undefined' == typeof button ) + return; + + menu = container.getElementsByTagName( 'ul' )[0]; + + // Hide menu toggle button if menu is empty and return early. + if ( 'undefined' == typeof menu ) { + button.style.display = 'none'; + return; + } + + if ( -1 == menu.className.indexOf( 'nav-menu' ) ) + menu.className += ' nav-menu'; button.onclick = function() { - if ( -1 == menu.className.indexOf( 'nav-menu' ) ) - menu.className = 'nav-menu'; - - if ( -1 != button.className.indexOf( 'toggled-on' ) ) { - button.className = button.className.replace( ' toggled-on', '' ); - menu.className = menu.className.replace( ' toggled-on', '' ); - container.className = container.className.replace( 'main-small-navigation', 'navigation-main' ); - } else { - button.className += ' toggled-on'; - menu.className += ' toggled-on'; - container.className = container.className.replace( 'navigation-main', 'main-small-navigation' ); - } + if ( -1 != container.className.indexOf( 'toggled' ) ) + container.className = container.className.replace( ' toggled', '' ); + else + container.className += ' toggled'; }; - - // Hide menu toggle button if menu is empty. - if ( ! menu.childNodes.length ) - button.style.display = 'none'; } )(); \ No newline at end of file diff --git a/style.css b/style.css index b0e814c0..32362729 100644 --- a/style.css +++ b/style.css @@ -441,13 +441,9 @@ a:active { cursor: pointer; } -.main-small-navigation ul { - display: none; -} - @media screen and (max-width: 600px) { .menu-toggle, - .main-small-navigation ul.nav-menu.toggled-on { + .navigation-main.toggled-on .nav-menu { display: block; } @@ -456,6 +452,7 @@ a:active { } } + /* =Content ----------------------------------------------- */