Файловый менеджер

Файловый менеджер - Редактировать - /var/www/xthruster/html/wp-content/plugins/elementor-pro/modules/mega-menu/widgets/mega-menu.php

Назад
<?php namespace ElementorPro\Modules\MegaMenu\Widgets; use ElementorPro\Base\Base_Widget_Trait; use ElementorPro\Modules\MegaMenu\Controls\Control_Menu_Dropdown_Animation; use ElementorPro\Plugin; use Elementor\Controls_Manager; use Elementor\Core\Kits\Documents\Tabs\Global_Typography; use Elementor\Core\Kits\Documents\Tabs\Global_Colors; use Elementor\Modules\NestedElements\Base\Widget_Nested_Base; use Elementor\Modules\NestedElements\Controls\Control_Nested_Repeater; use Elementor\Icons_Manager; use Elementor\Repeater; use Elementor\Group_Control_Background; use Elementor\Group_Control_Border; use Elementor\Group_Control_Box_Shadow; use Elementor\Group_Control_Text_Shadow; use Elementor\Group_Control_Text_Stroke; use Elementor\Group_Control_Typography; use Elementor\Core\Breakpoints\Manager as Breakpoints_Manager; use ElementorPro\Modules\MegaMenu\Traits\Url_Helper_Trait; if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly } class Mega_Menu extends Widget_Nested_Base { use Base_Widget_Trait; use Url_Helper_Trait; public function get_name() { return 'mega-menu'; } public function get_title() { return esc_html__( 'Menu', 'elementor-pro' ); } public function get_icon() { return 'eicon-mega-menu'; } public function get_categories() { return [ 'pro-elements', 'theme-elements' ]; } public function get_keywords() { return [ 'Mega Menu', 'Nested Elements' ]; } /** * Get style dependencies. * * Retrieve the list of style dependencies the widget requires. * * @since 3.24.0 * @access public * * @return array Widget style dependencies. / public function get_style_depends(): array { return [ 'widget-mega-menu' ]; } /* * @return array[] / private function get_content_horizontal_controls(): array { $horizontal_controls = [ 'left' => [ 'title' => esc_html__( 'Left', 'elementor-pro' ), 'icon' => 'eicon-h-align-left', ], 'center' => [ 'title' => esc_html__( 'Center', 'elementor-pro' ), 'icon' => 'eicon-h-align-center', ], 'right' => [ 'title' => esc_html__( 'Right', 'elementor-pro' ), 'icon' => 'eicon-h-align-right', ], ]; return is_rtl() ? array_reverse( $horizontal_controls ) : $horizontal_controls; } protected function get_default_children_elements() { return [ [ 'elType' => 'container', 'settings' => [ '_title' => __( 'Item #1', 'elementor-pro' ), ], ], [ 'elType' => 'container', 'settings' => [ '_title' => __( 'Item #2', 'elementor-pro' ), ], ], [ 'elType' => 'container', 'settings' => [ '_title' => __( 'Item #3', 'elementor-pro' ), ], ], ]; } protected function get_default_repeater_title_setting_key() { return 'item_title'; } protected function get_default_children_title() { return esc_html__( 'Item #%d', 'elementor-pro' ); } protected function get_default_children_placeholder_selector() { return '.e-n-menu-heading'; } protected function get_default_children_container_placeholder_selector() { return '.e-n-menu-content'; } protected function get_html_wrapper_class() { return 'elementor-widget-n-menu'; } /* * Define a selector class for a widget control. * * @param string $item The name of the element which we need to select. * @param string $state The state of the selector, e.g. `:hover` or `:focus`. * * @return string The css selector for our element. * @since 3.12.0 / protected function get_control_selector_class( $control_item, $state = '' ) { if ( 'menu_toggle_icon' === $control_item ) { return "{{WRAPPER}} > .elementor-widget-container > .e-n-menu > .e-n-menu-toggle{$state} > .e-n-menu-toggle-icon"; } elseif ( 'active_content_container' === $control_item ) { return ":where( {{WRAPPER}} > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-content ) > .e-con{$state}"; } } /* * Get Typography Selector * * Returns a selector class for the typography widget control. * * @param string $heading_selector The css selector for the menu. * * @return string The css selector for the typography control. / protected function get_typography_selector( $heading_selector ): string { $typography_selector = "{$heading_selector} > .e-n-menu-item > .e-n-menu-title"; $typography_selector .= ", {$heading_selector} > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container"; $typography_selector .= ", {$heading_selector} > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container > span"; return $typography_selector; } protected function register_controls() { $heading_selector = '{{WRAPPER}} > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading'; $start = is_rtl() ? 'right' : 'left'; $end = is_rtl() ? 'left' : 'right'; $logical_dimensions_inline_start = is_rtl() ? '{{RIGHT}}{{UNIT}}' : '{{LEFT}}{{UNIT}}'; $logical_dimensions_inline_end = is_rtl() ? '{{LEFT}}{{UNIT}}' : '{{RIGHT}}{{UNIT}}'; $start_logical = is_rtl() ? 'end' : 'start'; $end_logical = is_rtl() ? 'start' : 'end'; $this->start_controls_section( 'section_layout', [ 'label' => esc_html__( 'Layout', 'elementor-pro' ), ] ); $this->add_control( 'menu_name', [ 'label' => esc_html__( 'Menu Name', 'elementor-pro' ), 'type' => Controls_Manager::TEXT, 'default' => esc_html__( 'Menu', 'elementor-pro' ), ] ); $repeater = new Repeater(); $repeater->add_control( 'item_title', [ 'label' => esc_html__( 'Title', 'elementor-pro' ), 'type' => Controls_Manager::TEXT, 'default' => esc_html__( 'Item Title', 'elementor-pro' ), 'dynamic' => [ 'active' => true, ], 'label_block' => true, ] ); $repeater->add_control( 'item_link', [ 'label' => esc_html__( 'Link', 'elementor-pro' ), 'type' => Controls_Manager::URL, 'placeholder' => esc_html__( 'Paste URL or type', 'elementor-pro' ), 'dynamic' => [ 'active' => true, ], 'frontend_available' => true, ] ); $repeater->add_control( 'item_dropdown_content', [ 'label' => esc_html__( 'Dropdown Content', 'elementor-pro' ), 'type' => Controls_Manager::SWITCHER, 'label_off' => esc_html__( 'OFF', 'elementor-pro' ), 'label_on' => esc_html__( 'ON', 'elementor-pro' ), 'default' => 'no', 'description' => esc_html__( 'Click on the menu item to edit its dropdown content.', 'elementor-pro' ), 'frontend_available' => true, ] ); $repeater->add_control( 'item_icon', [ 'label' => esc_html__( 'Icon', 'elementor-pro' ), 'type' => Controls_Manager::ICONS, 'fa4compatibility' => 'icon', 'skin' => 'inline', 'label_block' => false, ] ); $repeater->add_control( 'item_icon_active', [ 'label' => esc_html__( 'Active Icon', 'elementor-pro' ), 'type' => Controls_Manager::ICONS, 'fa4compatibility' => 'icon', 'skin' => 'inline', 'label_block' => false, 'condition' => [ 'item_icon[value]!' => '', ], ] ); $repeater->add_control( 'element_id', [ 'label' => esc_html__( 'CSS ID', 'elementor-pro' ), 'type' => Controls_Manager::TEXT, 'default' => '', 'dynamic' => [ 'active' => true, ], 'ai' => [ 'active' => false, ], 'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor-pro' ), 'style_transfer' => false, ] ); $this->add_control( 'menu_items', [ 'label' => esc_html__( 'Menu Items', 'elementor-pro' ), 'type' => Control_Nested_Repeater::CONTROL_TYPE, 'fields' => $repeater->get_controls(), 'default' => [ [ 'item_title' => esc_html__( 'Item #1', 'elementor-pro' ), ], [ 'item_title' => esc_html__( 'Item #2', 'elementor-pro' ), ], [ 'item_title' => esc_html__( 'Item #3', 'elementor-pro' ), ], ], 'title_field' => '{{{ item_title }}}', 'frontend_available' => true, ] ); $this->add_control( 'content_width', [ 'label' => esc_html__( 'Content Width', 'elementor-pro' ), 'type' => Controls_Manager::SELECT, 'default' => 'full_width', 'separator' => 'before', 'options' => [ 'full_width' => esc_html__( 'Full Width', 'elementor-pro' ), 'fit_to_content' => esc_html__( 'Fit To Content', 'elementor-pro' ), ], 'prefix_class' => 'e-', 'frontend_available' => true, 'selectors' => [ '{{WRAPPER}}' => '--n-menu-dropdown-content-max-width: {{VALUE}};', ], 'selectors_dictionary' => [ 'full_width' => 'initial', 'fit_to_content' => 'fit-content', ], ] ); $this->add_control( 'content_horizontal_position', [ 'label' => esc_html__( 'Content Horizontal Position', 'elementor-pro' ), 'type' => Controls_Manager::CHOOSE, 'options' => $this->get_content_horizontal_controls(), 'default' => 'center', 'condition' => [ 'content_width' => 'fit_to_content', ], 'frontend_available' => true, 'render_type' => 'ui', ] ); $this->add_control( 'item_layout', [ 'label' => esc_html__( 'Item Layout', 'elementor-pro' ), 'type' => Controls_Manager::SELECT, 'default' => 'horizontal', 'options' => [ 'horizontal' => esc_html__( 'Horizontal', 'elementor-pro' ), 'dropdown' => esc_html__( 'Dropdown', 'elementor-pro' ), ], 'prefix_class' => 'e-n-menu-layout-', 'frontend_available' => true, ] ); $this->add_responsive_control( 'item_position_horizontal', [ 'label' => esc_html__( 'Item Position', 'elementor-pro' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'start' => [ 'title' => esc_html__( 'Start', 'elementor-pro' ), 'icon' => "eicon-align-$start_logical-h", ], 'center' => [ 'title' => esc_html__( 'Center', 'elementor-pro' ), 'icon' => 'eicon-align-center-h', ], 'end' => [ 'title' => esc_html__( 'End', 'elementor-pro' ), 'icon' => "eicon-align-$end_logical-h", ], 'stretch' => [ 'title' => esc_html__( 'Stretch', 'elementor-pro' ), 'icon' => 'eicon-align-stretch-h', ], ], 'selectors_dictionary' => [ 'start' => '--n-menu-heading-justify-content: initial; --n-menu-title-flex-grow: initial; --n-menu-title-justify-content: initial; --n-menu-title-justify-content-mobile: initial;', 'center' => '--n-menu-heading-justify-content: center; --n-menu-title-flex-grow: initial; --n-menu-title-justify-content: initial; --n-menu-title-justify-content-mobile: center;', 'end' => '--n-menu-heading-justify-content: flex-end; --n-menu-title-flex-grow: initial; --n-menu-title-justify-content: initial; --n-menu-title-justify-content-mobile: flex-end;', 'stretch' => '--n-menu-heading-justify-content: space-between; --n-menu-title-flex-grow: 1; --n-menu-title-justify-content: center; --n-menu-title-justify-content-mobile: center;', ], 'selectors' => [ '{{WRAPPER}}' => '{{VALUE}}', ], 'condition' => [ 'item_layout' => 'horizontal', ], 'frontend_available' => true, ]); $this->add_responsive_control( 'item_position_dropdown', [ 'label' => esc_html__( 'Item Position', 'elementor-pro' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'start' => [ 'title' => esc_html__( 'Start', 'elementor-pro' ), 'icon' => "eicon-align-$start_logical-h", ], 'center' => [ 'title' => esc_html__( 'Center', 'elementor-pro' ), 'icon' => 'eicon-align-center-h', ], 'end' => [ 'title' => esc_html__( 'End', 'elementor-pro' ), 'icon' => "eicon-align-$end_logical-h", ], ], 'selectors_dictionary' => [ 'start' => '--n-menu-title-justify-content: initial; --n-menu-title-justify-content-mobile: initial;', 'center' => '--n-menu-title-justify-content: center; --n-menu-title-justify-content-mobile: center;', 'end' => '--n-menu-title-justify-content: flex-end; --n-menu-title-justify-content-mobile: flex-end;', ], 'selectors' => [ '{{WRAPPER}}' => '{{VALUE}}', ], 'condition' => [ 'item_layout' => 'dropdown', ], ]); $this->add_control( 'submenu_indicator_title', [ 'type' => Controls_Manager::HEADING, 'label' => esc_html__( 'Dropdown Indicator', 'elementor-pro' ), 'separator' => 'before', ] ); $this->add_control( 'menu_item_icon', [ 'label' => esc_html__( 'Icon', 'elementor-pro' ), 'type' => Controls_Manager::ICONS, 'default' => [ 'value' => 'fas fa-caret-down', 'library' => 'fa-solid', ], 'recommended' => [ 'fa-solid' => [ 'chevron-down', 'angle-down', 'angle-double-down', 'caret-down', 'caret-square-down', ], 'fa-regular' => [ 'caret-square-down', ], ], 'skin' => 'inline', 'label_block' => false, ] ); $this->add_control( 'menu_item_icon_active', [ 'label' => esc_html__( 'Active Icon', 'elementor-pro' ), 'type' => Controls_Manager::ICONS, 'fa4compatibility' => 'icon_active', 'default' => [ 'value' => 'fas fa-caret-up', 'library' => 'fa-solid', ], 'recommended' => [ 'fa-solid' => [ 'chevron-up', 'angle-up', 'angle-double-up', 'caret-up', 'caret-square-up', ], 'fa-regular' => [ 'caret-square-up', ], ], 'skin' => 'inline', 'label_block' => false, ] ); $this->end_controls_section(); $this->start_controls_section( 'section_dropdown_effect', [ 'label' => esc_html__( 'Dropdown Effect', 'elementor-pro' ), ] ); $this->add_control( 'open_on', [ 'label' => esc_html__( 'Open On', 'elementor-pro' ), 'type' => Controls_Manager::SELECT, 'default' => 'hover', 'options' => [ 'hover' => esc_html__( 'Hover', 'elementor-pro' ), 'click' => esc_html__( 'Click', 'elementor-pro' ), ], 'condition' => [ 'item_layout' => 'horizontal', ], 'frontend_available' => true, ] ); $this->add_control( 'open_on_hover_description', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => esc_html__( 'The hover effect is inactive while editing. Preview your page to see it in action.', 'elementor-pro' ), 'content_classes' => 'elementor-control-field-description', 'condition' => [ 'item_layout' => 'horizontal', 'open_on' => 'hover', ], ] ); $this->add_control( 'open_animation', [ 'label' => esc_html__( 'Animation', 'elementor-pro' ), 'type' => Control_Menu_Dropdown_Animation::TYPE, 'default' => '', 'frontend_available' => true, ] ); $this->add_control( 'open_animation_duration', [ 'label' => esc_html__( 'Animation Duration', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 's', 'ms', 'custom' ], 'default' => [ 'unit' => 'ms', 'size' => 500, ], 'selectors' => [ '{{WRAPPER}}' => '--n-menu-open-animation-duration: {{SIZE}}{{UNIT}}', ], 'condition' => [ 'open_animation!' => '', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'menu_toggle_section', [ 'label' => esc_html__( 'Menu Toggle', 'elementor-pro' ), ] ); $this->add_responsive_control( 'toggle_align', [ 'label' => esc_html__( 'Alignment', 'elementor-pro' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'flex-start' => [ 'title' => esc_html__( 'Start', 'elementor-pro' ), 'icon' => "eicon-align-$start_logical-h", ], 'center' => [ 'title' => esc_html__( 'Center', 'elementor-pro' ), 'icon' => 'eicon-h-align-center', ], 'flex-end' => [ 'title' => esc_html__( 'End', 'elementor-pro' ), 'icon' => "eicon-align-$end_logical-h", ], ], 'selectors' => [ '{{WRAPPER}}' => '--n-menu-toggle-align: {{VALUE}}', ], ] ); $this->start_controls_tabs( 'menu_toggle_tabs_section' ); $this->start_controls_tab( 'menu_toggle_normal_options', [ 'label' => esc_html__( 'Normal', 'elementor-pro' ), ] ); $this->add_control( 'menu_toggle_icon_normal', [ 'label' => esc_html__( 'Icon', 'elementor-pro' ), 'type' => Controls_Manager::ICONS, 'fa4compatibility' => 'icon', 'skin' => 'inline', 'label_block' => false, 'skin_settings' => [ 'inline' => [ 'none' => [ 'label' => esc_html__( 'Default', 'elementor-pro' ), 'icon' => 'eicon-menu-bar', ], 'icon' => [ 'icon' => 'eicon-star', ], ], ], 'recommended' => [ 'fa-solid' => [ 'plus-square', 'plus', 'plus-circle', 'bars', ], 'fa-regular' => [ 'plus-square', ], ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'menu_toggle_hover_options', [ 'label' => esc_html__( 'Hover', 'elementor-pro' ), ] ); $this->add_control( 'menu_toggle_icon_hover_animation', [ 'label' => esc_html__( 'Hover Animation', 'elementor-pro' ), 'type' => Controls_Manager::HOVER_ANIMATION, 'frontend_available' => true, 'render_type' => 'template', ] ); $this->add_control( 'menu_toggle_animation_duration', [ 'label' => esc_html__( 'Animation Duration', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 's', 'ms', 'custom' ], 'render_type' => 'ui', 'default' => [ 'unit' => 'ms', 'size' => 500, ], 'selectors' => [ '{{WRAPPER}}' => '--n-menu-toggle-icon-wrapper-animation-duration: {{SIZE}}{{UNIT}}', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'menu_toggle_active_options', [ 'label' => esc_html__( 'Active', 'elementor-pro' ), ] ); $this->add_control( 'menu_toggle_icon_active', [ 'label' => esc_html__( 'Icon', 'elementor-pro' ), 'type' => Controls_Manager::ICONS, 'fa4compatibility' => 'icon', 'skin' => 'inline', 'label_block' => false, 'skin_settings' => [ 'inline' => [ 'none' => [ 'label' => esc_html__( 'Default', 'elementor-pro' ), 'icon' => 'eicon-close', ], 'icon' => [ 'icon' => 'eicon-star', ], ], ], 'recommended' => [ 'fa-solid' => [ 'window-close', 'times-circle', 'times', 'minus-square', 'minus-circle', 'minus', ], 'fa-regular' => [ 'window-close', 'times-circle', 'minus-square', ], ], ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); $this->start_controls_section( 'section_responsive_mega_menu', [ 'label' => esc_html__( 'Additional Settings', 'elementor-pro' ), ] ); $this->add_responsive_control( 'horizontal_scroll', [ 'label' => esc_html__( 'Horizontal Scroll', 'elementor-pro' ), 'type' => Controls_Manager::SELECT, 'description' => esc_html__( 'Note: Scroll menu items if they don’t fit into their parent container.', 'elementor-pro' ), 'options' => [ 'disable' => esc_html__( 'Disable', 'elementor-pro' ), 'enable' => esc_html__( 'Enable', 'elementor-pro' ), ], 'default' => 'disable', 'selectors_dictionary' => [ 'disable' => '--n-menu-heading-wrap: wrap; --n-menu-heading-overflow-x: initial;', 'enable' => '--n-menu-heading-wrap: nowrap; --n-menu-heading-overflow-x: scroll;', ], 'selectors' => [ '{{WRAPPER}}' => '{{VALUE}}', ], 'frontend_available' => true, 'condition' => [ 'item_layout' => 'horizontal', ], ] ); $dropdown_options = [ 'none' => esc_html__( 'None', 'elementor-pro' ), ]; $excluded_breakpoints = [ 'widescreen', ]; foreach ( Plugin::elementor()->breakpoints->get_active_breakpoints() as $breakpoint_key => $breakpoint_instance ) { // Exclude the larger breakpoints from the dropdown selector. if ( in_array( $breakpoint_key, $excluded_breakpoints, true ) ) { continue; } $dropdown_options[ $breakpoint_key ] = sprintf( / translators: 1: Breakpoint label, 2: `>` character, 3: Breakpoint value. / esc_html__( '%1$s (%2$s %3$dpx)', 'elementor-pro' ), $breakpoint_instance->get_label(), '>', $breakpoint_instance->get_value() ); } $this->add_control( 'breakpoint_selector', [ 'label' => esc_html__( 'Breakpoint', 'elementor-pro' ), 'type' => Controls_Manager::SELECT, 'description' => esc_html__( 'Note: Item layout will switch to dropdown on any screen smaller than the selected breakpoint.', 'elementor-pro' ), 'options' => $dropdown_options, 'default' => 'tablet', 'prefix_class' => 'e-n-menu-', 'frontend_available' => true, ] ); $this->end_controls_section(); $this->start_controls_section( 'section_menu_items_style', [ 'label' => esc_html__( 'Menu Items', 'elementor-pro' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'menu_item_title_space_between', [ 'label' => esc_html__( 'Space between Items', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'em', 'rem', 'custom' ], 'range' => [ 'px' => [ 'max' => 200, ], 'em' => [ 'max' => 20, ], 'rem' => [ 'max' => 20, ], ], 'default' => [ 'size' => 0, ], 'selectors' => [ '{{WRAPPER}}' => '--n-menu-title-space-between: {{SIZE}}{{UNIT}}', ], ] ); $this->add_responsive_control( 'menu_item_title_distance_from_content', [ 'label' => esc_html__( 'Distance from content', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], 'range' => [ 'px' => [ 'max' => 200, ], 'em' => [ 'max' => 20, ], 'rem' => [ 'max' => 20, ], ], 'default' => [ 'size' => 0, ], 'selectors' => [ '{{WRAPPER}}' => '--n-menu-title-distance-from-content: {{SIZE}}{{UNIT}}', ], 'frontend_available' => true, ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'menu_item_title_typography', 'global' => [ 'default' => Global_Typography::TYPOGRAPHY_ACCENT, ], 'selector' => $this->get_typography_selector( $heading_selector ), 'fields_options' => [ 'font_size' => [ 'selectors' => [ '{{WRAPPER}}' => '--n-menu-title-font-size: {{SIZE}}{{UNIT}}', ], ], 'line_height' => [ 'selectors' => [ '{{SELECTOR}}' => '--e-global-typography-{{external._id.VALUE}}-line-height: {{SIZE}}{{UNIT}}', '{{SELECTOR}}' => '--n-menu-title-line-height: {{SIZE}}', ], ], ], ] ); $this->start_controls_tabs( 'menu_item_title_style' ); $this->start_controls_tab( 'menu_item_title_normal', [ 'label' => esc_html__( 'Normal', 'elementor-pro' ), ] ); $this->add_control( 'menu_item_title_text_color_normal', [ 'label' => esc_html__( 'Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}}' => '--n-menu-title-color-normal: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Text_Shadow::get_type(), [ 'name' => 'menu_item_title_text_shadow_normal', 'selector' => "{$heading_selector} > .e-n-menu-item > .e-n-menu-title:not( .e-current ):not( :hover )", 'fields_options' => [ 'text_shadow_type' => [ 'label' => esc_html_x( 'Shadow', 'Text Shadow Control', 'elementor-pro' ), ], ], ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'menu_item_title_background_color', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], 'selector' => "{$heading_selector} > .e-n-menu-item > .e-n-menu-title:not( .e-current ):not( :hover )", 'fields_options' => [ 'color' => [ 'label' => esc_html__( 'Background Color', 'elementor-pro' ), ], ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'menu_item_title_box_border', 'selector' => "{$heading_selector} > .e-n-menu-item > .e-n-menu-title:not( .e-current ):not( :hover )", 'fields_options' => [ 'color' => [ 'label' => esc_html__( 'Border Color', 'elementor-pro' ), ], 'width' => [ 'label' => esc_html__( 'Border Width', 'elementor-pro' ), ], ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'menu_item_title_box_shadow', 'selector' => "{$heading_selector} > .e-n-menu-item > .e-n-menu-title:not( .e-current ):not( :hover )", ] ); $divider_condition = [ 'menu_divider' => 'yes', 'item_layout' => 'horizontal', ]; $this->add_control( 'menu_divider', [ 'label' => esc_html__( 'Divider', 'elementor-pro' ), 'type' => Controls_Manager::SWITCHER, 'label_off' => esc_html__( 'Off', 'elementor-pro' ), 'label_on' => esc_html__( 'On', 'elementor-pro' ), 'condition' => [ 'item_layout' => 'horizontal', ], 'selectors' => [ '{{WRAPPER}}' => '--n-menu-divider-content: "";', ], 'separator' => 'before', ] ); $this->add_control( 'menu_divider_style', [ 'label' => esc_html__( 'Style', 'elementor-pro' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'solid' => esc_html__( 'Solid', 'elementor-pro' ), 'double' => esc_html__( 'Double', 'elementor-pro' ), 'dotted' => esc_html__( 'Dotted', 'elementor-pro' ), 'dashed' => esc_html__( 'Dashed', 'elementor-pro' ), ], 'default' => 'solid', 'condition' => $divider_condition, 'selectors' => [ '{{WRAPPER}}' => '--n-menu-divider-style: {{VALUE}}', ], ] ); $this->add_control( 'menu_divider_width', [ 'label' => esc_html__( 'Width', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'range' => [ 'px' => [ 'min' => 1, 'max' => 20, ], 'em' => [ 'max' => 2, ], 'rem' => [ 'max' => 2, ], ], 'condition' => $divider_condition, 'selectors' => [ '{{WRAPPER}}' => '--n-menu-divider-width: {{SIZE}}{{UNIT}}', ], ] ); $this->add_control( 'menu_divider_height', [ 'label' => esc_html__( 'Height', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'custom' ], 'range' => [ 'px' => [ 'min' => 1, 'max' => 100, ], 'em' => [ 'max' => 10, ], 'rem' => [ 'max' => 10, ], '%' => [ 'min' => 1, 'max' => 100, ], ], 'condition' => $divider_condition, 'selectors' => [ '{{WRAPPER}}' => '--n-menu-divider-height: {{SIZE}}{{UNIT}}', ], ] ); $this->add_control( 'menu_divider_color', [ 'label' => esc_html__( 'Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'global' => [ 'default' => Global_Colors::COLOR_TEXT, ], 'condition' => $divider_condition, 'selectors' => [ '{{WRAPPER}}' => '--n-menu-divider-color: {{VALUE}}', ], ] ); $this->end_controls_tab(); // End Normal Tab $this->start_controls_tab( 'menu_item_title_hover', [ 'label' => esc_html__( 'Hover', 'elementor-pro' ), ] ); $this->add_control( 'menu_item_title_text_color_hover', [ 'label' => esc_html__( 'Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} ' => '--n-menu-title-color-hover: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Text_Shadow::get_type(), [ 'name' => 'menu_item_title_text_shadow_hover', 'selector' => "{$heading_selector} > .e-n-menu-item > .e-n-menu-title:hover:not( .e-current )", 'fields_options' => [ 'text_shadow_type' => [ 'label' => esc_html_x( 'Shadow', 'Text Shadow Control', 'elementor-pro' ), ], ], ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'menu_item_title_background_color_hover', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], 'selector' => "{$heading_selector} > .e-n-menu-item > .e-n-menu-title:hover:not( .e-current )", 'fields_options' => [ 'color' => [ 'label' => esc_html__( 'Background Color', 'elementor-pro' ), ], ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'menu_item_title_box_border_hover', 'selector' => "{$heading_selector} > .e-n-menu-item > .e-n-menu-title:hover:not( .e-current )", 'fields_options' => [ 'color' => [ 'label' => esc_html__( 'Border Color', 'elementor-pro' ), ], 'width' => [ 'label' => esc_html__( 'Border Width', 'elementor-pro' ), ], ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'menu_item_title_box_shadow_hover', 'selector' => "{$heading_selector} > .e-n-menu-item > .e-n-menu-title:hover:not( .e-current )", ] ); $this->add_control( 'hover_animation', [ 'label' => esc_html__( 'Hover Animation', 'elementor-pro' ), 'type' => Controls_Manager::HOVER_ANIMATION, ] ); $this->add_control( 'menu_item_title_transition_duration', [ 'label' => esc_html__( 'Transition Duration', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 's', 'ms', 'custom' ], 'selectors' => [ '{{WRAPPER}}' => '--n-menu-title-transition: {{SIZE}}{{UNIT}}', ], 'default' => [ 'unit' => 'ms', 'size' => 300, ], ] ); $this->end_controls_tab(); // End Hover Tab $this->start_controls_tab( 'menu_item_title_active', [ 'label' => esc_html__( 'Active', 'elementor-pro' ), ] ); $this->add_control( 'menu_item_title_text_color_active', [ 'label' => esc_html__( 'Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} ' => '--n-menu-title-color-active: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Text_Shadow::get_type(), [ 'name' => 'menu_item_title_text_shadow_active', 'selector' => "{$heading_selector} > .e-n-menu-item > .e-n-menu-title.e-current", 'fields_options' => [ 'text_shadow_type' => [ 'label' => esc_html_x( 'Shadow', 'Text Shadow Control', 'elementor-pro' ), ], ], ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'menu_item_title_background_color_active', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], 'selector' => "{$heading_selector} > .e-n-menu-item > .e-n-menu-title.e-current", 'fields_options' => [ 'color' => [ 'label' => esc_html__( 'Background Color', 'elementor-pro' ), ], ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'menu_item_title_box_border_active', 'selector' => "{$heading_selector} > .e-n-menu-item > .e-n-menu-title.e-current", 'fields_options' => [ 'color' => [ 'label' => esc_html__( 'Border Color', 'elementor-pro' ), ], 'width' => [ 'label' => esc_html__( 'Border Width', 'elementor-pro' ), ], ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'menu_item_title_box_shadow_active', 'selector' => "{$heading_selector} > .e-n-menu-item > .e-n-menu-title.e-current", ] ); $this->end_controls_tab(); // End Active Tab $this->end_controls_tabs(); $this->add_responsive_control( 'menu_item_title_border_radius', [ 'label' => esc_html__( 'Border Radius', 'elementor-pro' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], 'selectors' => [ "{$heading_selector} > .e-n-menu-item > .e-n-menu-title" => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'separator' => 'before', ] ); $this->add_responsive_control( 'menu_item_title_padding', [ 'label' => esc_html__( 'Padding', 'elementor-pro' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'selectors' => [ '{{WRAPPER}}' => '--n-menu-title-padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->end_controls_section(); // Icon Style $this->start_controls_section( 'icon_section_style', [ 'label' => esc_html__( 'Icon', 'elementor-pro' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $styling_block_start = '--n-menu-title-direction: column; --n-menu-icon-order: initial; --n-menu-icon-align-items: flex-end; --n-menu-title-justify-content: center; --n-menu-title-align-items-toggle: initial;'; $styling_inline_end = '--n-menu-title-direction: row; --n-menu-icon-order: 1; --n-menu-icon-align-items: initial; --n-menu-title-justify-content: initial; --n-menu-title-align-items-toggle: center;'; $styling_block_end = '--n-menu-title-direction: column; --n-menu-icon-order: 1; --n-menu-icon-align-items: flex-start; --n-menu-title-justify-content: center; --n-menu-title-align-items-toggle: initial;'; $styling_inline_start = '--n-menu-title-direction: row; --n-menu-icon-order: initial; --n-menu-icon-align-items: initial; --n-menu-title-justify-content: initial; --n-menu-title-align-items-toggle: center;'; $this->add_responsive_control( 'icon_position', [ 'label' => esc_html__( 'Position', 'elementor-pro' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'block-start' => [ 'title' => esc_html__( 'Above', 'elementor-pro' ), 'icon' => 'eicon-v-align-top', ], 'inline-end' => [ 'title' => esc_html__( 'After', 'elementor-pro' ), 'icon' => 'eicon-h-align-' . $end, ], 'block-end' => [ 'title' => esc_html__( 'Below', 'elementor-pro' ), 'icon' => 'eicon-v-align-bottom', ], 'inline-start' => [ 'title' => esc_html__( 'Before', 'elementor-pro' ), 'icon' => 'eicon-h-align-' . $start, ], ], 'selectors_dictionary' => [ 'block-start' => $styling_block_start, 'inline-end' => $styling_inline_end, 'block-end' => $styling_block_end, 'inline-start' => $styling_inline_start, // Styling duplication for BC reasons. 'top' => $styling_block_start, 'end' => $styling_inline_end, 'bottom' => $styling_block_end, 'start' => $styling_inline_start, ], 'selectors' => [ '{{WRAPPER}}' => '{{VALUE}}', ], ] ); $this->add_responsive_control( 'icon_size', [ 'label' => esc_html__( 'Size', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'max' => 100, ], 'em' => [ 'min' => 0, 'max' => 10, ], 'rem' => [ 'min' => 0, 'max' => 10, ], ], 'default' => [ 'unit' => 'px', 'size' => 16, ], 'size_units' => [ 'px', 'em', 'rem' ], 'selectors' => [ '{{WRAPPER}}' => '--n-menu-icon-size: {{SIZE}}{{UNIT}}', ], ] ); $this->add_responsive_control( 'icon_spacing', [ 'label' => esc_html__( 'Spacing', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'em', 'rem', 'vw', 'custom' ], 'range' => [ 'px' => [ 'max' => 400, ], 'em' => [ 'max' => 40, ], 'rem' => [ 'max' => 40, ], 'vw' => [ 'min' => 0, 'max' => 50, 'step' => 0.1, ], ], 'selectors' => [ '{{WRAPPER}}' => '--n-menu-icon-gap: {{SIZE}}{{UNIT}}', ], ] ); $this->start_controls_tabs( 'icon_style_states' ); $this->start_controls_tab( 'icon_section_normal', [ 'label' => esc_html__( 'Normal', 'elementor-pro' ), ] ); $this->add_control( 'icon_color', [ 'label' => esc_html__( 'Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}}' => '--n-menu-icon-color: {{VALUE}};', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'icon_section_hover', [ 'label' => esc_html__( 'Hover', 'elementor-pro' ), ] ); $this->add_control( 'icon_color_hover', [ 'label' => esc_html__( 'Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}}' => '--n-menu-icon-color-hover: {{VALUE}};', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'icon_section_active', [ 'label' => esc_html__( 'Active', 'elementor-pro' ), ] ); $this->add_control( 'icon_color_active', [ 'label' => esc_html__( 'Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}}' => '--n-menu-icon-color-active: {{VALUE}};', ], ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); $this->start_controls_section( 'section_dropdown_indicator_style', [ 'label' => esc_html__( 'Dropdown Indicator', 'elementor-pro' ), 'tab' => Controls_Manager::TAB_STYLE, 'conditions' => [ 'relation' => 'or', 'terms' => [ [ 'name' => 'menu_item_icon[value]', 'operator' => '!==', 'value' => '', ], [ 'name' => 'menu_item_icon_active[value]', 'operator' => '!==', 'value' => '', ], ], ], ] ); $this->add_responsive_control( 'style_dropdown_indicator_size', [ 'label' => esc_html__( 'Size', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], 'selectors' => [ '{{WRAPPER}}' => '--n-menu-dropdown-indicator-size: {{SIZE}}{{UNIT}}', ], ] ); $this->add_responsive_control( 'style_dropdown_indicator_rotate', [ 'label' => esc_html__( 'Rotate', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'deg', 'grad', 'rad', 'turn', 'custom' ], 'default' => [ 'unit' => 'deg', ], 'tablet_default' => [ 'unit' => 'deg', ], 'mobile_default' => [ 'unit' => 'deg', ], 'selectors' => [ '{{WRAPPER}}' => '--n-menu-dropdown-indicator-rotate: rotate({{SIZE}}{{UNIT}})', ], ] ); $this->add_responsive_control( 'style_dropdown_indicator_space', [ 'label' => esc_html__( 'Space', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'em', 'rem', 'custom' ], 'selectors' => [ '{{WRAPPER}}' => '--n-menu-dropdown-indicator-space: {{SIZE}}{{UNIT}}', ], ] ); $this->start_controls_tabs( 'style_menu_dropdown_indicator' ); foreach ( array( 'normal', 'hover', 'active' ) as $state ) { $this->add_dropdown_indicator_state_based_style_controls( $state ); } $this->end_controls_tabs(); $this->end_controls_section(); $this->start_controls_section( 'section_menu_toggle_style', [ 'label' => esc_html__( 'Menu Toggle', 'elementor-pro' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'style_menu_toggle_icon_heading', [ 'type' => Controls_Manager::HEADING, 'label' => esc_html__( 'Toggle Icon', 'elementor-pro' ), ] ); $this->add_responsive_control( 'style_menu_toggle_icon_size', [ 'label' => esc_html__( 'Size', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], 'default' => [ 'size' => 20, ], 'range' => [ 'px' => [ 'max' => 200, ], 'em' => [ 'max' => 20, ], 'rem' => [ 'max' => 20, ], ], 'selectors' => [ '{{WRAPPER}}' => '--n-menu-toggle-icon-size: {{SIZE}}{{UNIT}}', ], ] ); $this->start_controls_tabs( 'style_menu_toggle_tabs' ); $this->start_controls_tab( 'style_menu_toggle_tab_normal', [ 'label' => esc_html__( 'Normal', 'elementor-pro' ), ] ); $this->add_control( 'menu_toggle_icon_color_normal', [ 'label' => esc_html__( 'Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'render_type' => 'ui', 'selectors' => [ '{{WRAPPER}}' => '--n-menu-toggle-icon-color: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'menu_toggle_icon_background_color_normal', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], 'selector' => $this->get_control_selector_class( 'menu_toggle_icon', '[aria-expanded="false"]:not( :hover )' ), 'fields_options' => [ 'color' => [ 'label' => esc_html__( 'Background Color', 'elementor-pro' ), 'selectors' => [ '{{SELECTOR}}' => 'background: {{VALUE}}', ], ], ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'menu_toggle_icon_border_normal', 'selector' => $this->get_control_selector_class( 'menu_toggle_icon', '[aria-expanded="false"]:not( :hover )' ), 'fields_options' => [ 'color' => [ 'label' => esc_html__( 'Border Color', 'elementor-pro' ), ], 'width' => [ 'label' => esc_html__( 'Border Width', 'elementor-pro' ), ], ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'menu_toggle_icon_box_shadow_normal', 'selector' => $this->get_control_selector_class( 'menu_toggle_icon', '[aria-expanded="false"]:not( :hover )' ), ] ); $this->end_controls_tab(); $this->start_controls_tab( 'style_menu_toggle_hover', [ 'label' => esc_html__( 'Hover', 'elementor-pro' ), ] ); $this->add_control( 'menu_toggle_icon_color_hover', [ 'label' => esc_html__( 'Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'render_type' => 'ui', 'selectors' => [ '{{WRAPPER}}' => '--n-menu-toggle-icon-color-hover: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'menu_toggle_icon_background_color_hover', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], 'selector' => $this->get_control_selector_class( 'menu_toggle_icon', ':hover:is( [aria-expanded="true"], [aria-expanded="false"] )' ), 'fields_options' => [ 'color' => [ 'label' => esc_html__( 'Background Color', 'elementor-pro' ), 'selectors' => [ '{{SELECTOR}}' => 'background: {{VALUE}}', ], ], ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'menu_toggle_icon_border_hover', 'selector' => $this->get_control_selector_class( 'menu_toggle_icon', ':hover:is( [aria-expanded="true"], [aria-expanded="false"] )' ), 'fields_options' => [ 'color' => [ 'label' => esc_html__( 'Border Color', 'elementor-pro' ), ], 'width' => [ 'label' => esc_html__( 'Border Width', 'elementor-pro' ), ], ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'menu_toggle_icon_box_shadow_hover', 'selector' => $this->get_control_selector_class( 'menu_toggle_icon', ':hover:is( [aria-expanded="true"], [aria-expanded="false"] )' ), ] ); $this->add_control( 'menu_toggle_icon_animation_duration', [ 'label' => esc_html__( 'Animation Duration', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 's', 'ms', 'custom' ], 'default' => [ 'unit' => 'ms', 'size' => 500, ], 'selectors' => [ '{{WRAPPER}}' => '--n-menu-toggle-icon-hover-duration: {{SIZE}}{{UNIT}}', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'style_menu_toggle_active', [ 'label' => esc_html__( 'Active', 'elementor-pro' ), ] ); $this->add_control( 'menu_toggle_icon_color_active', [ 'label' => esc_html__( 'Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'render_type' => 'ui', 'selectors' => [ '{{WRAPPER}}' => '--n-menu-toggle-icon-color-active: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'menu_toggle_icon_background_color_active', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], 'selector' => $this->get_control_selector_class( 'menu_toggle_icon', '[aria-expanded="true"]' ), 'fields_options' => [ 'color' => [ 'label' => esc_html__( 'Background Color', 'elementor-pro' ), 'selectors' => [ '{{SELECTOR}}' => 'background: {{VALUE}}', ], ], ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'menu_toggle_icon_border_active', 'selector' => $this->get_control_selector_class( 'menu_toggle_icon', '[aria-expanded="true"]' ), 'fields_options' => [ 'color' => [ 'label' => esc_html__( 'Border Color', 'elementor-pro' ), ], 'width' => [ 'label' => esc_html__( 'Border Width', 'elementor-pro' ), ], ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'menu_toggle_icon_box_shadow_active', 'selector' => $this->get_control_selector_class( 'menu_toggle_icon', '[aria-expanded="true"]' ), ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->add_responsive_control( 'menu_toggle_icon_border_radius', [ 'label' => esc_html__( 'Border Radius', 'elementor-pro' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], 'selectors' => [ '{{WRAPPER}}' => '--n-menu-toggle-icon-border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'separator' => 'before', ] ); $this->add_responsive_control( 'menu_toggle_icon__padding', [ 'label' => esc_html__( 'Padding', 'elementor-pro' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'selectors' => [ '{{WRAPPER}}' => '--n-menu-toggle-icon-padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'menu_toggle_icon_distance_from_dropdown', [ 'label' => esc_html__( 'Distance from dropdown', 'elementor-pro' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'em', 'rem', 'custom' ], 'range' => [ 'px' => [ 'max' => 100, ], 'em' => [ 'max' => 10, ], 'rem' => [ 'max' => 10, ], ], 'default' => [ 'size' => 0, ], 'placeholder' => [ 'size' => 0, ], 'selectors' => [ '{{WRAPPER}}' => '--n-menu-toggle-icon-distance-from-dropdown: {{SIZE}}{{UNIT}}', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'section_content_style', [ 'label' => esc_html__( 'Content', 'elementor-pro' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'content_background_color', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], 'selector' => $this->get_control_selector_class( 'active_content_container' ), 'fields_options' => [ 'color' => [ 'label' => esc_html__( 'Background Color', 'elementor-pro' ), ], ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'content_border', 'selector' => $this->get_control_selector_class( 'active_content_container' ), 'fields_options' => [ 'color' => [ 'label' => esc_html__( 'Border Color', 'elementor-pro' ), ], 'width' => [ 'label' => esc_html__( 'Border Width', 'elementor-pro' ), ], ], ] ); $this->add_responsive_control( 'content_border_radius', [ 'label' => esc_html__( 'Border Radius', 'elementor-pro' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], 'selectors' => [ $this->get_control_selector_class( 'active_content_container' ) => '--border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'content_shadow', 'selector' => $this->get_control_selector_class( 'active_content_container' ), ] ); $this->add_responsive_control( 'content_padding', [ 'label' => esc_html__( 'Padding', 'elementor-pro' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'selectors' => [ $this->get_control_selector_class( 'active_content_container' ) => '--padding-top: {{TOP}}{{UNIT}}; --padding-right: {{RIGHT}}{{UNIT}}; --padding-bottom: {{BOTTOM}}{{UNIT}}; --padding-left: {{LEFT}}{{UNIT}};', // Todo: Remove in version 3.21.0: https://elementor.atlassian.net/browse/ED-11888. // Remove together with support for physical properties inside the container widget. ':where( [data-core-v316-plus="true"] .elementor-element.elementor-widget-n-menu > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-content ) > .e-con' => "--padding-block-start: {{TOP}}{{UNIT}}; --padding-inline-end: $logical_dimensions_inline_end; --padding-block-end: {{BOTTOM}}{{UNIT}}; --padding-inline-start: $logical_dimensions_inline_start;", ], 'separator' => 'before', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_dropdown_menu_style', [ 'label' => esc_html__( 'Dropdown Menu', 'elementor-pro' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'dropdown_menu_items_title', [ 'label' => esc_html__( 'Menu Items', 'elementor-pro' ), 'type' => Controls_Manager::HEADING, ] ); $this->add_control( 'dropdown_menu_items_description', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => esc_html__( 'Styles apply to items when the menu switches to dropdown layout', 'elementor-pro' ), 'content_classes' => 'elementor-control-field-description', ] ); $this->start_controls_tabs( 'menu_dropdown_states_section' ); $this->start_controls_tab( 'normal_menu_dropdown_states', [ 'label' => esc_html__( 'Normal', 'elementor-pro' ), ] ); $this->add_control( 'dropdown_menu_item_text_color_normal', [ 'label' => esc_html__( 'Text Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}}' => '--n-menu-title-normal-color-dropdown: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'dropdown_menu_item_background_color_normal', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], 'selector' => '{{WRAPPER}} > .elementor-widget-container > .e-n-menu[data-layout="dropdown"] > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:not( .e-current )', 'fields_options' => [ 'color' => [ 'label' => esc_html__( 'Background Color', 'elementor-pro' ), 'selectors' => [ '{{SELECTOR}}' => 'background: {{VALUE}}', ], ], ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'dropdown_menu_item_box_shadow_normal', 'selector' => '{{WRAPPER}} > .elementor-widget-container > .e-n-menu[data-layout="dropdown"] > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:not( .e-current )', ] ); $this->end_controls_tab(); // Normal tab end $this->start_controls_tab( 'active_menu_dropdown_states', [ 'label' => esc_html__( 'Active', 'elementor-pro' ), ] ); $this->add_control( 'dropdown_menu_item_text_color_active', [ 'label' => esc_html__( 'Text Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}}' => '--n-menu-title-active-color-dropdown: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'dropdown_menu_item_background_color_active', 'types' => [ 'classic', 'gradient' ], 'exclude' => [ 'image' ], 'selector' => '{{WRAPPER}} > .elementor-widget-container > .e-n-menu[data-layout="dropdown"] > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title.e-current', 'fields_options' => [ 'color' => [ 'label' => esc_html__( 'Background Color', 'elementor-pro' ), ], ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'dropdown_menu_item_box_shadow_active', 'selector' => '{{WRAPPER}} > .elementor-widget-container > .e-n-menu[data-layout="dropdown"] > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title.e-current', ] ); $this->end_controls_tab(); // Active tab end $this->end_controls_tabs(); $this->add_control( 'menu_dropdown_box_title', [ 'label' => esc_html__( 'Dropdown Box', 'elementor-pro' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'menu_dropdown_box_description', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => esc_html__( 'Style the dropdown box that contains menu items.', 'elementor-pro' ), 'content_classes' => 'elementor-control-field-description', ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'menu_dropdown_box_border', 'fields_options' => [ 'border' => [ 'selectors' => [ '{{WRAPPER}}' => '--n-menu-dropdown-content-box-border-style: {{VALUE}}', ], ], 'color' => [ 'label' => esc_html__( 'Border Color', 'elementor-pro' ), 'selectors' => [ '{{WRAPPER}}' => '--n-menu-dropdown-content-box-border-color: {{VALUE}}', ], ], 'width' => [ 'label' => esc_html__( 'Border Width', 'elementor-pro' ), 'selectors' => [ '{{WRAPPER}}' => "--n-menu-dropdown-content-box-border-block-start-width: {{TOP}}{{UNIT}}; --n-menu-dropdown-content-box-border-inline-end-width: $logical_dimensions_inline_end; --n-menu-dropdown-content-box-border-block-end-width: {{BOTTOM}}{{UNIT}}; --n-menu-dropdown-content-box-border-inline-start-width: $logical_dimensions_inline_start;", ], ], ], ] ); $this->add_control( 'menu_dropdown_box_border_radius', [ 'label' => esc_html__( 'Border Radius', 'elementor-pro' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], 'selectors' => [ '{{WRAPPER}}' => '--n-menu-dropdown-content-box-border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'menu_dropdown_box_shadow', 'fields_options' => [ 'box_shadow' => [ 'selectors' => [ '{{WRAPPER}}' => '--n-menu-dropdown-content-box-shadow-horizontal: {{HORIZONTAL}}px; --n-menu-dropdown-content-box-shadow-vertical: {{VERTICAL}}px; --n-menu-dropdown-content-box-shadow-blur: {{BLUR}}px; --n-menu-dropdown-content-box-shadow-spread: {{SPREAD}}px; --n-menu-dropdown-content-box-shadow-color: {{COLOR}}; --n-menu-dropdown-content-box-shadow-position: {{box_shadow_position.VALUE}};', ], ], ], ] ); $this->end_controls_section(); } protected function render() { $settings = $this->get_settings_for_display(); $menu_titles = ''; $menu_containers = ''; $this->add_render_attribute( 'e-n-menu', [ 'class' => 'e-n-menu', 'data-widget-number' => $this->get_widget_number(), ] ); if ( $settings['menu_name'] ) { $this->add_render_attribute( 'e-n-menu', 'aria-label', $settings['menu_name'] ); } foreach ( $settings['menu_items'] as $index => $item ) { $menu_titles .= $this->render_menu_titles_html( $index, $item ); } ?> <nav <?php $this->print_render_attribute_string( 'e-n-menu' ); ?>> <?php $this->render_menu_toggle( $settings ); ?> <div <?php $this->render_menu_wrapper_attributes(); ?>> <ul class="e-n-menu-heading"> <?php echo $menu_titles; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> </ul> </div> </nav> <?php } protected function render_menu_wrapper_attributes() { $this->add_render_attribute( 'e-n-menu-wrapper', [ 'class' => 'e-n-menu-wrapper', 'id' => 'menubar-' . $this->get_widget_number(), 'aria-labelledby' => 'menu-toggle-' . $this->get_widget_number(), ] ); $this->print_render_attribute_string( 'e-n-menu-wrapper' ); } protected function render_menu_toggle( $settings ) { $menu_toggle_hover_animation = ! empty( $settings['menu_toggle_icon_hover_animation'] ) ? ' elementor-animation-' . $settings['menu_toggle_icon_hover_animation'] : ''; $this->add_render_attribute( 'menu-toggle', [ 'class' => 'e-n-menu-toggle' . $menu_toggle_hover_animation, 'id' => 'menu-toggle-' . $this->get_widget_number(), 'aria-haspopup' => 'true', 'aria-expanded' => 'false', 'aria-controls' => 'menubar-' . $this->get_widget_number(), 'aria-label' => esc_html__( 'Menu Toggle', 'elementor-pro' ), ] ); $open_class = 'e-n-menu-toggle-icon e-open'; $close_class = 'e-n-menu-toggle-icon e-close'; $normal_icon = ! empty( $settings['menu_toggle_icon_normal']['value'] ) ? $settings['menu_toggle_icon_normal'] : [ 'library' => 'eicons', 'value' => 'eicon-menu-bar', ]; $active_icon = ! empty( $settings['menu_toggle_icon_active']['value'] ) ? $settings['menu_toggle_icon_active'] : [ 'library' => 'eicons', 'value' => 'eicon-close', ]; ?> <button <?php $this->print_render_attribute_string( 'menu-toggle' ); ?>> <span class="<?php echo esc_attr( $open_class ); ?>"> <?php Icons_Manager::render_icon( $normal_icon ); ?> </span> <span class="<?php echo esc_attr( $close_class ); ?>"> <?php Icons_Manager::render_icon( $active_icon ); ?> </span> </button> <?php } protected function render_menu_toggle_template() { ?> <# const menuToggleKey = 'e-n-menu-toggle-' + elementUid, iconHoverAnimation = !! settings.menu_toggle_icon_hover_animation ? 'elementor-animation-' + settings.menu_toggle_icon_hover_animation : '', openClass = 'e-n-menu-toggle-icon e-open', closeClass = 'e-n-menu-toggle-icon e-close', iconNormal = !! settings.menu_toggle_icon_normal.value ? settings.menu_toggle_icon_normal : '', iconActive = !! settings.menu_toggle_icon_active.value ? settings.menu_toggle_icon_active : ''; view.addRenderAttribute( menuToggleKey, { 'class': [ 'e-n-menu-toggle', 'elementor-clickable', iconHoverAnimation ], 'id': 'menu-toggle-' + elementUid, 'aria-haspopup': 'true', 'aria-expanded': 'false', 'aria-controls': 'menubar-' + elementUid, 'aria-label': '<?php echo esc_html__( 'Menu Toggle', 'elementor-pro' ); ?>', } ); #> <button {{{ view.getRenderAttributeString( menuToggleKey ) }}}> <span class="{{{ openClass }}}"> <# if ( !! iconNormal ) { #> {{{ elementor.helpers.renderIcon( view, iconNormal, {}, 'i', 'object' ).value }}} <# } else { #> <?php Icons_Manager::render_icon( [ 'library' => 'eicons', 'value' => 'eicon-menu-bar', ] ); ?> <# } #> </span> <span class="{{{ closeClass }}}"> <# if ( !! iconActive ) { #> {{{ elementor.helpers.renderIcon( view, iconActive, {}, 'i', 'object' ).value }}} <# } else { #> <?php Icons_Manager::render_icon( [ 'library' => 'eicons', 'value' => 'eicon-close', ] ); ?> <# } #> </span> </button> <?php } protected function merge_menu_title_classes( $index, $item, $classes ) { $current_class = $this->get_current_menu_item_class( $item['item_link']['url'] ); $items_open_on_click = 'click' === $this->get_settings_for_display( 'open_on' ); if ( ! empty( $current_class ) ) { $classes[] = $current_class; } if ( $items_open_on_click && $this->item_has_dropdown_with_content( $index, $this->get_children(), 'yes' === $item['item_dropdown_content'] ) ) { $classes[] = 'e-click'; } return array_filter( $classes ); } protected function render_menu_titles_html( $index, $item ) { $settings = $this->get_settings_for_display(); $is_focusable_class = 'yes' === $item['item_dropdown_content'] ? 'e-focus' : ''; $item_class = $this->merge_menu_title_classes( $index, $item, [ 'e-n-menu-title' ] ); $item_dropdown_class = [ 'e-n-menu-dropdown-icon' ]; if ( ! empty( $is_focusable_class ) ) { $item_dropdown_class[] = $is_focusable_class; } $icon_html = Icons_Manager::try_get_icon_html( $settings['menu_item_icon'], [ 'aria-hidden' => 'true' ] ); $icon_active_html = Icons_Manager::try_get_icon_html( $settings['menu_item_icon_active'], [ 'aria-hidden' => 'true' ] ); $display_index = $index + 1; $has_dropdown_content = 'yes' === $settings['menu_items'][ $index ]['item_dropdown_content']; $menu_item_id = empty( $item['element_id'] ) ? 'e-n-menu-title-' . $this->get_widget_number() . $display_index : $item['element_id']; $item_dropdown_id = 'e-n-menu-dropdown-icon-' . $this->get_widget_number() . $display_index; $key = $this->get_repeater_setting_key( 'item_title', 'menu_items', $display_index ); $menu_item = $settings['menu_items'][ $index ]; $menu_item_icon = Icons_Manager::try_get_icon_html( $menu_item['item_icon'], [ 'aria-hidden' => 'true' ] ); $menu_item_active_icon = $this->is_active_icon_exist( $menu_item ) ? Icons_Manager::try_get_icon_html( $item['item_icon_active'], [ 'aria-hidden' => 'true' ] ) : $menu_item_icon; if ( ! empty( $settings['hover_animation'] ) ) { $item_class[] = 'elementor-animation-' . $settings['hover_animation']; } $this->add_attributes_to_item( $key, $item_class, $menu_item_id, $display_index ); $this->add_attributes_to_item_dropdown( $key . '_link', $item_dropdown_class, $item_dropdown_id, $display_index, $has_dropdown_content, $item['item_title'] ); ob_start(); ?> <li class="e-n-menu-item"> <div <?php echo wp_kses_post( $this->get_render_attribute_string( $key ) ); ?>> <?php echo $this->get_title_container_opening_tag( $item, $item['item_link']['url'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> <?php if ( $menu_item_icon ) { ?> <span class="e-n-menu-icon"> <span class="icon-active"><?php echo $menu_item_active_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span> <span class="icon-inactive"><?php echo $menu_item_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span> </span> <?php } ?> <span class="e-n-menu-title-text"> <?php echo $item['item_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> </span> <?php echo $this->get_title_container_closing_tag( $item['item_link']['url'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> <?php if ( $has_dropdown_content ) { ?> <button <?php echo wp_kses_post( $this->get_render_attribute_string( $key . '_link' ) ); ?> > <span class="e-n-menu-dropdown-icon-opened"> <?php echo $icon_active_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> <span class="elementor-screen-only"><?php printf( esc_html__( 'Close %s', 'elementor-pro' ), $item['item_title'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span> </span> <span class="e-n-menu-dropdown-icon-closed"> <?php echo $icon_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> <span class="elementor-screen-only"><?php printf( esc_html__( 'Open %s', 'elementor-pro' ), $item['item_title'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span> </span> </button> <?php } ?> </div> <?php if ( $has_dropdown_content ) { ?> <div class="e-n-menu-content"> <?php $item_dropdown_id = 'e-n-menu-dropdown-icon-' . $this->get_widget_number() . ( $index + 1 ); echo $this->print_child( $index, 'yes' === $item['item_dropdown_content'], $item_dropdown_id ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> </div> <?php } ?> </li> <?php return ob_get_clean(); } public function add_attributes_to_item( $key, $classes, $menu_item_id, $display_index ) { $this->add_render_attribute( $key, [ 'id' => $menu_item_id, 'class' => $classes, ] ); } public function add_attributes_to_item_dropdown( $key, $classes, $item_dropdown_id, $display_index, $has_dropdown_content = false, $title = '' ) { $this->add_render_attribute( $key, [ 'id' => $item_dropdown_id, 'class' => $classes, 'data-tab-index' => $display_index, 'aria-haspopup' => $has_dropdown_content ? 'true' : 'false', 'aria-expanded' => 'false', 'aria-controls' => 'e-n-menu-content-' . $this->get_widget_number() . $display_index, ] ); } protected function get_current_menu_item_class( $menu_link_url ) { $menu_link_url = trim( $menu_link_url ); if ( str_contains( $menu_link_url, '#' ) ) { return 'e-anchor'; } $permalink_url = $this->get_permalink_for_current_page(); if ( empty( $menu_link_url ) \|\| empty( $permalink_url ) ) { return ''; } $permalink_array = $this->parse_url( $permalink_url ); $menu_item_url_array = $this->parse_url( $menu_link_url ); $has_equal_urls = $permalink_array === $menu_item_url_array; return $has_equal_urls ? 'e-current' : ''; } /* * Print the content area. * * @param int $index * @param boolean $has_dropdown_content * @param string $menu_item_id / public function print_child( $index, $has_dropdown_content = false, $menu_item_id = '' ) { $children = $this->get_children(); $menu_index = $index + 1; $child_ids = []; foreach ( $children as $child ) { $child_ids[] = $child->get_id(); } $add_attribute_to_container = function ( $should_render, $container ) use ( $menu_item_id, $menu_index, $child_ids ) { if ( in_array( $container->get_id(), $child_ids ) ) { $this->set_container_attributes( $container, $menu_index, $menu_item_id ); } return $should_render; }; if ( $this->item_has_dropdown_with_content( $index, $children, $has_dropdown_content ) ) { add_filter( 'elementor/frontend/container/should_render', $add_attribute_to_container, 10, 3 ); $children[ $index ]->print_element(); remove_filter( 'elementor/frontend/container/should_render', $add_attribute_to_container ); } } protected function set_container_attributes( $container, $menu_index, $menu_item_id ) { $container->add_render_attribute( '_wrapper', [ 'id' => 'e-n-menu-content-' . $this->get_widget_number() . $menu_index, 'data-tab-index' => $menu_index, 'aria-labelledby' => $menu_item_id, ] ); } protected function item_has_dropdown_with_content( $index, $children, $has_dropdown_content = false ) { $data = ! empty( $children[ $index ] ) ? $children[ $index ]->get_data() : []; $elements = empty( $data['elements'] ) ? [] : $data['elements']; return ! empty( $children[ $index ] ) && ! empty( $elements ) && $has_dropdown_content; } private function get_title_container_opening_tag( $item, $url ) { $title_container_id = 'e-n-menu-title-container-' . $item['_id']; $container_classes = [ 'e-n-menu-title-container' ]; if ( ! empty( $url ) ) { array_push( $container_classes, 'e-focus', 'e-link' ); } $this->remove_render_attribute( $title_container_id ); $this->add_render_attribute( $title_container_id, [ 'class' => $container_classes, ] ); $this->add_link_attributes( $title_container_id, $item['item_link'] ); $current_class = $this->get_current_menu_item_class( $url ); if ( ! empty( $current_class ) ) { $this->add_render_attribute( $title_container_id, 'aria-current', 'page' ); } $container_attributes = $this->get_render_attribute_string( $title_container_id ); if ( ! empty( $url ) ) { $opening_tag = '<a ' . $container_attributes . '>'; } else { $opening_tag = '<div ' . $container_attributes . '>'; } return $opening_tag; } private function get_title_container_closing_tag( $url ) { return ! empty( $url ) ? '</a>' : '</div>'; } /* * @param $item * @return bool / private function is_active_icon_exist( $item ) { return array_key_exists( 'item_icon_active', $item ) && ! empty( $item['item_icon_active'] ) && ! empty( $item['item_icon_active']['value'] ); } /* * @param string $state * @param $css_prefix * @return void */ private function add_dropdown_indicator_state_based_style_controls( string $state ) { $label = esc_html__( 'Normal', 'elementor-pro' ); $selector = '--n-menu-dropdown-indicator-color-normal: {{VALUE}};'; if ( 'hover' === $state ) { $label = esc_html__( 'Hover', 'elementor-pro' ); $selector = '--n-menu-dropdown-indicator-color-hover: {{VALUE}};'; } if ( 'active' === $state ) { $label = esc_html__( 'Active', 'elementor-pro' ); $selector = '--n-menu-dropdown-indicator-color-active: {{VALUE}};'; } $this->start_controls_tab('style_menu_dropdown_indicator_' . $state, [ 'label' => $label, ] ); $this->add_control( 'menu_dropdown_indicator_color_' . $state, [ 'label' => esc_html__( 'Color', 'elementor-pro' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}}' => $selector, ], ] ); $this->end_controls_tab(); } // Any update in this function should also be updated in the content_template_single_repeater_item function too protected function content_template() { ?> <# if ( ! settings['menu_items'] ) { return; } const menuItemIcon = elementor.helpers.renderIcon( view, settings['menu_item_icon'], { 'aria-hidden': true }, 'i' , 'object' ) ?? '', menuItemIconActive = elementor.helpers.renderIcon( view, settings['menu_item_icon_active'], { 'aria-hidden': true }, 'i' , 'object' ) ?? '', elementUid = view.getIDInt().toString().substr( 0, 3 ), permalinkUrl = '<?php echo esc_url( $this->get_permalink_for_current_page() ); ?>'; view.addRenderAttribute( 'e-n-menu', { 'class': 'e-n-menu', 'data-widget-number': elementUid, } ); if ( '' !== settings.menu_name ) { view.addRenderAttribute( 'e-n-menu', 'aria-label', settings.menu_name ); } #> <nav {{{ view.getRenderAttributeString( 'e-n-menu' ) }}}> <?php $this->render_menu_toggle_template(); ?> <div <?php $this->render_menu_wrapper_attributes(); ?>> <ul class="e-n-menu-heading"> <# _.each( settings['menu_items'], function( item, index ) { const menuItemCount = index + 1, menuItemUid = elementUid + menuItemCount, menuItemWrapperKey = menuItemUid, menuItemTitleKey = 'menu-title-' + menuItemUid, menuItemTitleContainerLinkKey = 'e-n-menu-title-container-' + menuItemUid, menuItemDropdownIconKey = 'e-n-menu-dropdown-icon-' + menuItemUid, menuItemIconKey = 'menu-icon-' + menuItemUid, menuIcon = elementor.helpers.renderIcon( view, item.item_icon, { 'aria-hidden': true }, 'i' , 'object' ) ?? '', menuIconActive = '' === item.item_icon_active.value ? menuIcon : elementor.helpers.renderIcon( view, item.item_icon_active, { 'aria-hidden': true }, 'i' , 'object' ), menuItemLink = 'string' === typeof item['item_link'] ? item['item_link'] : item['item_link']['url'], hasDropdownContent = 'yes' === item['item_dropdown_content'], currentPageClass = elementorPro.modules.megaMenu.getCurrentMenuItemClass( menuItemLink, permalinkUrl ), dropdownFocusClass = hasDropdownContent ? 'e-focus' : '', menuItemClassList = ['e-n-menu-title']; let menuItemId = 'e-n-menu-title-' + menuItemUid; settings['hover_animation'] && menuItemClassList.push( `elementor-animation-${ settings['hover_animation'] }` ); if ( '' !== item.element_id ) { menuItemId = item.element_id; } if ( ! hasDropdownContent ) { menuItemClassList.push( 'link-only' ); } else { menuItemClassList.push( 'e-click' ); } if ( !! currentPageClass ) { menuItemClassList.push( currentPageClass ); } view.addRenderAttribute( menuItemWrapperKey, { 'id': menuItemId, 'class': menuItemClassList, } ); view.addRenderAttribute( menuItemTitleKey, { 'class': [ 'e-n-menu-title-text' ], 'data-binding-type': 'repeater-item', 'data-binding-repeater-name': 'menu_items', 'data-binding-setting': ['item_title'], 'data-binding-index': menuItemCount, 'data-binding-dynamic': 'true', 'data-current-url': permalinkUrl, } ); const menuItemContainerClasses = [ 'e-n-menu-title-container' ]; if ( !! item.item_link.url ) { menuItemContainerClasses.push( 'e-link', 'e-focus' ); } view.addRenderAttribute( menuItemTitleContainerLinkKey, { 'class': menuItemContainerClasses, 'href': elementor.helpers.sanitizeUrl( item.item_link.url ), 'aria-current': 'page', } ); view.addRenderAttribute( menuItemDropdownIconKey, { 'id': 'e-n-menu-dropdown-icon-' + menuItemUid, 'class': [ 'e-n-menu-dropdown-icon', 'e-focus' ], 'data-tab-index': menuItemCount, 'aria-haspopup': hasDropdownContent ? 'true' : 'false', 'aria-expanded': 'false', 'aria-controls': 'e-n-menu-content-' + menuItemUid, } ); #> <li class="e-n-menu-item"> <div {{{ view.getRenderAttributeString( menuItemWrapperKey ) }}}> <# if ( menuItemLink ) { #> <a {{{ view.getRenderAttributeString( menuItemTitleContainerLinkKey ) }}}> <# } else { #> <div {{{ view.getRenderAttributeString( menuItemTitleContainerLinkKey ) }}}> <# } #> <# if (menuIcon.value) { #> <span class="e-n-menu-icon"> <span class="icon-active" >{{{ menuIconActive.value }}}</span> <span class="icon-inactive">{{{ menuIcon.value }}}</span> </span> <# } #> <span {{{ view.getRenderAttributeString( menuItemTitleKey ) }}}>{{{ item.item_title }}}</span> <# if ( menuItemLink ) { #> </a> <# } else { #> </div> <# } #> <# if ( hasDropdownContent ) { #> <button {{{ view.getRenderAttributeString( menuItemDropdownIconKey ) }}}> <span class="e-n-menu-dropdown-icon-opened"> {{{ menuItemIconActive.value }}} <span class="elementor-screen-only"><?php echo esc_html__( 'Close ', 'elementor-pro' ); ?>{{{ item.item_title }}}</span> </span> <span class="e-n-menu-dropdown-icon-closed"> {{{ menuItemIcon.value }}} <span class="elementor-screen-only"><?php echo esc_html__( 'Open ', 'elementor-pro' ); ?>{{{ item.item_title }}}</span> </span> </button> <# } #> </div> <div class="e-n-menu-content"></div> </li> <# } ); #> </ul> </div> </nav> <?php } protected function get_initial_config(): array { return array_merge( parent::get_initial_config(), [ 'support_improved_repeaters' => true, 'target_container' => [ '.e-n-menu-heading' ], 'node' => 'li', 'is_interlaced' => true, ] ); } // Any update in this function should be updated also in the content_template function too protected function content_template_single_repeater_item() { ?> <# const menuItemIcon = elementor.helpers.renderIcon( view, view.container.settings.attributes.menu_item_icon, { 'aria-hidden': true }, 'i' , 'object' ) ?? '', menuItemIconActive = elementor.helpers.renderIcon( view, view.container.settings.attributes.menu_item_icon_active, { 'aria-hidden': true }, 'i' , 'object' ) ?? '', elementUid = view.getIDInt().toString().substr( 0, 3 ), permalinkUrl = '<?php echo esc_url( $this->get_permalink_for_current_page() ); ?>', menuItemCount = view.collection.length + 1, menuItemUid = view.getIDInt().toString().substr( 0, 3 ) + menuItemCount, menuItemWrapperKey = menuItemUid, menuItemTitleKey = 'menu-title-' + menuItemUid, menuItemTitleContainerLinkKey = 'e-n-menu-title-container-' + menuItemUid, menuItemDropdownIconKey = 'e-n-menu-dropdown-icon-' + menuItemUid, menuItemIconKey = 'menu-icon-' + menuItemUid, menuIcon = elementor.helpers.renderIcon( view, data.item_icon, { 'aria-hidden': true }, 'i' , 'object' ) ?? '', menuIconActive = '' === data.item_icon_active.value ? menuIcon : elementor.helpers.renderIcon( view, data.item_icon_active, { 'aria-hidden': true }, 'i' , 'object' ), menuItemLink = 'string' === typeof data['item_link'] ? data['item_link'] : data['item_link']['url'], hasDropdownContent = 'yes' === data['item_dropdown_content'], currentPageClass = elementorPro.modules.megaMenu.getCurrentMenuItemClass( menuItemLink, permalinkUrl ), dropdownFocusClass = hasDropdownContent ? 'e-focus' : '', menuItemClassList = ['e-n-menu-title']; let menuItemId = 'e-n-menu-title-' + menuItemUid; if ( '' !== data.element_id ) { menuItemId = data.element_id; } if ( ! hasDropdownContent ) { menuItemClassList.push( 'link-only' ); } else { menuItemClassList.push( 'e-click' ); } if ( !! currentPageClass ) { menuItemClassList.push( currentPageClass ); } view.addRenderAttribute( menuItemWrapperKey, { 'id': menuItemId, 'class': menuItemClassList, }, null, true ); view.addRenderAttribute( menuItemTitleKey, { 'class': [ 'e-n-menu-title-text' ], 'data-binding-type': 'repeater-item', 'data-binding-repeater-name': 'menu_items', 'data-binding-setting': ['item_title'], 'data-binding-index': menuItemCount, 'data-binding-dynamic': 'true', }, null, true ); const menuItemContainerClasses = [ 'e-n-menu-title-container' ]; if ( !! data.item_link.url ) { menuItemContainerClasses.push( 'e-link', 'e-focus' ); } view.addRenderAttribute( menuItemTitleContainerLinkKey, { 'class': menuItemContainerClasses, 'href': elementor.helpers.sanitizeUrl( data.item_link.url ), 'aria-current': 'page', }, null, true ); view.addRenderAttribute( menuItemDropdownIconKey, { 'id': 'e-n-menu-dropdown-icon-' + menuItemUid, 'class': [ 'e-n-menu-dropdown-icon', 'e-focus' ], 'data-tab-index': menuItemCount, 'aria-haspopup': hasDropdownContent ? 'true' : 'false', 'aria-expanded': 'false', 'aria-controls': 'e-n-menu-content-' + menuItemUid, }, null, true ); #> <li class="e-n-menu-item"> <div {{{ view.getRenderAttributeString( menuItemWrapperKey ) }}}> <# if ( menuItemLink ) { #> <a {{{ view.getRenderAttributeString( menuItemTitleContainerLinkKey ) }}}> <# } else { #> <div {{{ view.getRenderAttributeString( menuItemTitleContainerLinkKey ) }}}> <# } #> <# if (menuIcon.value) { #> <span class="e-n-menu-icon"> <span class="icon-active" >{{{ menuIconActive.value }}}</span> <span class="icon-inactive">{{{ menuIcon.value }}}</span> </span> <# } #> <span {{{ view.getRenderAttributeString( menuItemTitleKey ) }}}>{{{ data.item_title }}}</span> <# if ( menuItemLink ) { #> </a> <# } else { #> </div> <# } #> <# if ( hasDropdownContent ) { #> <button {{{ view.getRenderAttributeString( menuItemDropdownIconKey ) }}}> <span class="e-n-menu-dropdown-icon-opened"> {{{ menuItemIconActive.value }}} <span class="elementor-screen-only"><?php echo esc_html__( 'Close ', 'elementor-pro' ); ?>{{{ data.item_title }}}</span> </span> <span class="e-n-menu-dropdown-icon-closed"> {{{ menuItemIcon.value }}} <span class="elementor-screen-only"><?php echo esc_html__( 'Open ', 'elementor-pro' ); ?>{{{ data.item_title }}}</span> </span> </button> <# } #> </div> <div class="e-n-menu-content"></div> </li> <?php } }

| ver. 1.4 | Github | . | PHP 7.4.3-4ubuntu2.24 | Генерация страницы: 0.01 | proxy | phpinfo | Настройка