Trang chủ » Wordpress » Hướng dẫn thêm Mega Menu trên Header Theme Flatsome

Hướng dẫn thêm Mega Menu trên Header Theme Flatsome

1 Views Cập nhật lần cuối 29/03/18 by Webstartup Wordpress

Theme Flatsome là một theme đang được sử dụng phổ biến với nhiều sự tùy biến và đặc biệt sự gọn nhẹ tốc độ load nhanh nên rất được nhiều người ưa thích sử dụng cho website giới thiệu hoặc website bán hàng hiện tại mình củng đang sử dụng theme này cho nhiều dự án của mình.

Hướng dẫn thêm Mega Menu trên Header Theme Flatsome
Hướng dẫn thêm Mega Menu trên Header Theme Flatsome

Hôm nay mình xin chia sẽ một cách thêm Mega Menu trên Header Theme Flatsome. Sau đây các bạn có thể làm theo các bước mình hướng dẫn tạo các file theo yêu cầu:

Để thực hiện thêm Mega Menu trên Header Theme Flatsome

Bước 1: Tạo một file options-header-mega-menu.php  theo đường dẫn inc/admin/options/header/options-header-mega-menu.php và thêm đoạn code sau:

@@ -0,0 +1,30 @@
+<?php
+
+/*************
+ * - Wishlist Options
+ *************/
+
+  Flatsome_Option::add_section( 'header_mega_menu', array(
+    'title'       => __( 'Mega Menu', 'flatsome-admin' ),
+    'panel'       => 'header',
+    'priority' => 110,
+  ) );
+
+  function flatsome_refresh_mega_menu_partials( WP_Customize_Manager $wp_customize ) {
+
+    // Abort if selective refresh is not available.
+    if ( ! isset( $wp_customize->selective_refresh ) ) {
+        return;
+    }
+
+    $wp_customize->selective_refresh->add_partial( 'header-mega-menu', array(
+        'selector' => '.header-mega-menu',
+        'container_inclusive' => true,
+        'settings' => array(),
+        'render_callback' => function() {
+             return get_template_part('template-parts/header/partials/element','mega-menu');
+        },
+    ) );
+
+  }
+  add_action( 'customize_register', 'flatsome_refresh_mega_menu_partials' );

Bước 2: Vào file options-header.php theo đường dẫn: inc/admin/options/header/options-header.php và thêm đường dẫn đến file vừa tạo options-header-mega-menu.php như hướng dẫn bên dưới:

 include_once(dirname( __FILE__ ).'/options-header-content.php');
 include_once(dirname( __FILE__ ).'/options-header-contact.php');
 include_once(dirname( __FILE__ ).'/options-header-newsletter.php');
+include_once(dirname( __FILE__ ).'/options-header-mega-menu.php');
 
 if(class_exists( 'YITH_WCWL' )){
 	include_once(dirname( __FILE__ ).'/options-header-wishlist.php');

Bước 3: Vào file options-helpers.php  theo đường dẫn inc/admin/options/helpers/options-helpers.php và thêm đoạn code như hướng dẫn sau:

'html-3' => __( 'HTML 3', 'flatsome-admin' ),
   'html-4' => __( 'HTML 4', 'flatsome-admin' ),
   'html-5' => __( 'HTML 5', 'flatsome-admin' ),
+    'mega-menu' => __( 'Mega Menu', 'flatsome-admin' ),
 );
 
 // Add Hooked Header Elements

Bước 4: Tiếp tục vào file function-setup.php  theo đường dẫn inc/functions/function-setup.php và thêm đoạn code như hướng dẫn sau:

 'footer' => __( 'Footer Menu', 'flatsome' ),
     'top_bar_nav' => __( 'Top Bar Menu', 'flatsome' ),
     'my_account' => __( 'My Account Menu', 'flatsome' ),
+      'mega_menu' => __( 'Mega Menu', 'flatsome' ),
   ) );
 
   /*  Enable support for Post Formats */

Bước 5: Tạo một file element-mega-menu.php   theo đường dẫn template-parts/header/partials/element-mega-menu.php và thêm đoạn code sau.

+<div id="mega-menu-wrap">
+    <div id="mega-menu-title"><i class="fa fa-bars"></i> <?php esc_html_e( 'DANH MỤC SẢN PHẨM', 'flatsome' ) ?></div>
+    <?php
+    wp_nav_menu(array(
+        'theme_location' => 'mega_menu',
+        'container'       => false,
+        'menu_id' => 'mega_menu',
+        'depth'           => 0
+    ));
+    ?>
+</div>

Tiếp theo là đến phần CSS và JS để làm đẹp cho Menu

Các bạn có thể viết css và js trên Customize của theme để tiện chỉnh sửa và có nhiều cách khác nữa nhé:

  • CSS:
/** mega menu */

#wide-nav > .flex-row > .flex-left {
    width: 25%;
    min-width: 245px;
    margin-right: 15px;
}

#mega-menu-wrap {
    width: 100%;
    background: #1d71ab;
    position: relative;
}

#mega-menu-title {
    padding: 10px 0 10px 15px;
    font-size: 15px;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    color: #fff;
    cursor: pointer
}

#mega-menu-title i {
    margin-right: 9px
}

#mega_menu {
    position: absolute;
    top: 100%;
    margin-top: 20px;
    left: 0;
    width: 100%;
    border: 1px solid #ddd;
    padding: 0;
    background: #fff;
    display: none
}

#header.header.has-sticky .header-wrapper.stuck #mega_menu {
    margin-top: 0;
}

body.home #mega_menu {
    display: block
}

#mega_menu > li {
    position: relative;
    z-index: 8
}

#mega_menu li a {
    padding: 7px 15px;
    display: block;
    font-size: 14px
}

#mega_menu > li > a:after {
    content: "\f105";
    font-family: FontAwesome;
    float: right
}

#mega_menu > li > a {
    position: relative;
    padding-left: 40px
}

#mega_menu > li > a > img {
    position: absolute;
    top: 8px;
    left: 8px
}

#mega_menu > li:hover > a {
    background: #f5f5f5
}

#mega_menu li > .toggle {
    display: none
}

#mega_menu > li > ul.sub-menu {
    position: absolute;
    top: -1px;
    left: 100%;
    background: #fff;
    width: 201%;
    min-height: 334px;
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175)
}

#mega_menu ul.sub-menu > li > a {
    width: 50%
}

#mega_menu ul.sub-menu > li:hover > a {
    background: #f5f5f5
}

#mega_menu ul.sub-menu li a, #mega_menu > li:hover > ul.sub-menu {
    display: block
}

#header.header.has-sticky .header-wrapper.stuck #mega_menu:not(.active) {
    display: none
}

#header.header #mega_menu.active {
    display: block
}

#mega_menu > li > .menu-image {
    position: absolute;
    left: 100%;
    top: 0px;
    display: none;
    width: 200%;
    background: #fff;
    text-align: right;
}

#mega_menu > li > .menu-image > img {
    position: relative;
    z-index: 1;
    max-width: 49%;
    max-height: 330px;
    margin-top: 1px;
}

#mega_menu > li:hover > .menu-image, #mega_menu > li:hover > ul.sub-menu {
    display: block
}

#mega_menu > li:hover > ul.sub-menu:before {
    content: "";
    background: 0 0;
    position: absolute;
    top: -1px;
    bottom: 0;
    width: 15px;
    left: -15px
}

#mega_menu ul.sub-menu > li {
    position: relative
}

#mega_menu ul.sub-menu > li > .menu-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    min-height: 240px;
    background: #fff;
    text-align: right;
    display: none;
    z-index: 2
}

#mega_menu ul.sub-menu > li > .menu-image > img {
    width: 100%
}

#mega_menu ul.sub-menu > li:hover > .menu-image {
    display: block
}
  • Javascript:
<script>
jQuery(document).ready(function () {
    jQuery("#mega-menu-title").click(function () {

        jQuery("#mega_menu").toggleClass("active")

    }),
    jQuery("body").click(function (e) {

        var i = jQuery(e.target);
        "mega-menu-title" != i.attr("id") && jQuery("#mega_menu.active").removeClass("active")

    }),
    jQuery("#mega_menu>li").each(function (e) {

        jQuery(this).children(".sub-menu").css("margin-top", 37 * -e + "px"), jQuery(this).children(".menu-image").css("margin-top", 37 * -e + "px"), jQuery(this).find("li").each(function (e) {
            jQuery(this).children(".menu-image").css("margin-top", 36 * -e + "px")
        })

    })

});
</script>

Các bạn có thểm xem Demo tại đây: https://darlingvietnam.net/

Như vậy là xong, các bạn có thê ra xem website của mình đã hoạt động tốt như mong muốn chưa nhé, có thắc mắc gì về các làm cứ inbox mình hướng dẫn thêm nhé: facebook: Quốc Việt, Sky: vietfc0405

Nguồn tham khảo: Nhannd341