GeneratePress mobile menu - phiên bản cải thiện giao diện

GeneratePress mobile menu mặc định hơi kém về mặt giao diện, trải nghiệm nếu có mục con. Do đó mình đã tạo thêm các phiên bản cải thiện để các mục trong menu được rõ ràng và tất nhiên là trải nghiệm người dùng sẽ tốt hơn. Xu hướng tuỳ chỉnh giao diện của mình trước giờ vẫn là đơn giản về mặt hình thức, dễ dàng khi tương tác.

Bài này mình sẽ lưu lại vài mẫu tương ứng với các kiểu bố cục menu khác nhau, vì GeneratePress cho khá nhiều kiểu bố trí menu, header. Hiện tại mình dùng chủ yếu là kiểu canh giữa mọi thứ như Hocban.vn và mẫu đầu tiên cũng chỉ áp dụng cho đúng kiểu bố trí này thôi, các kiểu khác mình sẽ bổ sung sau.

GeneratePress mobile menu phiên bản cải thiện giao diện

Như thường lệ thì bạn cứ copy đoạn code bên dưới và dán vào cuối file functions.php trong theme/ child theme GeneratePress >> lưu file lại và xem thành quả trên di động, máy tính bản và desktop để xem sự khác biệt so với menu mặc định.

//Menu tối ưu di động, tablet
function gp_custom_menu_styles() {
$colors = array(
'primary' => '#0073aa',
'text' => '#333',
'border' => '#ddd',
'border_light' => '#eee',
'bg_dark' => '#1d1d1f',
'bg_dark_hover' => '#333334',
'bg_mobile' => '#f9f9f9',
);

$css = "
body {
overflow-x: hidden !important;
}
nav.main-navigation,
.main-navigation {
width: 100vw !important;
position: relative;
left: 50% !important;
margin-left: -50vw !important;
background-color: #fff !important;
}
.main-navigation > ul > li {
border-right: 1px solid {$colors['border']} !important;
}
.main-navigation > ul > li:last-child {
border-right: none !important;
}
.main-navigation > ul > li > a {
color: {$colors['text']} !important;
}
.main-navigation > ul > li > a:hover {
color: {$colors['primary']} !important;
background-color: transparent !important;
}
.main-navigation ul ul,
.main-navigation .sub-menu {
border: 1px solid {$colors['border']} !important;
}
.main-navigation ul ul > li {
border-bottom: 1px solid {$colors['border']} !important;
}
.main-navigation ul ul > li:last-child {
border-bottom: none !important;
}
.main-navigation ul ul a {
color: {$colors['text']} !important;
background-color: transparent !important;
}
.main-navigation ul ul li:hover > a,
.main-navigation .sub-menu li:hover > a {
color: {$colors['primary']} !important;
background-color: transparent !important;
}
.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle {
float: right !important;
font-size: 25px !important;
}
.main-navigation .main-nav ul ul li:last-child a {
border-top: none !important;
}
@media (min-width: 769px) {
.main-navigation ul ul,
.main-navigation .sub-menu {
background-color: #fff !important;
border-top: 3px solid {$colors['primary']} !important;
}
}
@media (max-width: 768px) {
.main-navigation .menu-toggle,
.sidebar-nav-mobile:not(#sticky-placeholder) {
display: block !important;
background: {$colors['bg_dark']} !important;
color: white !important;
}
button.menu-toggle:hover,
button.menu-toggle:focus {
color: white !important;
}
button.menu-toggle:active,
button.menu-toggle:focus,
button.menu-toggle:hover {
background-color: {$colors['bg_dark_hover']} !important;
}
.nav-below-header .main-navigation .inside-navigation.grid-container,
.nav-above-header .main-navigation .inside-navigation.grid-container {
padding: 0 !important;
}
.main-navigation li {
border-bottom: 1px solid {$colors['border']} !important;
}
.main-navigation li:last-child {
border-bottom: none !important;
}
.main-navigation ul ul {
background-color: {$colors['bg_mobile']} !important;
}
.main-navigation ul ul li {
border-bottom: 1px solid {$colors['border_light']};
}
.main-navigation ul ul li:last-child {
border-bottom: none;
}
.main-navigation .main-nav ul ul li a {
line-height: normal !important;
padding: 18px 18px 18px 38px !important;
font-size: 16px !important;
}
}
";
wp_add_inline_style( 'generate-style', $css );
}
add_action( 'wp_enqueue_scripts', 'gp_custom_menu_styles', 20 );
//Menu tối ưu di động, tablet

Mình nói thêm, đây là tính năng bổ sung nên sẽ không áp dụng như chèn vào CSS bổ sung. Do đó bạn nào CSS Bổ Sung đang trống, chưa dòng nào thì copy riêng phần CSS trong đoạn code trên >> dán vào xài. Còn ở đây mình đứng ở vai trò tách từng mô đun tính năng nên phương án functions thì lại tiện hơn về mặt quản lý.

Ví dụ mình đổi kiểu thì sửa lại trong file CSS sẽ rối hơn so với đổi functions trong file functions với các mô đun tách biệt. Mặt dù chưa thật sự tối ưu như CSS thẳng vào CSS Bổ Sung, nhưng lại tiện về vọc, đổi kiểu giao diện/ tính năng chỉ với thao tác xóa cũ, chèn mới. Ví dụ như đây sẽ là v2, áp dụng điều kiện khi màn hình có độ rộng nhỏ hơn 900px thì buộc chuyển thành menu di động, css thuần vốn không thể xử lý:

//V2 - Menu tối ưu di động, tablet - Breakpoint 900px
function gp_custom_menu_styles() {
$colors = array(
'primary' => '#0073aa',
'text' => '#333',
'border' => '#ddd',
'border_light' => '#eee',
'bg_dark' => '#1d1d1f',
'bg_dark_hover' => '#333334',
'bg_mobile' => '#f9f9f9',
);
$css = "
body {
overflow-x: hidden !important;
}
nav.main-navigation,
.main-navigation {
width: 100vw !important;
position: relative;
left: 50% !important;
margin-left: -50vw !important;
background-color: #fff !important;
}
.main-navigation > ul > li {
border-right: 1px solid {$colors['border']} !important;
}
.main-navigation > ul > li:last-child {
border-right: none !important;
}
.main-navigation > ul > li > a {
color: {$colors['text']} !important;
}
.main-navigation > ul > li > a:hover {
color: {$colors['primary']} !important;
background-color: transparent !important;
}
.main-navigation ul ul,
.main-navigation .sub-menu {
border: 1px solid {$colors['border']} !important;
}
.main-navigation ul ul > li {
border-bottom: 1px solid {$colors['border']} !important;
}
.main-navigation ul ul > li:last-child {
border-bottom: none !important;
}
.main-navigation ul ul a {
color: {$colors['text']} !important;
background-color: transparent !important;
}
.main-navigation ul ul li:hover > a,
.main-navigation .sub-menu li:hover > a {
color: {$colors['primary']} !important;
background-color: transparent !important;
}
.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle {
float: right !important;
font-size: 25px !important;
}
.main-navigation .main-nav ul ul li:last-child a {
border-top: none !important;
}
@media (min-width: 901px) {
.main-navigation ul ul,
.main-navigation .sub-menu {
background-color: #fff !important;
border-top: 3px solid {$colors['primary']} !important;
}
}
@media (max-width: 900px) {
.main-navigation .menu-toggle,
.sidebar-nav-mobile:not(#sticky-placeholder) {
display: block !important;
background: {$colors['bg_dark']} !important;
color: white !important;
}
button.menu-toggle:hover,
button.menu-toggle:focus {
color: white !important;
}
button.menu-toggle:active,
button.menu-toggle:focus,
button.menu-toggle:hover {
background-color: {$colors['bg_dark_hover']} !important;
}
.nav-below-header .main-navigation .inside-navigation.grid-container,
.nav-above-header .main-navigation .inside-navigation.grid-container {
padding: 0 !important;
}
.main-navigation li {
border-bottom: 1px solid {$colors['border']} !important;
}
.main-navigation li:last-child {
border-bottom: none !important;
}
.main-navigation ul ul {
background-color: {$colors['bg_mobile']} !important;
}
.main-navigation ul ul li {
border-bottom: 1px solid {$colors['border_light']};
}
.main-navigation ul ul li:last-child {
border-bottom: none;
}
.main-navigation .main-nav ul ul li a {
line-height: normal !important;
padding: 18px 18px 18px 38px !important;
font-size: 16px !important;
}
}
";
wp_add_inline_style( 'generate-style', $css );
}
add_action( 'wp_enqueue_scripts', 'gp_custom_menu_styles', 20 );
function gp_change_mobile_menu_breakpoint( $media_query ) {
return '(max-width: 900px)';
}
add_filter( 'generate_mobile_menu_media_query', 'gp_change_mobile_menu_breakpoint' );
// /V2 - Menu tối ưu di động breakpoint 900px

GeneratePress mobile menu – phiên bản cải thiện giao diện

Tịnh Nguyễn