Cách tạo WordPress Mega Menu - Phần 6 (Code Mega Menu CSS - Desktop)

Tiếp tục với series bài viết hướng dẫn tạo WordPress Mega Menu phần trước. Hôm nay chúng ta sẽ tiếp tục với phần 6 là code hiển thị frontend cho WordPress Mega Menu sau khi đã code các field (settings) hiển thị ở phần Admin. Project URL: https://github.com/MiloTheme/WordPressMegaMenu Do sẽ hướng dẫn chi tiết cách code nên bài viết sẽ được chia thành nhiều phần khác nhau. Các bạn có thể xem các phần khác theo link dưới đây: Phần 1: Cấu trúc file và thư viện Phần 2: Các field cần thiết cho Mega Menu Phần 3: Code Setting Field Mega Menu Phần 4: Code Setting Field Mega Menu Admin Display Phần 5: Code Mega Menu Frontend Display Phần 6: Code Mega Menu CSS Dropdown Updating... Ở phần 6 này sẽ hướng dẫn code file chính của menu là: megamenu.scss để tạo ra file css cho menu. Để build file scss sang css các bạn có thể dùng phần mềm Prepros: https://prepros.io/ hoặc dùng GULP

6.1. General CSS Menu

Do ở trên chúng ta sử dụng class navbar-nav của bootstrap nên cần **reset style **một số element: (phần này sử dụng chung cho cả 3 loại Menu)

.navbar-nav {
    cursor: default;
    display: inline-block;
    padding: 0;
    a, ul, li, div, form, input {
        margin: 0;
        padding: 0;
        border: none;
        outline: none;
        font-family: $menu_font;
    }
    a { 
        text-decoration: none; 
        position: relative;
    }
    li {
        list-style: none;    
    }
}

General CSS cho Menu Level 0, Icon

.navbar-nav {
    > li {
        // Only level 0
        > a {
            display: inline-block;
            padding: 20px 20px;
            position: relative;
            text-transform: uppercase;
            @include transition(all .3s ease);
        }
        // GENERAL
        a {
            // Icon
            i {
                line-height: 20px;
                &.left {
                    padding-right: 5px;
                    float: left;
                }
                &.center {
                    padding-left: 5px;
                }
                &.right {
                    padding-left: 5px;
                }
            }
            // Sub label
            span.haru_sub_label {
                color: $white;
                font-size: 10px;
                margin-left: 5px;
                padding: 1px 3px;
            }
            // Caret symbol
            &:after {
                content: '\f107'; 
                font-family: FontAwesome;
                padding-left: 5px;
            }
            &:only-child:after { 
                content: '';
            }

        }
        // DROPDOWN STYLE
        &.menu_style_dropdown {
        
        }
        // COLUMNS STYLE
        &.menu_style_column {
        
        }
        // TAB STYLE
        &.menu_style_tab {
        
        }

6.2. Dropdown Menu CSS

CSS Dropdown Menu:

// DROPDOWN STYLE
        &.menu_style_dropdown {
            // Code for Dropdown Menu
        }

**CSS chung cho các sub menu **

// All sub menu have same style
            ul {
                background-color: $white;
                display: none;
                opacity: 0;
                overflow: hidden;
                position: absolute;
                visibility: hidden;
                @include box-shadow(0 0px 4px 0 rgba(0, 0, 0, .2));
                // Animate css @TODO: need change to config
                @include animation-duration(.5s);
                @include animation-delay(.1s);
                li {
                    display: block;
                    float: none;
                    min-width: 250px;
                    position: relative;
                    a {
                        display: block;
                        line-height: 20px;
                        padding: 10px 20px;
                        &:after {
                            position: absolute;
                            right: 15px;
                            @include transition(all .3s);
                        }
                    }
                }
            }

CSS cho menu khi Hover

// Hover on each level
            &:hover {
                // Level 1
                > ul {
                    display: block;
                    opacity: 1;
                    visibility: visible;
                    overflow: visible;
                    > li {
                        &:hover {
                            // Caret rotate
                            > a {
                                &:after {
                                    @include transition(all .3s);
                                    @include transform(rotate(-90deg));
                                }
                            }
                            // Level 2

6.3. Columns Menu CSS

CSS Columns Menu // COLUMNS STYLE &.menu_style_column { // Code for Columns Menu } Chia cột cho Menu

// x columns
            &.mega-col-columns-x {
                > ul > li {
                    float: left;
                    width: (100/x)%;
                }
            }

Hidden Sub Menu

// Hidden sub menu
            > ul {
                display: none;
                left: 0;
                opacity: 0;
                overflow: hidden;
                padding: 30px 0px;
                position: absolute;
                top: 100%;
                visibility: hidden;
                width: 100%;

Show Sub Menu

// Show sub menu on hover
            &:hover {
                > ul {
                    display: block;
                    opacity: 1;
                    overflow: visible;
                    visibility: visible;
                }
            }

6.4. Tab Menu CSS

CSS Tab Menu // TAB STYLE &.menu_style_tab { // Code for Tab Menu } Hidden Tab menu

> ul {
                display: none;
                left: 0;
                opacity: 0;
                overflow: hidden;
                position: absolute;
                top: 99%;
                visibility: hidden;
                width: 100%;

Show menu tab khi hover

&:hover {
                ul {
                    display: block;
                    opacity: 1;
                    visibility: visible;
                }
            }

Chú ý ở đây để Menu Tab có thể hoạt động cần sử dụng JS để xử lý thêm sẽ được trình bày ở phần sau.

6.5. Kết luận

Như vậy ở phần 6 của Series bài viết về Cách tạo WordPress Mega Menu chúng ta code được phần hiển thị Style cho WordPress Mega Menu ở Frontend. Với hướng dẫn như trên chúng ta đã tạo ra 3 style menu trong WordPress đó là Dropdown, Columns và Tabs. Trong phần tiếp theo của Series bài viết này chúng ta sẽ tìm hiểu chi tiết hơn về cách tạo Mega Menu dạng Tab.