Biểu tượng menu Hamburger hoạt hình trong Genesis

Trong Genesis (Genesis Sample, chính xác là cũng như hầu hết các chủ đề con khác từ StudioPress), chạm vào biểu tượng menu bánh hamburger ở độ rộng màn hình nhỏ hơn sẽ chuyển đổi menu đáp ứng và biểu tượng menu không thay đổi, tức là vẫn là một chiếc bánh hamburger.

Có thể tùy chỉnh điều này sao cho việc nhấn vào biểu tượng của menu di động sẽ thay đổi bánh hamburger thành X (đóng) với hoạt ảnh mượt mà bằng cách sử dụng bánh hamburger hoạt hình CSS của Jonathan Suh.

Trong hướng dẫn này, tôi chia sẻ các bước để thiết lập biểu tượng bánh hamburger động bằng cách sử dụng hoạt ảnh Slider. Các tùy chọn hoạt ảnh có sẵn khác có thể được xem trên trang dự án.

Mặc dù hướng dẫn đã được viết cho Genesis Sample, nhưng nó sẽ hoạt động với một vài điều chỉnh trong bất kỳ chủ đề Genesis nào

Bước 1 - Tải CSS chung của hamburgers.css ’

Chỉnh sửa chủ đề con của bạn . Xác định điểm ngắt tại đó menu thu gọn thành bánh hamburger. Trong Genesis Sample, nó là 1023px.style.css

Ở cuối mã hiện có trong truy vấn phương tiện 1023px, hãy thêm CSS chung được đánh dấu ở đây.

Bước 2 - Nạp hamburgers.css 'cho loại bánh hamburger bạn đang thèm

Trong ví dụ này, chúng tôi đang theo đuổi loại Slider của hoạt ảnh biểu tượng menu.

Do đó, tại https://github.com/jonsuh/hamburgers/blob/master/dist/hamburgers.css, hãy thực hiện tìm kiếm trong trình duyệt (Cmd + F / Ctrl + F) slider , sao chép CSS cho hoạt ảnh đó và dán tại dưới cùng của truy vấn phương tiện 1023px. Đây là mã CSS được đánh dấu.

Thay thế tất cả các trường hợp của từ bằng là lớp mà nút nhận được khi nó được chuyển đổi trong Genesis.is-active activated activated .menu-toggle

Nếu bạn muốn thêm từ Menu vào bên phải của biểu tượng, hãy thêm CSS này, một lần nữa trong truy vấn phương tiện cho điểm ngắt khi menu đáp ứng bắt đầu xuất hiện:

.hamburger-label {
    font-weight: 700;
    font-size: 16px;
    font-size: 1.6rem;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

Bước 3 - Điều chỉnh CSS (tùy chọn)

Dưới đây là mã CSS được sửa đổi để nó giống với biểu tượng hamburger đáp ứng mặc định của Genesis Sample.

Những điều quan trọng cần lưu ý:

a) Chiều rộng được kiểm soát bởi . Độ dày của mỗi trong ba đường ngang được kiểm soát bởi thuộc tính chiều cao trong nhóm bộ chọn ở trên..hamburger-inner, .hamburger-inner::before, .hamburger-inner::after

b) Khoảng cách hoặc khoảng trống dọc giữa các đường ngang có thể được thay đổi trong CSS cho loại hoạt ảnh của bạn. Ví dụ: Khi sử dụng kiểu hoạt ảnh Slider, trong giá trị của top for và . Bạn cũng cần điều chỉnh các giá trị trong các bộ chọn đã được kích hoạt..hamburger--slider .hamburger-inner::before .hamburger--slider .hamburger-inner::after

Đây là CSS đã sửa đổi:

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
    padding: 15px 15px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    /* background-color: transparent;
    border: 0; */
    line-height: 1; /* to remove extra unwanted vertical space of .menu-toggle */
    margin: 0;
    overflow: visible;
}

/* .hamburger:hover {
    opacity: 0.7;
} */

.hamburger-box {
    /* width: 40px; */
    width: 20px;
    /* height: 24px; */
    height: 12px;
    display: inline-block;
    position: relative;
    vertical-align: middle; /* added this to vertically align with MENU text */
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    /* width: 40px; */
    width: 20px;
    /* height: 4px; */
    height: 3px;
    /* background-color: #000; */
    background-color: #333;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -10px;
}

.hamburger-inner::after {
    bottom: -10px;
}


/*
   * Slider
   */

.hamburger--slider .hamburger-inner {
    top: 2px;
}

.hamburger--slider .hamburger-inner::before {
    /* top: 10px; */
    top: 5px;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 0.15s;
}

.hamburger--slider .hamburger-inner::after {
    /* top: 20px; */
    top: 10px;
}

.hamburger--slider.activated .hamburger-inner {
    /* transform: translate3d(0, 10px, 0) rotate(45deg); */
    transform: translate3d(0, 5px, 0) rotate(45deg);
}

.hamburger--slider.activated .hamburger-inner::before {
    transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
    opacity: 0;
}

.hamburger--slider.activated .hamburger-inner::after {
    /* transform: translate3d(0, -20px, 0) rotate(-90deg); */
    transform: translate3d(0, -10px, 0) rotate(-90deg);
}

.hamburger-label {
    font-weight: 700;
    font-size: 16px;
    font-size: 1.6rem;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

Bước 4 - Đặt đánh dấu trong phần cài đặt menu đáp ứng của functions.php.

Trong chủ đề con , hãy tìm mã tương tự nhưfunctions.php

// Define our responsive menu settings.
function genesis_sample_responsive_menu_settings() {

    $settings = array(
        'mainMenu'          => __( 'Menu', 'genesis-sample' ),
        'menuIconClass'     => 'dashicons-before dashicons-menu',
        'subMenu'           => __( 'Submenu', 'genesis-sample' ),
        'subMenuIconsClass' => 'dashicons-before dashicons-arrow-down-alt2',
        'menuClasses'       => array(
            'combine' => array(
                '.nav-primary',
                '.nav-header',
            ),
            'others'  => array(),
        ),
    );

    return $settings;

}

a) Để chỉ hiển thị biểu tượng menu bánh hamburger mà không có Menu văn bản, hãy thay thế

'mainMenu'          => __( 'Menu', 'genesis-sample' ),

với

'mainMenu'          => '<span class="hamburger-box"><span class="hamburger-inner"></span></span>',

Để hiển thị biểu tượng menu bánh hamburger với Menu văn bản ở bên phải, hãy thay thế

'mainMenu'          => __( 'Menu', 'genesis-sample' ),

với

'mainMenu'          => sprintf( '<span class="hamburger-box"><span class="hamburger-inner"></span></span><span class="hamburger-label">%s</span>', __( 'Menu', 'genesis-sample' ) ),

b) Thay thế

'menuIconClass'     => 'dashicons-before dashicons-menu',

với

'menuIconClass'     => 'hamburger hamburger--slider',

Thay thế bằng loại bánh hamburger mong muốn của bạn. Danh sách có thể được xem trong Bước 3 tại đây.hamburger--slider

Đó là nó.