nav_menu_index++;
}
/**
* Retrieve the list of available menus.
*
* Used to get the list of available menus.
*
* @since 1.21.0
* @access private
*
* @return array get WordPress menus list.
*/
private function get_available_menus() {
$menus = wp_get_nav_menus();
$options = array();
foreach ( $menus as $menu ) {
$options[ $menu->slug ] = $menu->name;
}
return $options;
}
/**
* Register Nav Menu controls.
*
* @since 1.29.2
* @access protected
*/
protected function register_controls() {
$this->register_general_content_controls();
$this->register_style_content_controls();
$this->register_dropdown_content_controls();
$this->register_helpful_information();
$this->register_cta_btn_style_controls();
}
/**
* Register Nav Menu General Controls.
*
* @since 1.21.0
* @access protected
*/
protected function register_general_content_controls() {
$this->start_controls_section(
'section_menu',
array(
'label' => __( 'Menu', 'uael' ),
)
);
$this->add_control(
'menu_type',
array(
'label' => __( 'Type', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'wordpress_menu',
'options' => array(
'wordpress_menu' => __( 'WordPress Menu', 'uael' ),
'custom' => __( 'Custom', 'uael' ),
),
)
);
$menus = $this->get_available_menus();
if ( ! empty( $menus ) ) {
$this->add_control(
'menu',
array(
'label' => __( 'Menu', 'uael' ),
'type' => Controls_Manager::SELECT,
'options' => $menus,
'default' => array_keys( $menus )[0],
'save_default' => true,
/* translators: %s Nav menu URL */
'description' => sprintf( __( 'Go to the Menus screen to manage your menus.', 'uael' ), admin_url( 'nav-menus.php' ) ),
'condition' => array(
'menu_type' => 'wordpress_menu',
),
)
);
} else {
$this->add_control(
'menu',
array(
'type' => Controls_Manager::RAW_HTML,
/* translators: %s Nav menu URL */
'raw' => sprintf( __( 'There are no menus in your site.
Go to the Menus screen to create one.', 'uael' ), admin_url( 'nav-menus.php?action=edit&menu=0' ) ),
'separator' => 'after',
'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
'condition' => array(
'menu_type' => 'wordpress_menu',
),
)
);
}
$repeater = new Repeater();
$repeater->add_control(
'item_type',
array(
'label' => __( 'Item Type', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'item_menu',
'options' => array(
'item_menu' => __( 'Menu', 'uael' ),
'item_submenu' => __( 'Sub Menu', 'uael' ),
),
)
);
$repeater->add_control(
'menu_content_type',
array(
'label' => __( 'Content Type', 'uael' ),
'type' => Controls_Manager::SELECT,
'options' => $this->get_content_type(),
'default' => 'sub_menu',
'condition' => array(
'item_type' => 'item_submenu',
),
)
);
$repeater->add_control(
'text',
array(
'label' => __( 'Text', 'uael' ),
'type' => Controls_Manager::TEXT,
'default' => __( 'Item', 'uael' ),
'placeholder' => __( 'Item', 'uael' ),
'dynamic' => array(
'active' => true,
),
'conditions' => array(
'relation' => 'or',
'terms' => array(
array(
'name' => 'item_type',
'operator' => '==',
'value' => 'item_menu',
),
array(
'name' => 'menu_content_type',
'operator' => '==',
'value' => 'sub_menu',
),
),
),
)
);
$repeater->add_control(
'link',
array(
'label' => __( 'Link', 'uael' ),
'type' => Controls_Manager::URL,
'default' => array(
'url' => '#',
'is_external' => '',
),
'dynamic' => array(
'active' => true,
),
'conditions' => array(
'relation' => 'or',
'terms' => array(
array(
'name' => 'item_type',
'operator' => '==',
'value' => 'item_menu',
),
array(
'name' => 'menu_content_type',
'operator' => '==',
'value' => 'sub_menu',
),
),
),
)
);
$repeater->add_control(
'content_saved_widgets',
array(
'label' => __( 'Select Widget', 'uael' ),
'type' => Controls_Manager::SELECT,
'options' => UAEL_Helper::get_saved_data( 'widget' ),
'default' => '-1',
'condition' => array(
'menu_content_type' => 'saved_modules',
'item_type' => 'item_submenu',
),
)
);
$repeater->add_control(
'content_saved_rows',
array(
'label' => __( 'Select Section', 'uael' ),
'type' => Controls_Manager::SELECT,
'options' => UAEL_Helper::get_saved_data( 'section' ),
'default' => '-1',
'condition' => array(
'menu_content_type' => 'saved_rows',
'item_type' => 'item_submenu',
),
)
);
$repeater->add_control(
'content_saved_container',
array(
'label' => __( 'Select Container', 'uael' ),
'type' => Controls_Manager::SELECT,
'options' => UAEL_Helper::get_saved_data( 'container' ),
'default' => '-1',
'condition' => array(
'menu_content_type' => 'saved_container',
'item_type' => 'item_submenu',
),
)
);
$repeater->add_control(
'dropdown_width',
array(
'label' => __( 'Dropdown Width', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'default',
'options' => array(
'default' => __( 'Default', 'uael' ),
'custom' => __( 'Custom', 'uael' ),
'section' => __( 'Equal to Section', 'uael' ),
'container' => __( 'Equal to Container', 'uael' ),
'column' => __( 'Equal to Column', 'uael' ),
'widget' => __( 'Equal to Widget', 'uael' ),
),
'condition' => array(
'item_type' => 'item_menu',
),
)
);
$repeater->add_control(
'section_width',
array(
'label' => __( 'Width (px)', 'uael' ),
'type' => Controls_Manager::SLIDER,
'range' => array(
'px' => array(
'min' => 0,
'max' => 1500,
),
),
'default' => array(
'size' => '220',
'unit' => 'px',
),
'selectors' => array(
'{{WRAPPER}} {{CURRENT_ITEM}} ul.sub-menu' => 'width: {{SIZE}}{{UNIT}}',
),
'condition' => array(
'dropdown_width' => 'custom',
'item_type' => 'item_menu',
),
)
);
$repeater->add_control(
'dropdown_position',
array(
'label' => __( 'Dropdown Position', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'left',
'options' => array(
'left' => __( 'Left', 'uael' ),
'center' => __( 'Center', 'uael' ),
'right' => __( 'Right', 'uael' ),
),
'condition' => array(
'item_type' => 'item_menu',
'dropdown_width' => array( 'custom', 'default' ),
),
)
);
$this->add_control(
'menu_items',
array(
'label' => __( 'Menu Items', 'uael' ),
'type' => Controls_Manager::REPEATER,
'show_label' => true,
'fields' => $repeater->get_controls(),
'default' => array(
array(
'item_type' => 'item_menu',
'text' => __( 'Menu Item 1', 'uael' ),
),
array(
'item_type' => 'item_submenu',
'text' => __( 'Sub Menu', 'uael' ),
),
array(
'item_type' => 'item_menu',
'text' => __( 'Menu Item 2', 'uael' ),
),
array(
'item_type' => 'item_submenu',
'text' => __( 'Sub Menu', 'uael' ),
),
),
'title_field' => '{{ text }}',
'separator' => 'before',
'condition' => array(
'menu_type' => 'custom',
),
)
);
$this->add_control(
'menu_last_item',
array(
'label' => __( 'Last Menu Item', 'uael' ),
'type' => Controls_Manager::SELECT,
'separator' => 'before',
'options' => array(
'none' => __( 'Default', 'uael' ),
'cta' => __( 'Button', 'uael' ),
),
'default' => 'none',
'condition' => array(
'layout!' => 'expandible',
),
)
);
$current_theme = wp_get_theme();
if ( 'Twenty Twenty-One' === $current_theme->get( 'Name' ) ) {
$this->add_control(
'hide_twenty_twenty_one_theme_icons',
array(
'label' => __( 'Hide + & - Sign', 'uael' ),
'type' => Controls_Manager::SWITCHER,
'separator' => 'before',
'label_on' => __( 'Yes', 'uael' ),
'label_off' => __( 'No', 'uael' ),
'return_value' => 'yes',
'default' => 'no',
'prefix_class' => 'uael-nav-menu__theme-icon-',
'condition' => array(
'menu_type' => 'wordpress_menu',
),
)
);
}
$this->add_control(
'schema_support',
array(
'label' => __( 'Enable Schema Support', 'uael' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => __( 'Yes', 'uael' ),
'label_off' => __( 'No', 'uael' ),
'return_value' => 'yes',
'default' => 'no',
'render_type' => 'template',
)
);
$this->end_controls_section();
$this->start_controls_section(
'section_layout',
array(
'label' => __( 'Layout', 'uael' ),
)
);
$this->add_control(
'layout',
array(
'label' => __( 'Layout', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'horizontal',
'options' => array(
'horizontal' => __( 'Horizontal', 'uael' ),
'vertical' => __( 'Vertical', 'uael' ),
'expandible' => __( 'Expanded', 'uael' ),
'flyout' => __( 'Flyout', 'uael' ),
),
)
);
$this->add_control(
'navmenu_align',
array(
'label' => __( 'Alignment', 'uael' ),
'type' => Controls_Manager::CHOOSE,
'options' => array(
'left' => array(
'title' => __( 'Left', 'uael' ),
'icon' => 'eicon-h-align-left',
),
'center' => array(
'title' => __( 'Center', 'uael' ),
'icon' => 'eicon-h-align-center',
),
'right' => array(
'title' => __( 'Right', 'uael' ),
'icon' => 'eicon-h-align-right',
),
'justify' => array(
'title' => __( 'Justify', 'uael' ),
'icon' => 'eicon-h-align-stretch',
),
),
'default' => 'left',
'condition' => array(
'layout' => array( 'horizontal', 'vertical' ),
),
'prefix_class' => 'uael-nav-menu__align-',
'render_type' => 'template',
)
);
$this->add_control(
'flyout_layout',
array(
'label' => __( 'Flyout Orientation', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'left',
'options' => array(
'left' => __( 'Left', 'uael' ),
'right' => __( 'Right', 'uael' ),
),
'condition' => array(
'layout' => 'flyout',
),
)
);
$this->add_control(
'flyout_type',
array(
'label' => __( 'Appear Effect', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'normal',
'label_block' => false,
'options' => array(
'normal' => __( 'Slide', 'uael' ),
'push' => __( 'Push', 'uael' ),
),
'render_type' => 'template',
'condition' => array(
'layout' => 'flyout',
),
)
);
$this->add_responsive_control(
'hamburger_align',
array(
'label' => __( 'Hamburger Align', 'uael' ),
'type' => Controls_Manager::CHOOSE,
'default' => 'center',
'options' => array(
'left' => array(
'title' => __( 'Left', 'uael' ),
'icon' => 'eicon-h-align-left',
),
'center' => array(
'title' => __( 'Center', 'uael' ),
'icon' => 'eicon-h-align-center',
),
'right' => array(
'title' => __( 'Right', 'uael' ),
'icon' => 'eicon-h-align-right',
),
),
'selectors_dictionary' => array(
'left' => 'margin-right: auto',
'center' => 'margin: 0 auto',
'right' => 'margin-left: auto',
),
'selectors' => array(
'{{WRAPPER}} .uael-nav-menu__toggle' => '{{VALUE}}',
),
'default' => 'center',
'condition' => array(
'layout' => array( 'expandible', 'flyout' ),
),
'label_block' => false,
)
);
$this->add_responsive_control(
'hamburger_menu_align',
array(
'label' => __( 'Menu Items Align', 'uael' ),
'type' => Controls_Manager::CHOOSE,
'options' => array(
'flex-start' => array(
'title' => __( 'Left', 'uael' ),
'icon' => 'eicon-h-align-left',
),
'center' => array(
'title' => __( 'Center', 'uael' ),
'icon' => 'eicon-h-align-center',
),
'flex-end' => array(
'title' => __( 'Right', 'uael' ),
'icon' => 'eicon-h-align-right',
),
'space-between' => array(
'title' => __( 'Justify', 'uael' ),
'icon' => 'eicon-h-align-stretch',
),
),
'default' => 'space-between',
'condition' => array(
'layout' => array( 'expandible', 'flyout' ),
),
'selectors' => array(
'{{WRAPPER}} li.menu-item a' => 'justify-content: {{VALUE}};',
),
'prefix_class' => 'uael-menu-item-',
)
);
$this->add_control(
'show_submenu_on',
array(
'label' => __( 'Show Submenu On', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'hover',
'options' => array(
'hover' => __( 'Hover', 'uael' ),
'click' => __( 'Click', 'uael' ),
),
'condition' => array(
'layout' => 'horizontal',
),
'prefix_class' => 'uael-submenu-open-',
'render_type' => 'template',
)
);
$this->add_control(
'submenu_icon',
array(
'label' => __( 'Submenu Icon', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'arrow',
'options' => array(
'arrow' => __( 'Arrows', 'uael' ),
'plus' => __( 'Plus Sign', 'uael' ),
'classic' => __( 'Classic', 'uael' ),
),
'condition' => array(
'menu_type' => array( 'custom', 'wordpress_menu' ),
),
'prefix_class' => 'uael-submenu-icon-',
)
);
$this->add_control(
'submenu_animation',
array(
'label' => __( 'Submenu Animation', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'none',
'options' => array(
'none' => __( 'Default', 'uael' ),
'slide_up' => __( 'Slide Up', 'uael' ),
),
'condition' => array(
'menu_type' => array( 'custom', 'wordpress_menu' ),
),
'prefix_class' => 'uael-submenu-animation-',
'condition' => array(
'layout' => 'horizontal',
'show_submenu_on' => 'hover',
),
)
);
$this->add_control(
'link_redirect',
array(
'label' => __( 'Action On Menu Click', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'child',
'description' => __( 'For Horizontal layout, this will affect on the selected breakpoint.', 'uael' ),
'options' => array(
'child' => __( 'Open Submenu', 'uael' ),
'self_link' => __( 'Redirect To Self Link', 'uael' ),
),
'prefix_class' => 'uael-link-redirect-',
)
);
$this->add_control(
'heading_responsive',
array(
'type' => Controls_Manager::HEADING,
'label' => __( 'Responsive', 'uael' ),
'separator' => 'before',
'condition' => array(
'layout' => array( 'horizontal', 'vertical' ),
),
)
);
$this->add_control(
'dropdown',
array(
'label' => __( 'Breakpoint', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'tablet',
'options' => array(
'mobile' => __( 'Mobile (768px >)', 'uael' ),
'tablet' => __( 'Tablet (1025px >)', 'uael' ),
'none' => __( 'None', 'uael' ),
),
'prefix_class' => 'uael-nav-menu__breakpoint-',
'condition' => array(
'layout' => array( 'horizontal', 'vertical' ),
),
'render_type' => 'template',
)
);
$this->add_control(
'resp_align',
array(
'label' => __( 'Alignment', 'uael' ),
'type' => Controls_Manager::CHOOSE,
'options' => array(
'left' => array(
'title' => __( 'Left', 'uael' ),
'icon' => 'eicon-h-align-left',
),
'center' => array(
'title' => __( 'Center', 'uael' ),
'icon' => 'eicon-h-align-center',
),
'right' => array(
'title' => __( 'Right', 'uael' ),
'icon' => 'eicon-h-align-right',
),
),
'default' => 'center',
'description' => __( 'This is the alignement of menu icon on selected responsive breakpoints.', 'uael' ),
'condition' => array(
'layout' => array( 'horizontal', 'vertical' ),
'dropdown!' => 'none',
),
'selectors' => array(
'{{WRAPPER}} .uael-nav-menu__toggle' => 'text-align: {{VALUE}};',
),
)
);
$this->add_control(
'full_width_dropdown',
array(
'label' => __( 'Full Width', 'uael' ),
'description' => __( 'Enable this option to stretch the Sub Menu to Full Width.', 'uael' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => __( 'Yes', 'uael' ),
'label_off' => __( 'No', 'uael' ),
'return_value' => 'yes',
'default' => 'yes',
'condition' => array(
'layout!' => 'flyout',
'dropdown!' => 'none',
),
'render_type' => 'template',
)
);
$this->add_control(
'toggle_layout_heading',
array(
'label' => __( 'Toggle Button', 'uael' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
'condition' => array(
'dropdown!' => 'none',
),
)
);
$this->add_control(
'toggle_label_show',
array(
'label' => __( 'Show Label', 'uael' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => __( 'Yes', 'uael' ),
'label_off' => __( 'No', 'uael' ),
'return_value' => 'yes',
'default' => 'no',
'render_type' => 'template',
'prefix_class' => 'uael-nav-menu-toggle-label-',
'condition' => array(
'dropdown!' => 'none',
),
)
);
$this->add_control(
'toggle_label_text',
array(
'label' => __( 'Label Text', 'uael' ),
'type' => Controls_Manager::TEXT,
'default' => __( 'Menu', 'uael' ),
'placeholder' => __( 'Type your label text', 'uael' ),
'condition' => array(
'toggle_label_show' => 'yes',
'dropdown!' => 'none',
),
)
);
$this->add_control(
'toggle_label_align',
array(
'label' => __( 'Label Position', 'uael' ),
'type' => Controls_Manager::SELECT,
'options' => array(
'left' => __( 'Before Icon', 'uael' ),
'right' => __( 'After Icon', 'uael' ),
),
'default' => 'right',
'prefix_class' => 'uael-nav-menu-label-align-',
'selectors_dictionary' => array(
'left' => 'flex-direction: row-reverse',
'right' => 'flex-direction: row',
),
'selectors' => array(
'{{WRAPPER}}.uael-nav-menu-toggle-label-yes .uael-nav-menu__toggle' => '{{VALUE}}',
),
'condition' => array(
'toggle_label_show' => 'yes',
'dropdown!' => 'none',
),
)
);
if ( UAEL_Helper::is_elementor_updated() ) {
$this->add_control(
'dropdown_icon',
array(
'label' => __( 'Menu Icon', 'uael' ),
'type' => Controls_Manager::ICONS,
'label_block' => 'true',
'default' => array(
'value' => 'fas fa-align-justify',
'library' => 'fa-solid',
),
'condition' => array(
'dropdown!' => 'none',
),
)
);
} else {
$this->add_control(
'dropdown_icon',
array(
'label' => __( 'Icon', 'uael' ),
'type' => Controls_Manager::ICON,
'label_block' => 'true',
'default' => 'fa fa-align-justify',
'condition' => array(
'dropdown!' => 'none',
),
)
);
}
if ( UAEL_Helper::is_elementor_updated() ) {
$this->add_control(
'dropdown_close_icon',
array(
'label' => __( 'Close Icon', 'uael' ),
'type' => Controls_Manager::ICONS,
'label_block' => 'true',
'default' => array(
'value' => 'far fa-window-close',
'library' => 'fa-regular',
),
'condition' => array(
'dropdown!' => 'none',
),
)
);
} else {
$this->add_control(
'dropdown_close_icon',
array(
'label' => __( 'Close Icon', 'uael' ),
'type' => Controls_Manager::ICON,
'label_block' => 'true',
'default' => 'fa fa-close',
'condition' => array(
'dropdown!' => 'none',
),
)
);
}
$this->end_controls_section();
}
/**
* Register Nav Menu General Controls.
*
* @since 1.21.0
* @access protected
*/
protected function register_style_content_controls() {
$this->start_controls_section(
'section_style_main-menu',
array(
'label' => __( 'Main Menu', 'uael' ),
'tab' => Controls_Manager::TAB_STYLE,
'condition' => array(
'layout!' => 'expandible',
),
)
);
$this->add_responsive_control(
'width_flyout_menu_item',
array(
'label' => __( 'Flyout Box Width', 'uael' ),
'type' => Controls_Manager::SLIDER,
'range' => array(
'px' => array(
'max' => 500,
'min' => 100,
),
),
'default' => array(
'size' => '300',
'unit' => 'px',
),
'selectors' => array(
'{{WRAPPER}} .uael-flyout-wrapper .uael-side' => 'width: {{SIZE}}{{UNIT}}',
'{{WRAPPER}} .uael-flyout-open.left' => 'left: -{{SIZE}}{{UNIT}}',
'{{WRAPPER}} .uael-flyout-open.right' => 'right: -{{SIZE}}{{UNIT}}',
),
'condition' => array(
'layout' => 'flyout',
),
'render_type' => 'template',
)
);
$this->add_responsive_control(
'padding_flyout_menu_item',
array(
'label' => __( 'Flyout Box Padding', 'uael' ),
'type' => Controls_Manager::SLIDER,
'range' => array(
'px' => array(
'max' => 50,
),
),
'default' => array(
'size' => 30,
'unit' => 'px',
),
'selectors' => array(
'{{WRAPPER}} .uael-flyout-content' => 'padding: {{SIZE}}{{UNIT}}',
),
'condition' => array(
'layout' => 'flyout',
),
)
);
$this->add_responsive_control(
'padding_horizontal_menu_item',
array(
'label' => __( 'Horizontal Padding', 'uael' ),
'type' => Controls_Manager::SLIDER,
'size_units' => array( 'px' ),
'range' => array(
'px' => array(
'max' => 50,
),
),
'default' => array(
'size' => 15,
'unit' => 'px',
),
'selectors' => array(
'{{WRAPPER}} .menu-item a.uael-menu-item,{{WRAPPER}} .menu-item a.uael-sub-menu-item' => 'padding-left: {{SIZE}}{{UNIT}}; padding-right: {{SIZE}}{{UNIT}}',
),
'render_type' => 'template',
)
);
$this->add_responsive_control(
'padding_vertical_menu_item',
array(
'label' => __( 'Vertical Padding', 'uael' ),
'type' => Controls_Manager::SLIDER,
'size_units' => array( 'px' ),
'range' => array(
'px' => array(
'max' => 50,
),
),
'default' => array(
'size' => 15,
'unit' => 'px',
),
'selectors' => array(
'{{WRAPPER}} .menu-item a.uael-menu-item, {{WRAPPER}} .menu-item a.uael-sub-menu-item' => 'padding-top: {{SIZE}}{{UNIT}}; padding-bottom: {{SIZE}}{{UNIT}};',
),
'render_type' => 'template',
)
);
$this->add_responsive_control(
'menu_space_between',
array(
'label' => __( 'Space Between', 'uael' ),
'type' => Controls_Manager::SLIDER,
'size_units' => array( 'px' ),
'range' => array(
'px' => array(
'max' => 100,
),
),
'selectors' => array(
'body:not(.rtl) {{WRAPPER}} .uael-nav-menu__layout-horizontal .uael-nav-menu > li.menu-item:not(:last-child)' => 'margin-right: {{SIZE}}{{UNIT}}',
'body.rtl {{WRAPPER}} .uael-nav-menu__layout-horizontal .uael-nav-menu > li.menu-item:not(:last-child)' => 'margin-left: {{SIZE}}{{UNIT}}',
'{{WRAPPER}} nav:not(.uael-nav-menu__layout-horizontal) .uael-nav-menu > li.menu-item:not(:last-child)' => 'margin-bottom: 0',
'(tablet)body:not(.rtl) {{WRAPPER}}.uael-nav-menu__breakpoint-tablet .uael-nav-menu__layout-horizontal .uael-nav-menu > li.menu-item:not(:last-child)' => 'margin-right: 0px',
'(mobile)body:not(.rtl) {{WRAPPER}}.uael-nav-menu__breakpoint-mobile .uael-nav-menu__layout-horizontal .uael-nav-menu > li.menu-item:not(:last-child)' => 'margin-right: 0px',
),
'render_type' => 'template',
'condition' => array(
'layout' => 'horizontal',
),
)
);
$this->add_responsive_control(
'menu_row_space',
array(
'label' => __( 'Row Spacing', 'uael' ),
'type' => Controls_Manager::SLIDER,
'size_units' => array( 'px' ),
'range' => array(
'px' => array(
'max' => 100,
),
),
'selectors' => array(
'body:not(.rtl) {{WRAPPER}} .uael-nav-menu__layout-horizontal .uael-nav-menu > li.menu-item' => 'margin-bottom: {{SIZE}}{{UNIT}}',
),
'condition' => array(
'layout' => 'horizontal',
),
'render_type' => 'template',
)
);
$this->add_responsive_control(
'menu_top_space',
array(
'label' => __( 'Menu Item Top Spacing', 'uael' ),
'type' => Controls_Manager::SLIDER,
'size_units' => array( 'px', '%' ),
'range' => array(
'px' => array(
'max' => 100,
),
),
'selectors' => array(
'{{WRAPPER}} .uael-flyout-wrapper .uael-nav-menu > li.menu-item:first-child' => 'margin-top: {{SIZE}}{{UNIT}}',
),
'condition' => array(
'layout' => 'flyout',
),
'render_type' => 'template',
)
);
$this->add_control(
'bg_color_flyout',
array(
'label' => __( 'Background Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => '#FFFFFF',
'selectors' => array(
'{{WRAPPER}} .uael-flyout-content' => 'background-color: {{VALUE}}',
),
'condition' => array(
'layout' => 'flyout',
),
)
);
$this->add_control(
'pointer',
array(
'label' => __( 'Link Hover Effect', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'none',
'options' => array(
'none' => __( 'None', 'uael' ),
'underline' => __( 'Underline', 'uael' ),
'overline' => __( 'Overline', 'uael' ),
'double-line' => __( 'Double Line', 'uael' ),
'framed' => __( 'Framed', 'uael' ),
'text' => __( 'Text', 'uael' ),
),
'condition' => array(
'layout' => array( 'horizontal' ),
),
)
);
$this->add_control(
'animation_line',
array(
'label' => __( 'Animation', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'fade',
'options' => array(
'fade' => 'Fade',
'slide' => 'Slide',
'grow' => 'Grow',
'drop-in' => 'Drop In',
'drop-out' => 'Drop Out',
'none' => 'None',
),
'condition' => array(
'layout' => array( 'horizontal' ),
'pointer' => array( 'underline', 'overline', 'double-line' ),
),
)
);
$this->add_control(
'animation_framed',
array(
'label' => __( 'Frame Animation', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'fade',
'options' => array(
'fade' => 'Fade',
'grow' => 'Grow',
'shrink' => 'Shrink',
'draw' => 'Draw',
'corners' => 'Corners',
'none' => 'None',
),
'condition' => array(
'layout' => array( 'horizontal' ),
'pointer' => 'framed',
),
)
);
$this->add_control(
'animation_text',
array(
'label' => __( 'Animation', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'grow',
'options' => array(
'grow' => 'Grow',
'shrink' => 'Shrink',
'sink' => 'Sink',
'float' => 'Float',
'skew' => 'Skew',
'rotate' => 'Rotate',
'none' => 'None',
),
'condition' => array(
'layout' => array( 'horizontal' ),
'pointer' => 'text',
),
)
);
$this->add_control(
'style_divider',
array(
'type' => Controls_Manager::DIVIDER,
)
);
$this->add_group_control(
Group_Control_Typography::get_type(),
array(
'name' => 'menu_typography',
'global' => array(
'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
),
'separator' => 'before',
'selector' => '{{WRAPPER}} .menu-item a.uael-menu-item',
)
);
$this->start_controls_tabs( 'tabs_menu_item_style' );
$this->start_controls_tab(
'tab_menu_item_normal',
array(
'label' => __( 'Normal', 'uael' ),
)
);
$this->add_control(
'color_menu_item',
array(
'label' => __( 'Text Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'global' => array(
'default' => Global_Colors::COLOR_TEXT,
),
'default' => '',
'selectors' => array(
'{{WRAPPER}} .menu-item a.uael-menu-item:not(.elementor-button), {{WRAPPER}} .sub-menu a.uael-sub-menu-item' => 'color: {{VALUE}}',
),
)
);
$this->add_control(
'bg_color_menu_item',
array(
'label' => __( 'Background Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => array(
'{{WRAPPER}} .menu-item a.uael-menu-item, {{WRAPPER}} .sub-menu, {{WRAPPER}} nav.uael-dropdown, {{WRAPPER}} .uael-dropdown-expandible' => 'background-color: {{VALUE}}',
),
'condition' => array(
'layout!' => 'flyout',
),
)
);
$this->end_controls_tab();
$this->start_controls_tab(
'tab_menu_item_hover',
array(
'label' => __( 'Hover', 'uael' ),
)
);
$this->add_control(
'color_menu_item_hover',
array(
'label' => __( 'Text Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'global' => array(
'default' => Global_Colors::COLOR_ACCENT,
),
'selectors' => array(
'{{WRAPPER}} .menu-item a.uael-menu-item:not(.elementor-button):hover,
{{WRAPPER}} .sub-menu a.uael-sub-menu-item:hover,
{{WRAPPER}} .menu-item.current-menu-item a.uael-menu-item:not(.elementor-button),
{{WRAPPER}} .menu-item a.uael-menu-item.highlighted:not(.elementor-button),
{{WRAPPER}} .menu-item a.uael-menu-item:not(.elementor-button):focus' => 'color: {{VALUE}}',
),
)
);
$this->add_control(
'bg_color_menu_item_hover',
array(
'label' => __( 'Background Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'selectors' => array(
'{{WRAPPER}} .menu-item a.uael-menu-item:hover,
{{WRAPPER}} .sub-menu a.uael-sub-menu-item:hover,
{{WRAPPER}} .menu-item.current-menu-item a.uael-menu-item,
{{WRAPPER}} .menu-item a.uael-menu-item.highlighted,
{{WRAPPER}} .menu-item a.uael-menu-item:focus' => 'background-color: {{VALUE}}',
),
'condition' => array(
'layout!' => 'flyout',
),
)
);
$this->add_control(
'pointer_color_menu_item_hover',
array(
'label' => __( 'Link Hover Effect Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'global' => array(
'default' => Global_Colors::COLOR_ACCENT,
),
'default' => '',
'selectors' => array(
'{{WRAPPER}} .uael-nav-menu-layout:not(.uael-pointer__framed) .menu-item.parent a.uael-menu-item:before,
{{WRAPPER}} .uael-nav-menu-layout:not(.uael-pointer__framed) .menu-item.parent a.uael-menu-item:after' => 'background-color: {{VALUE}}',
'{{WRAPPER}} .uael-nav-menu-layout:not(.uael-pointer__framed) .menu-item.parent .sub-menu .uael-has-submenu-container a:after' => 'background-color: unset',
'{{WRAPPER}} .uael-pointer__framed .menu-item.parent a.uael-menu-item:before,
{{WRAPPER}} .uael-pointer__framed .menu-item.parent a.uael-menu-item:after' => 'border-color: {{VALUE}}',
),
'condition' => array(
'pointer!' => array( 'none', 'text' ),
'layout!' => 'flyout',
),
)
);
$this->end_controls_tab();
$this->start_controls_tab(
'tab_menu_item_active',
array(
'label' => __( 'Active', 'uael' ),
)
);
$this->add_control(
'color_menu_item_active',
array(
'label' => __( 'Text Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => array(
'{{WRAPPER}} .menu-item.current-menu-item a.uael-menu-item:not(.elementor-button),
{{WRAPPER}} .menu-item.current-menu-ancestor a.uael-menu-item:not(.elementor-button),
{{WRAPPER}} .menu-item.custom-menu-active a.uael-menu-item:not(.elementor-button)' => 'color: {{VALUE}}',
),
)
);
$this->add_control(
'bg_color_menu_item_active',
array(
'label' => __( 'Background Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => array(
'{{WRAPPER}} .menu-item.current-menu-item a.uael-menu-item:not(.elementor-button),
{{WRAPPER}} .menu-item.current-menu-ancestor a.uael-menu-item:not(.elementor-button),
{{WRAPPER}} .menu-item.custom-menu-active a.uael-menu-item:not(.elementor-button)' => 'background-color: {{VALUE}}',
),
'condition' => array(
'layout!' => 'flyout',
),
)
);
$this->add_control(
'pointer_color_menu_item_active',
array(
'label' => __( 'Link Hover Effect Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => array(
'{{WRAPPER}} .uael-nav-menu-layout:not(.uael-pointer__framed) .menu-item.parent.current-menu-item a.uael-menu-item:before,
{{WRAPPER}} .uael-nav-menu-layout:not(.uael-pointer__framed) .menu-item.parent.current-menu-item a.uael-menu-item:after,
{{WRAPPER}} .uael-nav-menu-layout:not(.uael-pointer__framed) .menu-item.parent.custom-menu-active a.uael-menu-item:before,
{{WRAPPER}} .uael-nav-menu-layout:not(.uael-pointer__framed) .menu-item.parent.custom-menu-active a.uael-menu-item:after' => 'background-color: {{VALUE}}',
'{{WRAPPER}} .uael-nav-menu-layout:not(.uael-pointer__framed) .menu-item.parent .sub-menu .uael-has-submenu-container a.current-menu-item:after' => 'background-color: unset',
'{{WRAPPER}} .uael-pointer__framed .menu-item.parent.current-menu-item a.uael-menu-item:before,
{{WRAPPER}} .uael-pointer__framed .menu-item.parent.current-menu-item a.uael-menu-item:after, {{WRAPPER}} .uael-pointer__framed .menu-item.parent.custom-menu-active a.uael-menu-item:before,
{{WRAPPER}} .uael-pointer__framed .menu-item.parent.custom-menu-active a.uael-menu-item:after' => 'border-color: {{VALUE}}',
),
'condition' => array(
'pointer!' => array( 'none', 'text' ),
'layout!' => 'flyout',
),
)
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->end_controls_section();
}
/**
* Register Nav Menu General Controls.
*
* @since 1.21.0
* @access protected
*/
protected function register_dropdown_content_controls() {
$this->start_controls_section(
'section_style_dropdown',
array(
'label' => __( 'Dropdown', 'uael' ),
'tab' => Controls_Manager::TAB_STYLE,
)
);
$this->add_control(
'dropdown_description',
array(
'raw' => __( 'Note: On desktop, below style options will apply to the submenu. On mobile, this will apply to the entire menu.', 'uael' ),
'type' => Controls_Manager::RAW_HTML,
'content_classes' => 'elementor-descriptor',
'condition' => array(
'layout!' => array(
'expandible',
'flyout',
),
),
)
);
$this->start_controls_tabs( 'tabs_dropdown_item_style' );
$this->start_controls_tab(
'tab_dropdown_item_normal',
array(
'label' => __( 'Normal', 'uael' ),
)
);
$this->add_control(
'color_dropdown_item',
array(
'label' => __( 'Text Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => array(
'{{WRAPPER}} .sub-menu a.uael-sub-menu-item,
{{WRAPPER}} .elementor-menu-toggle,
{{WRAPPER}} nav.uael-dropdown li a.uael-menu-item:not(.elementor-button),
{{WRAPPER}} nav.uael-dropdown li a.uael-sub-menu-item:not(.elementor-button),
{{WRAPPER}} nav.uael-dropdown-expandible li a.uael-menu-item,
{{WRAPPER}} nav.uael-dropdown-expandible li a.uael-sub-menu-item' => 'color: {{VALUE}}',
),
)
);
$this->add_control(
'background_color_dropdown_item',
array(
'label' => __( 'Background Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => '#fff',
'selectors' => array(
'{{WRAPPER}} .sub-menu,
{{WRAPPER}} nav.uael-dropdown,
{{WRAPPER}} .uael-nav-menu nav.uael-dropdown-expandible,
{{WRAPPER}} .uael-nav-menu nav.uael-dropdown-expandible .menu-item a.uael-menu-item,
{{WRAPPER}} .uael-nav-menu nav.uael-dropdown-expandible .menu-item .sub-menu,
{{WRAPPER}} nav.uael-dropdown .menu-item a.uael-menu-item,
{{WRAPPER}} nav.uael-dropdown .menu-item a.uael-sub-menu-item' => 'background-color: {{VALUE}}',
),
'separator' => 'none',
)
);
$this->end_controls_tab();
$this->start_controls_tab(
'tab_dropdown_item_hover',
array(
'label' => __( 'Hover', 'uael' ),
)
);
$this->add_control(
'color_dropdown_item_hover',
array(
'label' => __( 'Text Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => array(
'{{WRAPPER}} .sub-menu a.uael-sub-menu-item:hover,
{{WRAPPER}} .elementor-menu-toggle:hover,
{{WRAPPER}} nav.uael-dropdown li a.uael-menu-item:not(.elementor-button):hover,
{{WRAPPER}} nav.uael-dropdown li a.uael-sub-menu-item:not(.elementor-button):hover,
{{WRAPPER}} .uael-nav-menu nav.uael-dropdown-expandible li a.uael-menu-item:hover,
{{WRAPPER}} .uael-nav-menu nav.uael-dropdown-expandible li a.uael-sub-menu-item:hover' => 'color: {{VALUE}}',
),
)
);
$this->add_control(
'background_color_dropdown_item_hover',
array(
'label' => __( 'Background Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => array(
'{{WRAPPER}} .sub-menu a.uael-sub-menu-item:hover,
{{WRAPPER}} nav.uael-dropdown li a.uael-menu-item:not(.elementor-button):hover,
{{WRAPPER}} nav.uael-dropdown li a.uael-sub-menu-item:not(.elementor-button):hover,
{{WRAPPER}} .uael-nav-menu nav.uael-dropdown-expandible li a.uael-menu-item:hover,
{{WRAPPER}} .uael-nav-menu nav.uael-dropdown-expandible li a.uael-sub-menu-item:hover' => 'background-color: {{VALUE}}',
),
'separator' => 'none',
)
);
$this->end_controls_tab();
$this->start_controls_tab(
'tab_dropdown_item_active',
array(
'label' => __( 'Active', 'uael' ),
)
);
$this->add_control(
'color_dropdown_item_active',
array(
'label' => __( 'Text Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => array(
'{{WRAPPER}} .sub-menu .menu-item.current-menu-item a.uael-sub-menu-item.uael-sub-menu-item-active,
{{WRAPPER}} nav.uael-dropdown .menu-item.current-menu-item a.uael-menu-item,
{{WRAPPER}} nav.uael-dropdown .menu-item.current-menu-ancestor a.uael-menu-item,
{{WRAPPER}} nav.uael-dropdown .sub-menu .menu-item.current-menu-item a.uael-sub-menu-item.uael-sub-menu-item-active,
{{WRAPPER}} .sub-menu .menu-item.custom-submenu-active a.uael-sub-menu-item,
{{WRAPPER}} nav.uael-dropdown .menu-item.custom-menu-active a.uael-menu-item,
{{WRAPPER}} .uael-nav-menu nav.uael-dropdown-expandible .menu-item.current-menu-item a.uael-menu-item,
{{WRAPPER}} .uael-nav-menu nav.uael-dropdown-expandible .menu-item.current-menu-item a.uael-sub-menu-item' => 'color: {{VALUE}}',
),
)
);
$this->add_control(
'background_color_dropdown_item_active',
array(
'label' => __( 'Background Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => array(
'{{WRAPPER}} .sub-menu .menu-item.current-menu-item a.uael-sub-menu-item.uael-sub-menu-item-active,
{{WRAPPER}} nav.uael-dropdown .menu-item.current-menu-item a.uael-menu-item,
{{WRAPPER}} nav.uael-dropdown .menu-item.current-menu-ancestor a.uael-menu-item,
{{WRAPPER}} nav.uael-dropdown .sub-menu .menu-item.current-menu-item a.uael-sub-menu-item.uael-sub-menu-item-active,
{{WRAPPER}} .sub-menu .menu-item.custom-submenu-active a.uael-sub-menu-item,
{{WRAPPER}} nav.uael-dropdown .menu-item.custom-menu-active a.uael-menu-item,
{{WRAPPER}} .uael-nav-menu nav.uael-dropdown-expandible .menu-item.current-menu-item a.uael-menu-item,
{{WRAPPER}} .uael-nav-menu nav.uael-dropdown-expandible .menu-item.current-menu-item a.uael-sub-menu-item' => 'background-color: {{VALUE}}',
),
'separator' => 'after',
)
);
$this->end_controls_tabs();
$this->end_controls_tabs();
$this->add_group_control(
Group_Control_Typography::get_type(),
array(
'name' => 'dropdown_typography',
'global' => array(
'default' => Global_Typography::TYPOGRAPHY_ACCENT,
),
'separator' => 'before',
'exclude' => array( 'line_height' ),
'selector' => '{{WRAPPER}} .sub-menu li a.uael-sub-menu-item,
{{WRAPPER}} nav.uael-dropdown li a.uael-menu-item,
{{WRAPPER}} nav.uael-dropdown li a.uael-sub-menu-item,
{{WRAPPER}} nav.uael-dropdown-expandible li a.uael-menu-item',
'{{WRAPPER}} nav.uael-dropdown-expandible li a.uael-sub-menu-item',
)
);
$this->add_group_control(
Group_Control_Border::get_type(),
array(
'name' => 'dropdown_border',
'selector' => '{{WRAPPER}} nav.uael-nav-menu__layout-horizontal .sub-menu,
{{WRAPPER}} nav:not(.uael-nav-menu__layout-horizontal) .sub-menu.sub-menu-open,
{{WRAPPER}} nav.uael-dropdown,
{{WRAPPER}} nav.uael-dropdown-expandible',
)
);
$this->add_responsive_control(
'dropdown_border_radius',
array(
'label' => __( 'Border Radius', 'uael' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => array( 'px', '%' ),
'selectors' => array(
'{{WRAPPER}} .sub-menu' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
'{{WRAPPER}} .sub-menu li.menu-item:first-child' => 'border-top-left-radius: {{TOP}}{{UNIT}}; border-top-right-radius: {{RIGHT}}{{UNIT}};overflow:hidden;',
'{{WRAPPER}} .sub-menu li.menu-item:last-child' => 'border-bottom-right-radius: {{BOTTOM}}{{UNIT}}; border-bottom-left-radius: {{LEFT}}{{UNIT}};overflow:hidden',
'{{WRAPPER}} nav.uael-dropdown' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
'{{WRAPPER}} nav.uael-dropdown li.menu-item:first-child' => 'border-top-left-radius: {{TOP}}{{UNIT}}; border-top-right-radius: {{RIGHT}}{{UNIT}};overflow:hidden',
'{{WRAPPER}} nav.uael-dropdown li.menu-item:last-child' => 'border-bottom-right-radius: {{BOTTOM}}{{UNIT}}; border-bottom-left-radius: {{LEFT}}{{UNIT}};overflow:hidden',
'{{WRAPPER}} nav.uael-dropdown-expandible' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
'{{WRAPPER}} nav.uael-dropdown-expandible li.menu-item:first-child' => 'border-top-left-radius: {{TOP}}{{UNIT}}; border-top-right-radius: {{RIGHT}}{{UNIT}};overflow:hidden',
'{{WRAPPER}} nav.uael-dropdown-expandible li.menu-item:last-child' => 'border-bottom-right-radius: {{BOTTOM}}{{UNIT}}; border-bottom-left-radius: {{LEFT}}{{UNIT}};overflow:hidden',
),
)
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
array(
'name' => 'dropdown_box_shadow',
'exclude' => array(
'box_shadow_position',
),
'selector' => '{{WRAPPER}} .uael-nav-menu .sub-menu,
{{WRAPPER}} nav.uael-dropdown,
{{WRAPPER}} nav.uael-dropdown-expandible',
'separator' => 'after',
)
);
$this->add_responsive_control(
'width_dropdown_item',
array(
'label' => __( 'Dropdown Width (px)', 'uael' ),
'type' => Controls_Manager::SLIDER,
'range' => array(
'px' => array(
'min' => 0,
'max' => 500,
),
),
'default' => array(
'size' => '220',
'unit' => 'px',
),
'selectors' => array(
'{{WRAPPER}} ul.sub-menu' => 'width: {{SIZE}}{{UNIT}}',
),
'condition' => array(
'layout' => 'horizontal',
),
'render_type' => 'template',
)
);
$this->add_responsive_control(
'padding_horizontal_dropdown_item',
array(
'label' => __( 'Horizontal Padding', 'uael' ),
'type' => Controls_Manager::SLIDER,
'size_units' => array( 'px' ),
'default' => array(
'size' => 15,
'unit' => 'px',
),
'selectors' => array(
'{{WRAPPER}} .sub-menu li a.uael-sub-menu-item,
{{WRAPPER}} nav.uael-dropdown li a.uael-menu-item,
{{WRAPPER}} nav.uael-dropdown li a.uael-sub-menu-item,
{{WRAPPER}} nav.uael-dropdown-expandible li a.uael-menu-item,
{{WRAPPER}} nav.uael-dropdown-expandible li a.uael-sub-menu-item' => 'padding-left: {{SIZE}}{{UNIT}}; padding-right: {{SIZE}}{{UNIT}}',
),
'render_type' => 'template',
)
);
$this->add_responsive_control(
'padding_vertical_dropdown_item',
array(
'label' => __( 'Vertical Padding', 'uael' ),
'type' => Controls_Manager::SLIDER,
'size_units' => array( 'px' ),
'default' => array(
'size' => 15,
'unit' => 'px',
),
'range' => array(
'px' => array(
'max' => 50,
),
),
'selectors' => array(
'{{WRAPPER}} .sub-menu a.uael-sub-menu-item,
{{WRAPPER}} nav.uael-dropdown li a.uael-menu-item,
{{WRAPPER}} nav.uael-dropdown li a.uael-sub-menu-item,
{{WRAPPER}} nav.uael-dropdown-expandible li a.uael-menu-item,
{{WRAPPER}} nav.uael-dropdown-expandible li a.uael-sub-menu-item' => 'padding-top: {{SIZE}}{{UNIT}}; padding-bottom: {{SIZE}}{{UNIT}}',
),
'render_type' => 'template',
)
);
$this->add_responsive_control(
'distance_from_menu',
array(
'label' => __( 'Top Distance', 'uael' ),
'type' => Controls_Manager::SLIDER,
'range' => array(
'px' => array(
'min' => -100,
'max' => 100,
),
),
'selectors' => array(
'{{WRAPPER}} nav.uael-nav-menu__layout-horizontal ul.sub-menu, {{WRAPPER}} nav.uael-nav-menu__layout-expandible.menu-is-active,
{{WRAPPER}} .uael-dropdown.menu-is-active' => 'margin-top: {{SIZE}}px;',
'(tablet){{WRAPPER}}.uael-nav-menu__breakpoint-tablet nav.uael-nav-menu__layout-horizontal ul.sub-menu' => 'margin-top: 0px',
'(mobile){{WRAPPER}}.uael-nav-menu__breakpoint-mobile nav.uael-nav-menu__layout-horizontal ul.sub-menu' => 'margin-top: 0px',
),
'condition' => array(
'layout' => array( 'horizontal', 'expandible' ),
),
'render_type' => 'template',
'frontend_available' => true,
)
);
$this->add_control(
'heading_dropdown_divider',
array(
'label' => __( 'Divider', 'uael' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
)
);
$this->add_control(
'dropdown_divider_border',
array(
'label' => __( 'Border Style', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'solid',
'label_block' => false,
'options' => array(
'none' => __( 'None', 'uael' ),
'solid' => __( 'Solid', 'uael' ),
'double' => __( 'Double', 'uael' ),
'dotted' => __( 'Dotted', 'uael' ),
'dashed' => __( 'Dashed', 'uael' ),
),
'selectors' => array(
'{{WRAPPER}} .sub-menu li.menu-item:not(:last-child),
{{WRAPPER}} nav.uael-dropdown li.menu-item:not(:last-child),
{{WRAPPER}} nav.uael-dropdown-expandible li.menu-item:not(:last-child)' => 'border-bottom-style: {{VALUE}};',
),
)
);
$this->add_control(
'divider_border_color',
array(
'label' => __( 'Border Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => '#c4c4c4',
'selectors' => array(
'{{WRAPPER}} .sub-menu li.menu-item:not(:last-child),
{{WRAPPER}} nav.uael-dropdown li.menu-item:not(:last-child),
{{WRAPPER}} nav.uael-dropdown-expandible li.menu-item:not(:last-child)' => 'border-bottom-color: {{VALUE}};',
),
'condition' => array(
'dropdown_divider_border!' => 'none',
),
)
);
$this->add_control(
'dropdown_divider_width',
array(
'label' => __( 'Border Width', 'uael' ),
'type' => Controls_Manager::SLIDER,
'range' => array(
'px' => array(
'max' => 50,
),
),
'default' => array(
'size' => '1',
'unit' => 'px',
),
'selectors' => array(
'{{WRAPPER}} .sub-menu li.menu-item:not(:last-child),
{{WRAPPER}} nav.uael-dropdown li.menu-item:not(:last-child),
{{WRAPPER}} nav.uael-dropdown-expandible li.menu-item:not(:last-child)' => 'border-bottom-width: {{SIZE}}{{UNIT}}',
),
'condition' => array(
'dropdown_divider_border!' => 'none',
),
)
);
$this->end_controls_section();
$this->start_controls_section(
'style_toggle',
array(
'label' => __( 'Menu Trigger & Close Icon', 'uael' ),
'tab' => Controls_Manager::TAB_STYLE,
)
);
$this->start_controls_tabs( 'tabs_toggle_style' );
$this->start_controls_tab(
'toggle_style_normal',
array(
'label' => __( 'Normal', 'uael' ),
)
);
$this->add_control(
'toggle_color',
array(
'label' => __( 'Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'selectors' => array(
'{{WRAPPER}} div.uael-nav-menu-icon' => 'color: {{VALUE}}',
'{{WRAPPER}} div.uael-nav-menu-icon svg' => 'fill: {{VALUE}}',
),
)
);
$this->add_control(
'toggle_background_color',
array(
'label' => __( 'Background Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'selectors' => array(
'{{WRAPPER}} .uael-nav-menu-icon' => 'background-color: {{VALUE}}; padding: 0.35em;',
),
)
);
$this->end_controls_tab();
$this->start_controls_tab(
'toggle_hover',
array(
'label' => __( 'Hover', 'uael' ),
)
);
$this->add_control(
'toggle_hover_color',
array(
'label' => __( 'Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'selectors' => array(
'{{WRAPPER}} div.uael-nav-menu-icon:hover' => 'color: {{VALUE}}',
'{{WRAPPER}} div.uael-nav-menu-icon:hover svg' => 'fill: {{VALUE}}',
),
)
);
$this->add_control(
'toggle_hover_background_color',
array(
'label' => __( 'Background Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'selectors' => array(
'{{WRAPPER}} .uael-nav-menu-icon:hover' => 'background-color: {{VALUE}}; padding: 0.35em;',
),
)
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->add_responsive_control(
'toggle_size',
array(
'label' => __( 'Icon Size', 'uael' ),
'type' => Controls_Manager::SLIDER,
'range' => array(
'px' => array(
'min' => 15,
),
),
'selectors' => array(
'{{WRAPPER}} .uael-nav-menu-icon' => 'font-size: {{SIZE}}{{UNIT}}',
'{{WRAPPER}} .uael-nav-menu-icon svg' => 'font-size: {{SIZE}}px;line-height: {{SIZE}}px;height: {{SIZE}}px;width: {{SIZE}}px;',
),
'separator' => 'before',
)
);
$this->add_responsive_control(
'toggle_border_width',
array(
'label' => __( 'Border Width', 'uael' ),
'type' => Controls_Manager::SLIDER,
'range' => array(
'px' => array(
'max' => 10,
),
),
'selectors' => array(
'{{WRAPPER}} .uael-nav-menu-icon' => 'border-width: {{SIZE}}{{UNIT}}; padding: 0.35em;',
),
)
);
$this->add_responsive_control(
'toggle_border_radius',
array(
'label' => __( 'Border Radius', 'uael' ),
'type' => Controls_Manager::SLIDER,
'size_units' => array( 'px', '%' ),
'selectors' => array(
'{{WRAPPER}} .uael-nav-menu-icon' => 'border-radius: {{SIZE}}{{UNIT}}',
),
)
);
$this->add_control(
'close_color_flyout',
array(
'label' => __( 'Close Icon Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => '#7A7A7A',
'selectors' => array(
'{{WRAPPER}} .uael-flyout-close' => 'color: {{VALUE}}',
'{{WRAPPER}} .uael-flyout-close svg' => 'fill: {{VALUE}}',
),
'condition' => array(
'layout' => 'flyout',
),
'separator' => 'before',
)
);
$this->add_responsive_control(
'close_flyout_size',
array(
'label' => __( 'Close Icon Size', 'uael' ),
'type' => Controls_Manager::SLIDER,
'range' => array(
'px' => array(
'min' => 15,
),
),
'selectors' => array(
'{{WRAPPER}} .uael-flyout-close svg, {{WRAPPER}} .uael-flyout-close' => 'height: {{SIZE}}px; width: {{SIZE}}px; font-size: {{SIZE}}px; line-height: {{SIZE}}px;',
),
'condition' => array(
'layout' => 'flyout',
),
)
);
$this->add_control(
'toggle_styles_heading',
array(
'label' => __( 'Label', 'uael' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
'condition' => array(
'toggle_label_show' => 'yes',
),
)
);
$this->add_group_control(
Group_Control_Typography::get_type(),
array(
'name' => 'toggle_label_typography',
'label' => __( 'Typography', 'uael' ),
'selector' => '{{WRAPPER}} .uael-nav-menu__toggle .uael-nav-menu-label',
'condition' => array(
'toggle_label_show' => 'yes',
),
)
);
$this->add_control(
'toggle_label_color',
array(
'label' => __( 'Text Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'global' => array(
'default' => Global_Colors::COLOR_TEXT,
),
'selectors' => array(
'{{WRAPPER}} .uael-nav-menu__toggle .uael-nav-menu-label' => 'color: {{VALUE}}',
),
'condition' => array(
'toggle_label_show' => 'yes',
),
)
);
$this->add_control(
'toggle_label_spacing',
array(
'label' => __( 'Spacing', 'uael' ),
'type' => Controls_Manager::SLIDER,
'size_units' => array( 'px', '%' ),
'range' => array(
'px' => array(
'min' => 0,
'max' => 100,
),
'%' => array(
'min' => 0,
'max' => 100,
),
),
'default' => array(
'unit' => 'px',
'size' => 10,
),
'selectors' => array(
'{{WRAPPER}}.uael-nav-menu-label-align-left .uael-nav-menu__toggle .uael-nav-menu-label' => 'margin-right: {{SIZE}}{{UNIT}};',
'{{WRAPPER}}.uael-nav-menu-label-align-right .uael-nav-menu__toggle .uael-nav-menu-label' => 'margin-left: {{SIZE}}{{UNIT}};',
),
'condition' => array(
'toggle_label_show' => 'yes',
),
)
);
$this->end_controls_section();
}
/**
* Register Nav Menu CTA button style Controls.
*
* @since 1.34.0
* @access protected
*/
protected function register_cta_btn_style_controls() {
$this->start_controls_section(
'cta_button_styles',
array(
'label' => __( 'Button', 'uael' ),
'tab' => Controls_Manager::TAB_STYLE,
'condition' => array(
'menu_last_item' => 'cta',
'layout!' => 'expandible',
),
)
);
$this->add_group_control(
Group_Control_Typography::get_type(),
array(
'name' => 'cta_button_typography',
'label' => __( 'Typography', 'uael' ),
'global' => array(
'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
),
'selector' => '{{WRAPPER}} .menu-item a.uael-menu-item.elementor-button',
)
);
$this->add_responsive_control(
'cta_button_padding',
array(
'label' => __( 'Padding', 'uael' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => array( 'px', '%', 'em' ),
'selectors' => array(
'{{WRAPPER}} .menu-item a.uael-menu-item.elementor-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
),
)
);
$this->start_controls_tabs( 'cta_style' );
$this->start_controls_tab(
'cta_style_normal',
array(
'label' => __( 'Normal', 'uael' ),
)
);
$this->add_control(
'cta_text_color_normal',
array(
'label' => __( 'Text Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => array(
'{{WRAPPER}} .menu-item a.uael-menu-item.elementor-button' => 'color: {{VALUE}}',
),
)
);
$this->add_group_control(
Group_Control_Background::get_type(),
array(
'name' => 'cta_background_normal',
'label' => __( 'Background Color', 'uael' ),
'exclude' => array( 'image' ),
'types' => array( 'classic', 'gradient' ),
'selector' => '{{WRAPPER}} ul.uael-nav-menu .menu-item a.uael-menu-item.elementor-button',
'fields_options' => array(
'color' => array(
'global' => array(
'default' => Global_Colors::COLOR_ACCENT,
),
),
),
)
);
$this->add_group_control(
Group_Control_Border::get_type(),
array(
'name' => 'cta_border_normal',
'label' => __( 'Border', 'uael' ),
'selector' => '{{WRAPPER}} .menu-item a.uael-menu-item.elementor-button',
)
);
$this->add_responsive_control(
'cta_border_radius_normal',
array(
'label' => __( 'Border Radius', 'uael' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => array( 'px', '%' ),
'selectors' => array(
'{{WRAPPER}} .menu-item a.uael-menu-item.elementor-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
),
)
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
array(
'name' => 'cta_box_shadow_normal',
'label' => __( 'Box Shadow', 'uael' ),
'selector' => '{{WRAPPER}} .menu-item a.uael-menu-item.elementor-button',
)
);
$this->end_controls_tab();
$this->start_controls_tab(
'cta_style_hover',
array(
'label' => __( 'Hover', 'uael' ),
)
);
$this->add_control(
'cta_text_color_hover',
array(
'label' => __( 'Text Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'selectors' => array(
'{{WRAPPER}} .menu-item a.uael-menu-item.elementor-button:hover' => 'color: {{VALUE}}',
),
)
);
$this->add_group_control(
Group_Control_Background::get_type(),
array(
'name' => 'cta_background_hover',
'label' => __( 'Background Color', 'uael' ),
'types' => array( 'classic', 'gradient' ),
'exclude' => array( 'image' ),
'selector' => '{{WRAPPER}} ul.uael-nav-menu .menu-item a.uael-menu-item.elementor-button:hover',
'fields_options' => array(
'color' => array(
'global' => array(
'default' => Global_Colors::COLOR_ACCENT,
),
),
),
)
);
$this->add_control(
'cta_border_color_hover',
array(
'label' => __( 'Border Hover Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'selectors' => array(
'{{WRAPPER}} .menu-item a.uael-menu-item.elementor-button:hover' => 'border-color: {{VALUE}};',
),
)
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
array(
'name' => 'cta_box_shadow_hover',
'label' => __( 'Box Shadow', 'uael' ),
'selector' => '{{WRAPPER}} .menu-item a.uael-menu-item.elementor-button:hover',
)
);
$this->end_controls_tabs();
$this->end_controls_section();
}
/**
* Register Nav Menu docs link.
*
* @since 1.21.0
* @access protected
*/
protected function register_helpful_information() {
if ( parent::is_internal_links() ) {
$this->start_controls_section(
'section_helpful_info',
array(
'label' => __( 'Helpful Information', 'uael' ),
)
);
$this->add_control(
'help_doc_1',
array(
'type' => Controls_Manager::RAW_HTML,
/* translators: %1$s doc link */
'raw' => sprintf( __( '%1$s Getting started article » %2$s', 'uael' ), '', '' ),
'content_classes' => 'uael-editor-doc',
)
);
$this->add_control(
'help_doc_2',
array(
'type' => Controls_Manager::RAW_HTML,
/* translators: %1$s doc link */
'raw' => sprintf( __( '%1$s How to design a custom menu? » %2$s', 'uael' ), '', '' ),
'content_classes' => 'uael-editor-doc',
)
);
$this->add_control(
'help_doc_3',
array(
'type' => Controls_Manager::RAW_HTML,
/* translators: %1$s doc link */
'raw' => sprintf( __( '%1$s Types of dropdown width and position options » %2$s', 'uael' ), '', '' ),
'content_classes' => 'uael-editor-doc',
)
);
$this->end_controls_section();
}
}
/**
* Render content type list.
*
* @since 1.21.0
* @return array Array of content type
* @access public
*/
public function get_content_type() {
$content_type = array(
'sub_menu' => __( 'Text', 'uael' ),
'saved_rows' => __( 'Saved Section', 'uael' ),
'saved_container' => __( 'Saved Container', 'uael' ),
);
if ( defined( 'ELEMENTOR_PRO_VERSION' ) ) {
$content_type['saved_modules'] = __( 'Saved Widget', 'uael' );
}
return $content_type;
}
/**
* Render custom style.
*
* @since 1.21.0
* @access public
*/
public function get_custom_style() {
$settings = $this->get_settings_for_display();
$i = 0;
$output = ' ';
$is_sub_menu_item = false;
$this->add_render_attribute(
'uael-nav-menu-custom',
'class',
'uael-nav-menu uael-nav-menu-custom uael-custom-wrapper'
);
?>
'true',
'tabindex' => '0',
)
);
$menu_icon = ob_get_clean();
} else {
$menu_icon = '';
}
array_push( $icons, $menu_icon );
}
return $icons;
}
/**
* Add itemprop for Navigation Schema.
*
* @since 1.33.1
* @param string $atts link attributes.
* @access public
*/
public function handle_li_atts( $atts ) {
$atts .= ' itemprop="name"';
return $atts;
}
/**
* Render Nav Menu output on the frontend.
*
* Written in PHP and used to generate the final HTML.
*
* @since 1.21.0
* @access protected
*/
protected function render() {
$settings = $this->get_settings_for_display();
$menu_close_icons = array();
$menu_close_icons = $this->get_menu_close_icon( $settings );
if ( 'yes' === $settings['schema_support'] ) {
$this->add_render_attribute( 'uael-nav-menu', 'itemscope', 'itemscope' );
$this->add_render_attribute( 'uael-nav-menu', 'itemtype', 'http://schema.org/SiteNavigationElement' );
}
if ( 'wordpress_menu' === $settings['menu_type'] ) {
$menu_name = isset( $settings['menu'] ) ? $settings['menu'] : '';
$args = array(
'echo' => false,
'menu' => $menu_name,
'menu_class' => 'uael-nav-menu',
'menu_id' => 'menu-' . $this->get_nav_menu_index() . '-' . $this->get_id(),
'fallback_cb' => '__return_empty_string',
'container' => '',
'walker' => new Menu_Walker(),
);
if ( 'yes' === $settings['schema_support'] ) {
add_filter( 'uael_nav_menu_attrs', array( $this, 'handle_link_attrs' ) );
add_filter( 'nav_menu_values', array( $this, 'handle_li_atts' ) );
}
$menu_html = wp_nav_menu( $args );
}
if ( 'flyout' === $settings['layout'] ) {
if ( 'flyout' === $settings['layout'] ) {
$this->add_render_attribute( 'uael-flyout', 'class', 'uael-flyout-wrapper' );
if ( 'cta' === $settings['menu_last_item'] ) {
$this->add_render_attribute( 'uael-flyout', 'data-last-item', $settings['menu_last_item'] );
}
}
?>