slug ] = $menu->name; } return $options; } /** * Register menu widget controls. * * Adds different input fields to allow the user to change and customize the widget settings. * * @since 1.0.0 * @access protected */ protected function register_controls() { $menus = $this->get_available_menus(); //General Section $this->start_controls_section( 'menu_section', [ 'label' => esc_html__( 'Menu', 'zozo-header-footer' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); if( !empty( $menus ) ){ $this->add_control( 'menu', [ 'label' => esc_html__( 'Menu Layout', 'zozo-header-footer' ), 'type' => Controls_Manager::SELECT, 'default' => array_keys($menus)[0], 'options' => $menus ] ); }else{ $this->add_control( 'menu', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => sprintf( __( 'There are no menus in your site.
Go to the Menus screen to create one.', 'zozo-header-footer' ), admin_url( 'nav-menus.php?action=edit&menu=0' ) ), 'content_classes' => 'elementor-panel-alert elementor-panel-alert-info', ] ); } $this->add_responsive_control( 'menu_height', [ 'label' => esc_html__( 'Max Height', 'zozo-header-footer' ) . ' (px)', 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => 'px', 'size' => 80, ], 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 10, 'max' => 500, 'step' => 1, ], ], 'selectors' => [ '{{WRAPPER}} .zhf-menu-wrap .zhf-nav-menu > li' => 'height: {{SIZE}}{{UNIT}}; line-height: {{SIZE}}{{UNIT}};', ], 'frontend_available' => true, ] ); $this->end_controls_section(); //Layout Section $this->start_controls_section( 'layout_section', [ 'label' => esc_html__( 'Layout', 'zozo-header-footer' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'layout', [ 'label' => esc_html__( 'Layout', 'zozo-header-footer' ), 'type' => Controls_Manager::SELECT, 'default' => 'horizontal', 'options' => [ 'horizontal' => esc_html__( 'Horizontal', 'zozo-header-footer' ), 'vertical' => esc_html__( 'Vertical', 'zozo-header-footer' ), 'expandable' => esc_html__( 'Expanded', 'zozo-header-footer' ), 'fly' => esc_html__( 'Flyout', 'zozo-header-footer' ) ] ] ); $this->add_control( 'layout_class', [ 'label' => esc_html__( 'Layout Class', 'textdomain' ), 'type' => Controls_Manager::HIDDEN, 'default' => 'vertical-enabled', 'prefix_class' => 'zhf-', 'condition' => [ 'layout!' => [ 'horizontal' ], ], ] ); $this->add_control( 'fly_type', [ 'label' => esc_html__( 'Flyout Type', 'zozo-header-footer' ), 'type' => Controls_Manager::SELECT, 'default' => 'slide', 'options' => [ 'slide' => esc_html__( 'Slide', 'zozo-header-footer' ), 'push' => esc_html__( 'Push', 'zozo-header-footer' ) ], 'prefix_class' => 'zhf-fly-enabled zhf-fly-layout-', 'condition' => [ 'layout' => [ 'fly' ], ], ] ); $this->add_control( 'fly_position', [ 'label' => esc_html__( 'Flyout Position', 'zozo-header-footer' ), 'type' => Controls_Manager::SELECT, 'default' => 'left', 'options' => [ 'left' => esc_html__( 'Left', 'zozo-header-footer' ), 'right' => esc_html__( 'Right', 'zozo-header-footer' ) ], 'condition' => [ 'layout' => [ 'fly' ], ], 'prefix_class' => 'zhf-fly-', ] ); $this->add_control( 'navmenu_align', [ 'label' => esc_html__( 'Alignment', 'zozo-header-footer' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => esc_html__( 'Left', 'zozo-header-footer' ), 'icon' => 'eicon-h-align-left', ], 'center' => [ 'title' => esc_html__( 'Center', 'zozo-header-footer' ), 'icon' => 'eicon-h-align-center', ], 'right' => [ 'title' => esc_html__( 'Right', 'zozo-header-footer' ), 'icon' => 'eicon-h-align-right', ], 'justify' => [ 'title' => esc_html__( 'Justify', 'zozo-header-footer' ), 'icon' => 'eicon-h-align-stretch', ], ], 'default' => 'left', 'condition' => [ 'layout' => [ 'horizontal', 'vertical' ], ], 'prefix_class' => 'zhf-nav-menu-align-', ] ); $this->add_control( 'submenu_icon', [ 'label' => esc_html__( 'Submenu Icon', 'zozo-header-footer' ), 'type' => Controls_Manager::SELECT, 'default' => 'arrow', 'options' => [ 'arrow' => esc_html__( 'Arrows', 'zozo-header-footer' ), 'plus' => esc_html__( 'Plus Sign', 'zozo-header-footer' ) ], 'prefix_class' => 'zhf-submenu-icon-', ] ); $this->add_control( 'responsive_options', [ 'label' => esc_html__( 'Responsive Options', 'zozo-header-footer' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'layout' => [ 'horizontal', 'vertical', 'fly' ], ], ] ); $this->add_responsive_control( 'responsive_from', [ 'label' => esc_html__( 'Mobile Menu From', 'zozo-header-footer' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 300, 'max' => 1500, 'step' => 1 ], ], 'default' => [ 'unit' => 'px', 'size' => 992, ], 'condition' => [ 'layout' => [ 'horizontal', 'vertical' ], ], ] ); $this->add_control( 'trigger_align', [ 'label' => esc_html__( 'Trigger Alignment', 'zozo-header-footer' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => esc_html__( 'Left', 'zozo-header-footer' ), 'icon' => 'eicon-h-align-left', ], 'center' => [ 'title' => esc_html__( 'Center', 'zozo-header-footer' ), 'icon' => 'eicon-h-align-center', ], 'right' => [ 'title' => esc_html__( 'Right', 'zozo-header-footer' ), 'icon' => 'eicon-h-align-right', ] ], 'default' => 'left', 'selectors' => [ '{{WRAPPER}} .zhf-menu-toggle-wrap' => 'text-align: {{VALUE}};' ], ] ); $this->end_controls_section(); // Menu Style $this->start_controls_section( 'section_style_main_menu', [ 'label' => esc_html__( 'Main Menu', 'zozo-header-footer' ), 'tab' => Controls_Manager::TAB_STYLE ] ); $this->add_responsive_control( 'padding_menu_item', [ 'label' => esc_html__( 'Padding', 'zozo-header-footer' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'max' => 100, ], ], 'default' => [ 'size' => 15, 'unit' => 'px', ], 'selectors' => [ '{{WRAPPER}} .zhf-nav-menu li.menu-item > a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], 'frontend_available' => true, ] ); $this->add_responsive_control( 'margin_menu_item', [ 'label' => esc_html__( 'Margin', 'zozo-header-footer' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'max' => 100, ], ], 'default' => [ 'size' => 15, 'unit' => 'px', ], 'selectors' => [ '{{WRAPPER}} .zhf-nav-menu li.menu-item > a' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], 'condition' => [ 'layout!' => 'horizontal', ], 'frontend_available' => true, ] ); $this->add_responsive_control( 'menu_space_between', [ 'label' => esc_html__( 'Space Between', 'zozo-header-footer' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'max' => 100, ], ], 'selectors' => [ 'body:not(.rtl) {{WRAPPER}} .zhf-nav-menu > li.menu-item:not(:last-child)' => 'margin-right: {{SIZE}}{{UNIT}}', 'body.rtl {{WRAPPER}} .zhf-nav-menu > li.menu-item:not(:last-child)' => 'margin-left: {{SIZE}}{{UNIT}}' ], 'condition' => [ 'layout' => 'horizontal', ], 'frontend_available' => true, ] ); $this->add_responsive_control( 'menu_row_space', [ 'label' => esc_html__( 'Row Spacing', 'zozo-header-footer' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .zhf-nav-menu > li.menu-item' => 'margin-bottom: {{SIZE}}{{UNIT}}' ], 'condition' => [ 'layout' => 'horizontal', ], 'frontend_available' => true, ] ); $this->add_control( 'menu_typography_options', [ 'label' => esc_html__( 'Menu Typography', 'zozo-header-footer' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before' ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'menu_typography', 'selector' => '{{WRAPPER}} .zhf-nav-menu li.menu-item a', 'global' => [ 'default' => Global_Typography::TYPOGRAPHY_TEXT, ], ] ); $this->add_control( 'menu_skin_options', [ 'label' => esc_html__( 'Menu Skin', 'zozo-header-footer' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before' ] ); $this->start_controls_tabs( 'tabs_menu_item_style' ); $this->start_controls_tab( 'tab_menu_item_normal', [ 'label' => esc_html__( 'Normal', 'zozo-header-footer' ), ] ); $this->add_control( 'color_menu_item', [ 'label' => esc_html__( 'Text Color', 'zozo-header-footer' ), 'type' => Controls_Manager::COLOR, 'global' => [ 'default' => Global_Colors::COLOR_TEXT, ], 'default' => '', 'selectors' => [ '{{WRAPPER}} .zhf-nav-menu li.menu-item a' => 'color: {{VALUE}}', ], ] ); $this->add_control( 'bg_color_menu_item', [ 'label' => esc_html__( 'Background Color', 'zozo-header-footer' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .zhf-nav-menu li.menu-item a' => 'background-color: {{VALUE}}', ] ] ); $this->end_controls_tab(); $this->start_controls_tab( 'tab_menu_item_hover', [ 'label' => esc_html__( 'Hover', 'zozo-header-footer' ), ] ); $this->add_control( 'color_menu_item_hover', [ 'label' => esc_html__( 'Text Color', 'zozo-header-footer' ), 'type' => Controls_Manager::COLOR, 'global' => [ 'default' => Global_Colors::COLOR_ACCENT, ], 'selectors' => [ '{{WRAPPER}} .zhf-nav-menu li.menu-item a:hover' => 'color: {{VALUE}}', ], ] ); $this->add_control( 'bg_color_menu_item_hover', [ 'label' => esc_html__( 'Background Color', 'zozo-header-footer' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .zhf-nav-menu li.menu-item a:hover' => 'background-color: {{VALUE}}', ] ] ); $this->end_controls_tab(); $this->start_controls_tab( 'tab_menu_item_active', [ 'label' => esc_html__( 'Active', 'zozo-header-footer' ), ] ); $this->add_control( 'color_menu_item_active', [ 'label' => esc_html__( 'Text Color', 'zozo-header-footer' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .zhf-nav-menu li.menu-item a:focus, {{WRAPPER}} .zhf-nav-menu li.menu-item a:active, {{WRAPPER}} .zhf-nav-menu li.menu-item.current-menu-item > a, {{WRAPPER}} .zhf-nav-menu li.menu-item.current-menu-ancestor > a' => 'color: {{VALUE}}', ], ] ); $this->add_control( 'bg_color_menu_item_active', [ 'label' => esc_html__( 'Background Color', 'zozo-header-footer' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .zhf-nav-menu li.menu-item a:focus, {{WRAPPER}} .zhf-nav-menu li.menu-item a:active' => 'background-color: {{VALUE}}', ] ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); // Dropdown Style $this->start_controls_section( 'section_style_dropdown', [ 'label' => esc_html__( 'Dropdown', 'zozo-header-footer' ), 'tab' => Controls_Manager::TAB_STYLE ] ); $this->add_control( 'dropdown_outer_options', [ 'label' => esc_html__( 'Dropdown Styles', 'zozo-header-footer' ), 'type' => Controls_Manager::HEADING ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'dropdown_border', 'selector' => '{{WRAPPER}} .zhf-nav-menu .sub-menu', ] ); $this->add_responsive_control( 'dropdown_border_radius', [ 'label' => esc_html__( 'Border Radius', 'zozo-header-footer' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{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' ], 'frontend_available' => true, ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'dropdown_box_shadow', 'exclude' => [ 'box_shadow_position', ], 'selector' => '{{WRAPPER}} .zhf-nav-menu .sub-menu' ] ); $this->add_control( 'dropdown_item_options', [ 'label' => esc_html__( 'Dropdown Item Styles', 'zozo-header-footer' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before' ] ); $this->add_responsive_control( 'padding_dropdown', [ 'label' => esc_html__( 'Padding', 'zozo-header-footer' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'max' => 100, ], ], 'default' => [ 'size' => 15, 'unit' => 'px', ], 'selectors' => [ '{{WRAPPER}} .zhf-nav-menu .sub-menu li.menu-item > a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], 'frontend_available' => true, ] ); $this->add_responsive_control( 'margin_dropdown', [ 'label' => esc_html__( 'Margin', 'zozo-header-footer' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'max' => 100, ], ], 'default' => [ 'size' => 15, 'unit' => 'px', ], 'selectors' => [ '{{WRAPPER}} .zhf-nav-menu .sub-menu li.menu-item > a' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], 'frontend_available' => true, ] ); $this->add_control( 'dropdown_typography_options', [ 'label' => esc_html__( 'Menu Typography', 'zozo-header-footer' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before' ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'dropdown_typography', 'selector' => '{{WRAPPER}} .zhf-nav-menu .sub-menu li.menu-item a', 'global' => [ 'default' => Global_Typography::TYPOGRAPHY_TEXT, ], ] ); $this->add_control( 'dropdown_skin_options', [ 'label' => esc_html__( 'Menu Skin', 'zozo-header-footer' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before' ] ); $this->start_controls_tabs( 'tabs_dropdown_style' ); $this->start_controls_tab( 'tab_dropdown_normal', [ 'label' => esc_html__( 'Normal', 'zozo-header-footer' ), ] ); $this->add_control( 'color_dropdown', [ 'label' => esc_html__( 'Text Color', 'zozo-header-footer' ), 'type' => Controls_Manager::COLOR, 'global' => [ 'default' => Global_Colors::COLOR_TEXT, ], 'default' => '', 'selectors' => [ '{{WRAPPER}} .zhf-nav-menu .sub-menu li.menu-item a' => 'color: {{VALUE}}', ], ] ); $this->add_control( 'bg_color_dropdown', [ 'label' => esc_html__( 'Background Color', 'zozo-header-footer' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .zhf-nav-menu .sub-menu' => 'background-color: {{VALUE}}', ] ] ); $this->end_controls_tab(); $this->start_controls_tab( 'tab_dropdown_hover', [ 'label' => esc_html__( 'Hover', 'zozo-header-footer' ), ] ); $this->add_control( 'color_dropdown_hover', [ 'label' => esc_html__( 'Text Color', 'zozo-header-footer' ), 'type' => Controls_Manager::COLOR, 'global' => [ 'default' => Global_Colors::COLOR_ACCENT, ], 'selectors' => [ '{{WRAPPER}} .zhf-nav-menu .sub-menu li.menu-item a:hover' => 'color: {{VALUE}}', ], ] ); $this->add_control( 'bg_color_dropdown_hover', [ 'label' => esc_html__( 'Background Color', 'zozo-header-footer' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .zhf-nav-menu .sub-menu li.menu-item a:hover' => 'background-color: {{VALUE}}', ] ] ); $this->end_controls_tab(); $this->start_controls_tab( 'tab_dropdown_active', [ 'label' => esc_html__( 'Active', 'zozo-header-footer' ), ] ); $this->add_control( 'color_dropdown_active', [ 'label' => esc_html__( 'Text Color', 'zozo-header-footer' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .zhf-nav-menu .sub-menu li.menu-item a:focus, {{WRAPPER}} .zhf-nav-menu li.menu-item a:active' => 'color: {{VALUE}}', ], ] ); $this->add_control( 'bg_color_dropdown_active', [ 'label' => esc_html__( 'Background Color', 'zozo-header-footer' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .zhf-nav-menu .sub-menu li.menu-item a:focus, {{WRAPPER}} .zhf-nav-menu li.menu-item a:active' => 'background-color: {{VALUE}}', ] ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); // Toggle Style $this->start_controls_section( 'section_style_toggle', [ 'label' => esc_html__( 'Toggle Icon', 'zozo-header-footer' ), 'tab' => Controls_Manager::TAB_STYLE ] ); $this->add_responsive_control( 'padding_toggle_icon', [ 'label' => esc_html__( 'Padding', 'zozo-header-footer' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .zhf-menu-toggle' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], 'frontend_available' => true, ] ); $this->add_responsive_control( 'margin_toggle_icon', [ 'label' => esc_html__( 'Margin', 'zozo-header-footer' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .zhf-menu-toggle' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], 'frontend_available' => true, ] ); $this->start_controls_tabs( 'tabs_toggle_style' ); $this->start_controls_tab( 'toggle_style_normal', [ 'label' => esc_html__( 'Normal', 'zozo-header-footer' ), ] ); $this->add_control( 'toggle_color', [ 'label' => esc_html__( 'Color', 'zozo-header-footer' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .zhf-menu-toggle' => 'color: {{VALUE}}' ], ] ); $this->add_control( 'toggle_background_color', [ 'label' => esc_html__( 'Background Color', 'zozo-header-footer' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .zhf-menu-toggle' => 'background-color: {{VALUE}};', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'toggle_hover', [ 'label' => esc_html__( 'Hover', 'zozo-header-footer' ), ] ); $this->add_control( 'toggle_hover_color', [ 'label' => esc_html__( 'Color', 'zozo-header-footer' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .zhf-menu-toggle:hover' => 'color: {{VALUE}}' ], ] ); $this->add_control( 'toggle_hover_background_color', [ 'label' => esc_html__( 'Background Color', 'zozo-header-footer' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .zhf-menu-toggle:hover' => 'background-color: {{VALUE}};', ], ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->add_responsive_control( 'toggle_size', [ 'label' => esc_html__( 'Icon Size', 'zozo-header-footer' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 15, ], ], 'selectors' => [ '{{WRAPPER}} .zhf-menu-toggle' => 'font-size: {{SIZE}}{{UNIT}}' ], 'frontend_available' => true, 'separator' => 'before', ] ); $this->add_responsive_control( 'toggle_border_width', [ 'label' => esc_html__( 'Border Width', 'zozo-header-footer' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'max' => 10, ], ], 'selectors' => [ '{{WRAPPER}} .zhf-menu-toggle' => 'border-width: {{SIZE}}{{UNIT}};', ], 'frontend_available' => true, ] ); $this->add_responsive_control( 'toggle_border_radius', [ 'label' => esc_html__( 'Border Radius', 'zozo-header-footer' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .zhf-menu-toggle' => 'border-radius: {{SIZE}}{{UNIT}}', ], 'frontend_available' => true, ] ); $this->end_controls_section(); // Flyout Style $this->start_controls_section( 'section_style_flyout', [ 'label' => esc_html__( 'Flyout', 'zozo-header-footer' ), 'tab' => Controls_Manager::TAB_STYLE ] ); $this->add_responsive_control( 'padding_flyout', [ 'label' => esc_html__( 'Padding', 'zozo-header-footer' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'max' => 100, ], ], 'default' => [ 'size' => 15, 'unit' => 'px', ], 'selectors' => [ '{{WRAPPER}}.zhf-fly-enabled .zhf-menu-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], 'frontend_available' => true, ] ); $this->add_responsive_control( 'margin_flyout', [ 'label' => esc_html__( 'Margin', 'zozo-header-footer' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}}.zhf-fly-enabled .zhf-menu-wrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ], 'frontend_available' => true, ] ); $this->add_control( 'flyout_bg', [ 'label' => esc_html__( 'Background Color', 'zozo-header-footer' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}}.zhf-fly-enabled .zhf-menu-wrap' => 'background-color: {{VALUE}}', ] ] ); $this->add_responsive_control( 'menu_top_space', [ 'label' => esc_html__( 'Menu Top Space', 'zozo-header-footer' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}}.zhf-fly-enabled .zhf-menu-wrap .zhf-nav-menu' => 'margin-top: {{SIZE}}{{UNIT}}' ], 'frontend_available' => true, ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'flyout_box_shadow', 'exclude' => [ 'box_shadow_position', ], 'selector' => '{{WRAPPER}}.zhf-fly-enabled .zhf-menu-wrap' ] ); $this->add_control( 'flyout_icon_options', [ 'label' => esc_html__( 'Flyout Icon', 'zozo-header-footer' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before' ] ); $this->start_controls_tabs( 'flyout_icon_style' ); $this->start_controls_tab( 'flyout_icon_normal', [ 'label' => esc_html__( 'Normal', 'zozo-header-footer' ), ] ); $this->add_control( 'flyout_icon_color', [ 'label' => esc_html__( 'Text Color', 'zozo-header-footer' ), 'type' => Controls_Manager::COLOR, 'global' => [ 'default' => Global_Colors::COLOR_TEXT, ], 'default' => '', 'selectors' => [ '{{WRAPPER}}.zhf-fly-enabled .zhf-menu-wrap .zhf-menu-toggle' => 'color: {{VALUE}}', ], ] ); $this->add_control( 'flyout_icon_bg', [ 'label' => esc_html__( 'Background Color', 'zozo-header-footer' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}}.zhf-fly-enabled .zhf-menu-wrap .zhf-menu-toggle' => 'background-color: {{VALUE}}', ] ] ); $this->end_controls_tab(); $this->start_controls_tab( 'flyout_icon_hover', [ 'label' => esc_html__( 'Hover', 'zozo-header-footer' ), ] ); $this->add_control( 'flyout_icon_hcolor', [ 'label' => esc_html__( 'Text Color', 'zozo-header-footer' ), 'type' => Controls_Manager::COLOR, 'global' => [ 'default' => Global_Colors::COLOR_ACCENT, ], 'selectors' => [ '{{WRAPPER}}.zhf-fly-enabled .zhf-menu-wrap .zhf-menu-toggle:hover' => 'color: {{VALUE}}', ], ] ); $this->add_control( 'flyout_icon_hbg', [ 'label' => esc_html__( 'Background Color', 'zozo-header-footer' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}}.zhf-fly-enabled .zhf-menu-wrap .zhf-menu-toggle:hover' => 'background-color: {{VALUE}}', ] ] ); $this->end_controls_tab(); $this->end_controls_section(); } /** * Render menu widget output on the frontend. * * Written in PHP and used to generate the final HTML. * * @since 1.0.0 * @access protected */ public function render_content() { /** * Before widget render content. * * Fires before Elementor widget is being rendered. * * @since 1.0.0 * * @param Widget_Base $this The current widget. */ do_action( 'elementor/widget/before_render_content', $this ); ob_start(); $skin = $this->get_current_skin(); if ( $skin ) { $skin->set_parent( $this ); $skin->render(); } else { $this->render(); } $widget_content = ob_get_clean(); $settings = $this->get_settings_for_display(); $res_from = isset( $settings['responsive_from'] ) ? $settings['responsive_from']['size'] : 0; $layout = isset( $settings['layout'] ) ? $settings['layout'] : 'horizontal'; if( $layout == 'expandable' || $layout == 'fly' ) $res_from = 5000; $this->add_render_attribute( 'zfh-menu-container', 'class', 'elementor-widget-container' ); $this->add_render_attribute( 'zfh-menu-container', 'data-responsive', absint( $res_from ) ); ?>
get_render_attribute_string( 'zfh-menu-container' ); ?>>
get_settings_for_display(); extract( $settings ); $layout = isset( $layout ) ? $layout : ''; $menu = !empty( $menu ) ? $menu : ''; $menu_wrap_class = ''; $menu_wrap_class .= $layout ? ' zhf-menu-'.$layout : ''; if( $layout == 'fly' ){ $fly_type = isset( $fly_type ) ? $fly_type : 'slide'; $fly_position = isset( $fly_position ) ? $fly_position : 'left'; $menu_wrap_class .= ' zhf-'. esc_attr( $fly_type ) .'-'. esc_attr( $fly_position ); } //if( $layout == 'expandable' || $layout == 'fly' ) $menu_wrap_class .= ' zhf-menu-vertical'; add_filter( 'nav_menu_item_title', array( $this, 'zfh_add_sub_menu_icon' ), 10, 4 ); ?>
'; wp_nav_menu( array( 'container' => '', 'menu_class' => 'zhf-nav-menu', 'menu' => $menu ) ); echo ''; }else{ echo "Select menu"; } remove_filter( 'nav_menu_item_title', array( $this, 'zfh_add_sub_menu_icon' ), 10, 4 ); } public static function zfh_add_sub_menu_icon( $title, $menu_item, $args, $depth ){ if( in_array( "menu-item-has-children", $menu_item->classes ) ) { return $title .''; } return $title; } }