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ô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:
<?php
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');
Bước 3: Các chỉnh sửa file theo đường dẫn sau inc/admin/options/helpers/options-helpers.php
'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:
/* Register menus. */ register_nav_menus( array( 'primary' => __( 'Main Menu', 'flatsome' ), 'primary_mobile' => __( 'Main Menu - Mobile', 'flatsome' ), 'footer' => __( 'Footer Menu', 'flatsome' ), 'top_bar_nav' => __( 'Top Bar Menu', 'flatsome' ), 'my_account' => __( 'My Account Menu', 'flatsome' ), +'mega_menu' => __( 'Mega Menu', 'flatsome' ), ) );
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> <div class="list_menu_header"> <?php wp_nav_menu(array( 'theme_location' => 'mega_menu', 'container' => false, 'menu_id' => 'mega_menu', 'depth' => 0 )); ?> </div> </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:0;
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}
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
