Menu phụ CSS chuyển đổi trong Genesis

Các mũi tên lên và xuống cho menu phụ di động bật tắt trong Genesis sử dụng Dashicons.

Hướng dẫn này cung cấp các bước để thay thế nó bằng cách tiếp cận chỉ CSS.

Mặc dù hướng dẫn đã được viết cho Genesis Sample 2.6.0, 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

Chỉnh sửa các functions.php của chủ đề con .

Bên trong thay thếgenesis_sample_responsive_menu_settings()

'subMenuIconClass' => 'dashicons-before dashicons-arrow-down-alt2',

với

'subMenuIconClass' => '',

Bước 2

Trong style.css thay thế

.sub-menu-toggle::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-transform: rotate( 0 );
    -ms-transform:     rotate( 0 );
    transform:         rotate( 0 );
    transition: transform .25s ease-in-out;
}

.sub-menu-toggle.activated::before {
    -webkit-transform: rotate( 180deg );
    -ms-transform:     rotate( 180deg );
    transform:         rotate( 180deg );
}

với

.sub-menu-toggle::before {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 2px solid;
    border-right: 2px solid;
    content: "";
    -webkit-transition: -webkit-transform 0.25s ease-in-out;
    transition: -webkit-transform 0.25s ease-in-out;
    transition: transform 0.25s ease-in-out;
    transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    text-rendering: auto;
}

.sub-menu-toggle.activated::before {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}