Last active
June 12, 2024 19:17
-
-
Save hmouhtar/14cf1fa8e9384e6886ca4c8e95ddd984 to your computer and use it in GitHub Desktop.
Elementor - Make Nav Menu Toggle Animated
This file contains 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
| This snippet filters the content of the Elementor Nav Menu Widget to | |
| add the required markup for the animated toggle (3 spans). | |
| function replaceMenuToggleContent($html) { | |
| // Wrap the HTML with a root element to prevent unexpected restructuring | |
| $dom = new DOMDocument(); | |
| libxml_use_internal_errors(true); | |
| $dom->loadHTML('<div>' . $html . '</div>', LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD); | |
| libxml_clear_errors(); | |
| // Find the div with class "elementor-menu-toggle" | |
| $xpath = new DOMXPath($dom); | |
| $nodes = $xpath->query("//div[contains(@class, 'elementor-menu-toggle')]"); | |
| foreach ($nodes as $node) { | |
| // Create the wrapper div | |
| $wrapperDiv = $dom->createElement("div"); | |
| $wrapperDiv->setAttribute("class", "animated-menu-toggle__wrapper"); | |
| // Add the three empty spans inside the wrapper | |
| for ($i = 0; $i < 3; $i++) { | |
| $span = $dom->createElement("span"); | |
| $wrapperDiv->appendChild($span); | |
| } | |
| // Add the wrapper div to the node | |
| $node->appendChild($wrapperDiv); | |
| // Add the new class "animated-menu-toggle" | |
| $node->setAttribute('class', $node->getAttribute('class') . ' animated-menu-toggle'); | |
| } | |
| // Extract and return the innerHTML of the root <div> we added | |
| $rootDiv = $dom->getElementsByTagName('div')->item(0); | |
| $result = ''; | |
| foreach ($rootDiv->childNodes as $child) { | |
| $result .= $dom->saveHTML($child); | |
| } | |
| return $result; | |
| } | |
| add_filter('elementor/widget/render_content', function($widgetContent, $widget){ | |
| if($widget->get_name() === "nav-menu"){ | |
| $widgetSettings = $widget->get_settings_for_display(); | |
| $widgetId = $widgetSettings['_element_id']; | |
| $targetWidgetId = "animatedMenuToggle"; | |
| if($widgetId === $targetWidgetId){ | |
| return(replaceMenuToggleContent($widgetContent)); | |
| } | |
| } | |
| return $widgetContent; | |
| }, 10, 2); | |
| add_action('wp_head', function(){ | |
| ob_start(); | |
| ?> | |
| <style> | |
| .elementor-menu-toggle.animated-menu-toggle .animated-menu-toggle__wrapper span { | |
| height: 1px; | |
| background-color: #269F39; | |
| transition: 0.5s; | |
| z-index: 999; | |
| width: 100%; | |
| } | |
| .elementor-menu-toggle.animated-menu-toggle .animated-menu-toggle__wrapper { | |
| cursor: pointer; | |
| width: 16px; | |
| height: 16px; | |
| display: flex; | |
| justify-content: space-between; | |
| flex-direction: column; | |
| padding: 0 !important; | |
| } | |
| .elementor-menu-toggle.animated-menu-toggle > :not(.animated-menu-toggle__wrapper){ | |
| display: none !important; | |
| } | |
| .elementor-menu-toggle.animated-menu-toggle.elementor-active > span { | |
| background-color: #fff; | |
| } | |
| .elementor-menu-toggle.animated-menu-toggle.elementor-active .animated-menu-toggle__wrapper span:nth-child(1) { | |
| transform: translateY(7.5px) rotate(45deg); | |
| } | |
| .elementor-menu-toggle.animated-menu-toggle.elementor-active .animated-menu-toggle__wrapper span:nth-child(2) { | |
| opacity: 0; | |
| } | |
| .elementor-menu-toggle.animated-menu-toggle.elementor-active .animated-menu-toggle__wrapper span:nth-child(3) { | |
| transform: translateY(-7.5px) rotate(-45deg); | |
| } | |
| </style> | |
| <?php | |
| echo ob_get_clean(); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment