Last active
June 9, 2025 14:34
-
-
Save addisonhall/17a1380ddc45d390b63c576b38056e7e to your computer and use it in GitHub Desktop.
Big dropdown snippets for use with GeneratePress and GenerateBlocks, uses GP Elements
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Add custom HTML tag(s) to GenerateBlocks Loop Item | |
| * @link https://generate.support/topic/gb-headline-dynamic-data-open-in-new-tab-not-workin/#post-165999 | |
| */ | |
| add_filter('block_type_metadata', function($metadata) { | |
| if (isset($metadata['name']) && $metadata['name'] === 'generateblocks/element') { | |
| $metadata['attributes']['tagName']['enum'] = array_merge( | |
| $metadata['attributes']['tagName']['enum'], | |
| // include array of tag/element names, for example: ['figure', 'dd', 'aside'] | |
| ['template'] | |
| ); | |
| } | |
| return $metadata; | |
| }, 10, 1); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* --- generatepress big dropdown menu --- */ | |
| .dropdown-click .site-header #site-navigation.main-navigation ul ul { | |
| display: unset; /* don't use display:none so that animations work */ | |
| } | |
| .site-header #site-navigation.main-navigation ul .has-big-dropdown ul.sub-menu { | |
| box-shadow: unset; | |
| } | |
| .site-header #site-navigation.main-navigation ul .has-big-dropdown ul.sub-menu li.big-dropdown { | |
| transition: opacity 0.25s ease-in-out; | |
| opacity: 0; | |
| } | |
| .site-header #site-navigation.main-navigation ul .has-big-dropdown ul.sub-menu.toggled-on li.big-dropdown { | |
| opacity: 1; | |
| } | |
| .site-header #site-navigation.main-navigation .inside-navigation, | |
| .site-header #site-navigation.main-navigation .menu-item.has-big-dropdown { | |
| position: static; | |
| } | |
| .site-header #site-navigation.main-navigation .menu-item.has-big-dropdown > ul.sub-menu.toggled-on { | |
| position: absolute; | |
| width: 100%; | |
| left: 0; | |
| right: 0; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Stuff to do when everything is loaded | |
| */ | |
| window.addEventListener('load', function() { | |
| // Do big dropdowns | |
| activateBigDropdown(); | |
| }); | |
| /** | |
| * Activate big dropdown | |
| */ | |
| function activateBigDropdown() { | |
| // check for template support | |
| if (!'content' in document.createElement('template')) return; | |
| const primaryMenu = document.getElementById('primary-menu'); | |
| const bigDropdowns = primaryMenu.querySelectorAll('.big-dropdown'); | |
| // check for '.big-dropdown' class | |
| if (!bigDropdowns) return; | |
| const bigDropdownTemplates = document.querySelectorAll('.big-dropdown-template'); | |
| const siteHeader = document.getElementById('masthead'); | |
| const hasBigDropdowns = document.querySelectorAll('.has-big-dropdown'); | |
| const allDropDownMenuToggles = siteHeader.querySelectorAll('.dropdown-menu-toggle'); | |
| // loop through big dropdown templates | |
| bigDropdownTemplates.forEach(function(template) { | |
| // get the ID of each template | |
| let templateID = template.id; | |
| // now loop through menu items with .big-dropdown class | |
| bigDropdowns.forEach(function(menuItem) { | |
| // if the menu item as a class that matches the dropdown template ID | |
| // clone the template contents to the menu item | |
| if (menuItem.classList.contains(templateID)) { | |
| let menuChildContents = menuItem.firstChild; | |
| let bigMenuClone = template.content.cloneNode(true); | |
| menuChildContents.replaceWith(bigMenuClone); | |
| } | |
| }); | |
| }); | |
| const menu = document.getElementById('menu-primary'); | |
| // watch for changes in the primary menu to update the header when active | |
| let Observer = new MutationObserver(function() { | |
| let activeDropdowns = []; | |
| hasBigDropdowns.forEach(function(item) { | |
| // check for any active dropdowns | |
| if (item.classList.contains('sfHover')) { | |
| allDropDownMenuToggles.forEach(function(toggle) { | |
| toggle.setAttribute('aria-expanded', 'false'); | |
| }); | |
| item.querySelector('.dropdown-menu-toggle').setAttribute('aria-expanded', 'true'); | |
| activeDropdowns.push(true); | |
| } else { | |
| activeDropdowns.push(false); | |
| item.querySelector('.dropdown-menu-toggle').setAttribute('aria-expanded', 'false'); | |
| } | |
| // update site header class accordingly | |
| if (activeDropdowns.includes(true)) { | |
| siteHeader.classList.add('big-dropdown-open'); | |
| } else { | |
| siteHeader.classList.remove('big-dropdown-open'); | |
| } | |
| }) | |
| }); | |
| Observer.observe(menu, { | |
| attributeFilter: ['class'], | |
| subtree: true, | |
| }); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment