Tạo Mega Menu trên WordPress không dùng plugin

if (subMenuArray.length != 0 && menuArray.length != 0)
    menuArray.forEach((item, i) => {
        item.onmouseenter = (event) => {
            let postDisplay = document.querySelector('.display--post');
            if (postDisplay) {
                postDisplay.remove();
            }
            let checkLengthMenu = event.srcElement.children;
            if (checkLengthMenu.length > 1) {
                let category = convertTextToSlug(event);
                let showPost = createPostList(checkLengthMenu[1]);
                getListPost(category, showPost);
            }
        }
    });

Để tránh bị lỗi khi thực hiện fetch, thì mình cần phải check length xem menuArray và subMenuArray có độ dài lớn hơn 0 hay không. Nếu có thì mình mới bắt đầu duyệt từng MenuArray bằng foreach. Trong forEach mình sẽ bắt đầu bắt sử kiện item.onmouseenter, sự kiện này cho phép khi chúng ta hover vào thì sẽ cho phép chúng ta thực hiện code ở bên trong. Ở đoạn code trên của mình sẽ như sau, khi mình hover vào thì nó sẽ thực thi function và có biến event trong đó. Biến Event ở đây giống như với con trỏ this đấy

Bước tiếp theo mình lại tiếp tục tạo biến postDisplay và DOM đến class display–post. Rồi mình lại tiếp tục kiểm tra xem, thẻ div có class display–post này có tồn tại hay không, nếu có thì xóa nó đi, để khi các bạn hover vào menu-item khác thì nó sẽ load lại cái mới và không bị đè post lên hoặc tạo quá nhiều postDisplay. Tuy nhiên lúc này mình chưa tạo thẻ div có chứa class display–post nhé.

Sau khi mình kiểm tra, mình sẽ bắt đầu xử lí data bằng cách lấy dữ liệu từ srcElement.children. Để có thể lấy các thẻ bên trong thẻ li.menu-item, các bạn có thể dùng consol.log(event) để xem nhé.

Rồi mình lại tiếp tục kiểm tra xem length của children có lớn hơn 1 hay không. Nếu có thì mình bắt đầu chuyển nội dung thẻ a về dạng slug. thông qua hàm converTextToSlug của mình. Rồi mình lại tiếp tục tạo postList và fetch API. Dưới đây sẽ là các function để hỗ trợ cho đoạn code trên của mình:

function converTextToSlug

Mình tạo ra nhằm chuyển đổi nội dung của thẻ a về dạng slug để tiện cho viêc lấy api, childNode[0].innerHTML chính là nơi để bạn lấy nội dung của thẻ a. và sau đó mình xóa khoảng trắng đi và tạo một biến string để lưu slug lại, nếu slug lớn hơn hoặc bằng 2 kí tự thì có thêm “-“. Ở đây các bạn chú ý nhé, tiêu đề và slug chúng đều gần giống nhau cả, nếu các bạn thay đổi tiêu đề thì nên thay đổi luôn slug để tránh tình trạng không DOM đến được.

function convertTextToSlug(event) {
let categoryText = event.srcElement.childNodes[0].innerHTML.toLowerCase();
let categoryArray = categoryText.split(" ");
let category = ``;
if (categoryArray.length > 1) {
category = categoryArray.join('-');
} else if (categoryArray.length === 1) {
category = categoryArray[0];
}
return category;
}

function createPostList

function truyền vào một biến item chính là nơi mà bạn sẽ tạo element, ở đây như nãy mình nói, mình tạo một div element có chứa class là display–post để show kết quả và class loading để show ảnh gif của mình trong lúc nó fetch. Rồi cuối cùng mình return giá trị.

function createPostList(item) {
let postDisplay = document.createElement("div");
item.appendChild(postDisplay);
postDisplay.classList.add('display--post');
postDisplay.classList.add('loading');
return postDisplay;
}

createFlick

ở đây mình dùng thư viện slideshow của flick để DOM tới và tạo slide ra cho bắt mắt hơn, các bạn có thể xem flick và download tại đây nếu muốn. Còn không bạn có thể xài cái khác, tùy ý các bạn.

function createFlick() {
var flick = document.querySelector('.display--post');
var flkty = new Flickity(flick, {
// options
draggable: true,
pageDots: false,
cellAlign: 'left',
contain: true,
groupCells: 3,
});
}

getListPost

function này giúp các bạn lấy dữ liệu ra, ở đây trước khi nó lấy dữ liệu, mình đặt thêm một img để tạo ra ảnh loading trước khi fetch. Nhằm để trải nghiệm người dùng tốt hơn. Kế tiếp mình setTimeOut sau 1s thì nó sẽ xóa class Loading này đi để ẩn hình ảnh. Rồi show kết quả ra thông qua biến slidePost. Kế tiếp mình bắt đầu kiểm tra điều kiện nếu như tại nơi mình hover mà có số bài post lớn hơn 3 thì bắt đầu tạo flick, ngược lại thì không làm gì cả, còn nếu = 0 thì show không có kết quả.

function getListPost(category, showPost) {
let apiUrlCat = `${protocol}//${hostname}/wp-json/category-api/v1/cat-name`;
fetch(apiUrlCat, {
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json', // sent request
'Accept': 'application/json' // expected data sent back
},
body: JSON.stringify({ 'category': category })
})
.then(response => response.json())
.then(data => {
showPost.innerHTML = `<img style="width: 64px; height: 64px;" src="${urlImages}Dual-Ring-1s-200px.gif" alt="Loading Image" />`;
setTimeout(function() {
showPost.classList.remove("loading");
let slidePost = displayPost(data, showPost);
if (Object.keys(data).length > 3) {
createFlick();
} else if (Object.keys(data).length === 0) {
showPost.innerHTML = `Không Có Bài Viết`;
}
getListPostChild(slidePost);
}, 1000);
})
.catch(err => console.log(err));
}

displayPost: đưa dữ liệu ra ngoài html.

function displayPost(data, showPost) {
let content = ``;
data.forEach((item, i) => {
content += `
<div class="display--post-item">
<div class="post-item-thumbnail">
<a href="${item.link}"><img src="${item.thumbnail}" alt="image"></a>
</div>
<div class="post-item-title">
<a href="${item.link}">${item.title}</a>
</div>
<div class="post-item-date">
${item.date}
</div>
</div>`;
});
showPost.innerHTML = content;
return showPost;
}

là nơi các bạn hover tới các menu-item trong sub-menu đấy. về cách hoạt động thì giống như với cách mình viết xử lí ở menu-item chứa sub-menu ở trên thôi.

function getListPostChild(slidePost) {
let listSubMenuArray = document.querySelectorAll('.header .menu>.menu-item>.sub-menu>.menu-item');
// console.log(slidePost);
listSubMenuArray.forEach((item, i) => {
item.onmouseenter = (event) => {
let postDisplay = document.querySelector('.display--post');
if (postDisplay) {
postDisplay.remove();
}
let checkLengthMenu = event.srcElement.children;
let category = convertTextToSlug(event);
let showPost = createPostList(checkLengthMenu[0]);
getListPost(category, showPost);
}
});
}

.display--post {
    position: absolute;
    top: 0;
    display: flex;
    right: 0px;
    height: 100%;
    width: 100%;
    grid-column: 2 / span 7;
    padding: 30px;
    border-left: 1px solid #aaaaaa50;
    .flickity-viewport {
        height: 100% !important;
        .flickity-slider {
            width: 110%;
            .display--post-item {
                width: 250px;
                .post-item-title {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }
        }
    }
    .display--post-item {
        width: 250px;
        margin-right: 20px;
        .post-item-title {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }
    .flickity-button {
        border: 1px solid var(--tertiary-color);
    }
    .flickity-prev-next-button {
        width: 30px;
        height: 30px;
        border-radius: 0px;
    }
    /* icon color */
    .flickity-button-icon {
        fill: var(--tertiary-color);
        left: 30%;
        width: 40%;
    }
    /* position outside */
    .flickity-prev-next-button.previous {
        left: 30px;
        right: unset;
        top: unset;
        bottom: 10px;
        width: 25px;
        height: 25px;
    }
    .flickity-prev-next-button.next {
        right: unset;
        left: 65px;
        width: 25px;
        height: 25px;
        bottom: 10px;
        top: unset;
    }
}

Và đây là kết quả của chúng ta:

Tổng kết

Như vậy, mình đã hướng dẫn cho các bạn về cách làm Mega Menu trên WordPress bằng cách custom link api và fetch api bằng javascript để lấy dữ liệu ra kèm theo việc bắt sự kiện hover vào menu để thực thi dữ liệu. Các bạn có thể custom lại theo ý các bạn nhé. Mọi thông tin thắc mắc, các bạn cứ liên hệ fanpage : https://www.facebook.com/Wolfactiveweb.design.SEO/ tụi mình để được giải đáp nhé. Chúc các bạn thành công và WolfActive chúc các bạn một ngày vui vẻ nhé <3 .