rayelliott
/
_s
Archived
forked from mirror/_s
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
This repository has been archived on 2020-05-08. You can view files and clone it, but cannot push or open issues or pull requests.
_s/js/navigation.js

35 lines
827 B
JavaScript
Raw Normal View History

Replace small-menu.js with navigation.js inspired by Twenty Twelve. Doesn't use jQuery, slightly easier to understand, uses a media query for max-width, rather than JS events making it faster to respond.
2012-09-03 17:45:28 +00:00
/**
* navigation.js
*
* Handles toggling the navigation menu for small screens.
*/
( function() {
Rework Navigation Menu Part 2 * Separate scoping and assignment so that a decision does not need to be made as to whether we should intermix spaces and tabs on the left * Restore the previously removed nav-menu class addition to the first unordered list in `#site-navigation`. * Restore the `.navigation-main.toggled-on .nav-menu` selector. * Remove rules for the `.main-small-navigation ul` selector.
2013-06-25 08:45:52 +00:00
var container, button, menu;
Replace small-menu.js with navigation.js inspired by Twenty Twelve. Doesn't use jQuery, slightly easier to understand, uses a media query for max-width, rather than JS events making it faster to respond.
2012-09-03 17:45:28 +00:00
Add missing semicolon
2013-07-14 06:39:03 +00:00
container = document.getElementById( 'site-navigation' );
Rework menu navigation: these changes build off pull request #239 for issue #200 * Only set button and menu if container is not null. * Break up the "return early" conditional into multiple parts. * Shorten the name of the toggled class from `toggled-on` to `toggled`. * Restore the "Hide menu toggle button if menu is empty." documentation. * Remove the `nav-menu` class. The previous code would replace any custom custom classes applied via `wp_nav_menu()` or template file. * Replace the `nav-menu` selector is style.css with selectors that will target both a custom nav menu and a page menu. These changes could use critical feedback. Do you know of an edge case where they might not work as expected?
2013-06-17 03:29:17 +00:00
if ( ! container )
return;
Replace small-menu.js with navigation.js inspired by Twenty Twelve. Doesn't use jQuery, slightly easier to understand, uses a media query for max-width, rather than JS events making it faster to respond.
2012-09-03 17:45:28 +00:00
Rework menu navigation: these changes build off pull request #239 for issue #200 * Only set button and menu if container is not null. * Break up the "return early" conditional into multiple parts. * Shorten the name of the toggled class from `toggled-on` to `toggled`. * Restore the "Hide menu toggle button if menu is empty." documentation. * Remove the `nav-menu` class. The previous code would replace any custom custom classes applied via `wp_nav_menu()` or template file. * Replace the `nav-menu` selector is style.css with selectors that will target both a custom nav menu and a page menu. These changes could use critical feedback. Do you know of an edge case where they might not work as expected?
2013-06-17 03:29:17 +00:00
button = container.getElementsByTagName( 'h1' )[0];
Use === and !== instead of == and !=
2013-07-14 06:38:08 +00:00
if ( 'undefined' === typeof button )
Rework menu navigation: these changes build off pull request #239 for issue #200 * Only set button and menu if container is not null. * Break up the "return early" conditional into multiple parts. * Shorten the name of the toggled class from `toggled-on` to `toggled`. * Restore the "Hide menu toggle button if menu is empty." documentation. * Remove the `nav-menu` class. The previous code would replace any custom custom classes applied via `wp_nav_menu()` or template file. * Replace the `nav-menu` selector is style.css with selectors that will target both a custom nav menu and a page menu. These changes could use critical feedback. Do you know of an edge case where they might not work as expected?
2013-06-17 03:29:17 +00:00
return;
Replace small-menu.js with navigation.js inspired by Twenty Twelve. Doesn't use jQuery, slightly easier to understand, uses a media query for max-width, rather than JS events making it faster to respond.
2012-09-03 17:45:28 +00:00
Rework menu navigation: these changes build off pull request #239 for issue #200 * Only set button and menu if container is not null. * Break up the "return early" conditional into multiple parts. * Shorten the name of the toggled class from `toggled-on` to `toggled`. * Restore the "Hide menu toggle button if menu is empty." documentation. * Remove the `nav-menu` class. The previous code would replace any custom custom classes applied via `wp_nav_menu()` or template file. * Replace the `nav-menu` selector is style.css with selectors that will target both a custom nav menu and a page menu. These changes could use critical feedback. Do you know of an edge case where they might not work as expected?
2013-06-17 03:29:17 +00:00
menu = container.getElementsByTagName( 'ul' )[0];
Replace small-menu.js with navigation.js inspired by Twenty Twelve. Doesn't use jQuery, slightly easier to understand, uses a media query for max-width, rather than JS events making it faster to respond.
2012-09-03 17:45:28 +00:00
Rework menu navigation: these changes build off pull request #239 for issue #200 * Only set button and menu if container is not null. * Break up the "return early" conditional into multiple parts. * Shorten the name of the toggled class from `toggled-on` to `toggled`. * Restore the "Hide menu toggle button if menu is empty." documentation. * Remove the `nav-menu` class. The previous code would replace any custom custom classes applied via `wp_nav_menu()` or template file. * Replace the `nav-menu` selector is style.css with selectors that will target both a custom nav menu and a page menu. These changes could use critical feedback. Do you know of an edge case where they might not work as expected?
2013-06-17 03:29:17 +00:00
// Hide menu toggle button if menu is empty and return early.
Use === and !== instead of == and !=
2013-07-14 06:38:08 +00:00
if ( 'undefined' === typeof menu ) {
Replace small-menu.js with navigation.js inspired by Twenty Twelve. Doesn't use jQuery, slightly easier to understand, uses a media query for max-width, rather than JS events making it faster to respond.
2012-09-03 17:45:28 +00:00
button.style.display = 'none';
Rework menu navigation: these changes build off pull request #239 for issue #200 * Only set button and menu if container is not null. * Break up the "return early" conditional into multiple parts. * Shorten the name of the toggled class from `toggled-on` to `toggled`. * Restore the "Hide menu toggle button if menu is empty." documentation. * Remove the `nav-menu` class. The previous code would replace any custom custom classes applied via `wp_nav_menu()` or template file. * Replace the `nav-menu` selector is style.css with selectors that will target both a custom nav menu and a page menu. These changes could use critical feedback. Do you know of an edge case where they might not work as expected?
2013-06-17 03:29:17 +00:00
return;
}
Use === and !== instead of == and !=
2013-07-14 06:38:08 +00:00
if ( -1 === menu.className.indexOf( 'nav-menu' ) )
Rework Navigation Menu Part 2 * Separate scoping and assignment so that a decision does not need to be made as to whether we should intermix spaces and tabs on the left * Restore the previously removed nav-menu class addition to the first unordered list in `#site-navigation`. * Restore the `.navigation-main.toggled-on .nav-menu` selector. * Remove rules for the `.main-small-navigation ul` selector.
2013-06-25 08:45:52 +00:00
menu.className += ' nav-menu';
Rework menu navigation: these changes build off pull request #239 for issue #200 * Only set button and menu if container is not null. * Break up the "return early" conditional into multiple parts. * Shorten the name of the toggled class from `toggled-on` to `toggled`. * Restore the "Hide menu toggle button if menu is empty." documentation. * Remove the `nav-menu` class. The previous code would replace any custom custom classes applied via `wp_nav_menu()` or template file. * Replace the `nav-menu` selector is style.css with selectors that will target both a custom nav menu and a page menu. These changes could use critical feedback. Do you know of an edge case where they might not work as expected?
2013-06-17 03:29:17 +00:00
button.onclick = function() {
Use === and !== instead of == and !=
2013-07-14 06:38:08 +00:00
if ( -1 !== container.className.indexOf( 'toggled' ) )
Rework menu navigation: these changes build off pull request #239 for issue #200 * Only set button and menu if container is not null. * Break up the "return early" conditional into multiple parts. * Shorten the name of the toggled class from `toggled-on` to `toggled`. * Restore the "Hide menu toggle button if menu is empty." documentation. * Remove the `nav-menu` class. The previous code would replace any custom custom classes applied via `wp_nav_menu()` or template file. * Replace the `nav-menu` selector is style.css with selectors that will target both a custom nav menu and a page menu. These changes could use critical feedback. Do you know of an edge case where they might not work as expected?
2013-06-17 03:29:17 +00:00
container.className = container.className.replace( ' toggled', '' );
else
container.className += ' toggled';
};
Use === and !== instead of == and !=
2013-07-14 06:38:08 +00:00
} )();