Điều hướng Mega Menu cho Chủ đề Genesis sử dụng CSS

Đôi khi menu điều hướng thả xuống thông thường của WordPress không hoạt động hoàn toàn vì số lượng mục quá dài. Bạn có thể sử dụng bất kỳ plugin mega menu phổ biến nào, nhưng khá đơn giản để tạo kiểu menu mega nhiều cột cho các chủ đề Genesis chỉ sử dụng CSS.

Tổng quan về Hướng dẫn

Hướng dẫn này đã được cập nhật để bạn có thể chọn thứ tự của các mục menu là ngang hoặc bây giờ, dọc. Các thay đổi cũng được bao gồm cho các chủ đề Genesis đầu tiên trên thiết bị di động.

Hướng dẫn này ban đầu dành cho các chủ đề Genesis bao gồm menu điều hướng có thể truy cập và CSS dành cho các chủ đề ưu tiên máy tính để bàn. Tôi đang sử dụng chủ đề Genesis Sample, nhưng bạn cũng có thể sử dụng hướng dẫn này trên các chủ đề khác.

Bạn sẽ sử dụng một lớp CSS để xác định các mục menu nào sẽ hoạt động như các menu thả xuống lớn. Điều này cho phép bạn có một số mục thực đơn bình thường và một số mục thực đơn lớn; nó cho phép sự linh hoạt. Trước tiên, bạn sẽ giới hạn độ sâu của menu bằng cách thêm một hàm vào functions.php của mình, sau đó bạn sẽ thêm CSS cho menu mega trên màn hình lớn và màn hình nhỏ hơn, nếu chủ đề của bạn KHÔNG dành cho thiết bị di động. Bạn có thể quyết định số lượng cột bạn cần cho các mục menu của mình. Tất nhiên, bạn luôn có thể thêm các kiểu màu bổ sung.

Bước 0. Làm thế nào để biết CSS nào sẽ sử dụng cho chủ đề Genesis của bạn.

Chủ đề của bạn có bao gồm các menu có thể truy cập được không?

Nếu bạn nhìn vào functions.php của theme và tìm kiếm “khả năng truy cập”, bạn sẽ thấy một phần giống như sau:

// Add Accessibility support.
add_theme_support( 'genesis-accessibility', array( '404-page', 'drop-down-menu', 'headings', 'rems', 'search-form', 'skip-links' ) );

Lưu ý việc bao gồm “menu thả xuống”.

HOẶC bạn sẽ thấy dòng này:

// Adds support for accessibility.
add_theme_support( 'genesis-accessibility', genesis_get_config( 'accessibility' ) );

Chủ đề của bạn là ưu tiên cho thiết bị di động hay ưu tiên cho máy tính để bàn?
Tìm trong style.css của bạn tại phần Media Queries.

Chủ đề của bạn ưu tiên thiết bị di động (Genesis 2.6 trở lên), nếu bạn thấy chiều rộng tối thiểu :
Bạn có thể bỏ qua Bước 4 của hướng dẫn.

@media only screen and (min-width: 960px) {

Chủ đề của bạn là chủ đề dành cho máy tính để bàn (Genesis nhỏ hơn 2,6), nếu bạn thấy chiều rộng tối đa:
Bạn sẽ cần tất cả các bước của hướng dẫn.

@media only screen and (max-width: 1340px) {

Nhận tất cả mã

Tất cả mã đều có trên GitHub trong Gist này.

Nếu bạn nhìn vào functions.php của theme và tìm kiếm “khả năng truy cập”, bạn sẽ thấy một phần giống như sau:

Bước 1. Giới hạn độ sâu của menu điều hướng ở 2 mức

Điều đầu tiên bạn muốn làm là giới hạn các menu phụ chỉ ở một cấp độ. Vì vậy, bạn sẽ có tổng cộng hai cấp menu - cấp cao nhất có thể nhìn thấy và một menu phụ. Chúng tôi đang thêm độ sâu là hai cho menu chính. Trong chủ đề mẫu, menu phụ đã được giới hạn ở độ sâu là 1.

Bạn có thể bỏ qua bước này nếu bạn là người duy nhất sử dụng trang web của mình và bạn nhớ giới hạn các mục menu lớn của mình chỉ ở hai cấp.

Thêm phần sau vào functions.php của bạn. Cuối cùng là ổn. Trước tiên, hãy nhớ tạo bản sao lưu và sử dụng trình soạn thảo văn bản.

<?php // Do not add this line

// Reduce the primary navigation menu to two levels depth.
add_filter( 'wp_nav_menu_args', 'genesis_sample_primary_menu_args' );
function genesis_sample_primary_menu_args( $args ) {

	if ( 'primary' != $args['theme_location'] ) {
		return $args;
	}

	$args['depth'] = 2;

	return $args;
}

Bước 2. Thêm lớp Megamenu cho các mục trong menu

Bạn sẽ thêm một lớp vào các mục menu mà bạn muốn hoạt động như các mục menu lớn.
  1. Từ bảng điều khiển WordPress của bạn, đi tới Giao diện> Trình đơn.
  2. Nhấp vào một trong các mục menu cấp cao nhất mà bạn muốn sử dụng làm menu lớn.
  3. Trong trường Lớp CSS *, thêm megamenu.
  4. Lưu menu.
* Nếu bạn không thấy Lớp CSS trên các mục menu của mình, hãy nhấp vào Tùy chọn màn hình ở góc trên bên phải của màn hình Trình đơn. Thêm séc vào Lớp CSS.

Bước 3. Thêm CSS cho màn hình lớn hơn

Bây giờ bạn sẽ thêm một số kiểu vào tệp style.css của mình. Sử dụng trình soạn thảo văn bản và nhớ lưu một bản sao lưu trước. Trong style.css, hãy tìm bộ chọn sau:
.genesis-nav-menu .sub-menu .sub-menu {
	margin: -56px 0 0 199px;
}
Lưu ý rằng các con số có thể khác nhau, tùy thuộc vào chủ đề của bạn.

Ngay bên dưới bộ chọn ở trên, thêm:

/* Added for Mega Menu */
	.genesis-nav-menu .megamenu .sub-menu {
		background-color: #fff; /* same color as .genesis-nav-menu .sub-menu a */
		border: 1px solid #eee; /* optional */
		height: auto;
		width: 610px; /* make width needed plus 10px */
		column-count: 3; /* optional to change the order of the items to be vertical */
		column-gap: 0; /* optional to change the order of the items to be vertical */
	}
	
	.genesis-nav-menu .megamenu.move .sub-menu {
		right: 0;
	} /* optional to right align the sub-menu */
	
	.genesis-nav-menu .megamenu .sub-menu a {
		border: 0; /* optional */
		width: 200px; /* 1/3 width for 3 columns */
		/* width: 300px; /* 1/2 width for 2 columns */
	}

Giải thích về CSS

Bạn có thể điều chỉnh tất cả những điều này để làm cho các menu phụ xuất hiện theo ý muốn.
  • background-color:Đối với bộ chọn menu phụ, bạn muốn sử dụng cùng màu nền với bộ chọn - .genesis-nav-menu. Menu phụ a. Điều này sẽ cung cấp cho nó một nền đồng nhất, đặc biệt nếu các mục menu của bạn không tạo thành các cột đồng đều.
  • border: Đường viền xung quanh toàn bộ menu phụ là tùy chọn.
  • height: Cần có chiều cao để thả xuống.
  • width:Chiều rộng có thể là bất cứ thứ gì bạn cần cho menu của mình. Bạn cần thêm một vài pixel vì có khoảng trống giữa các mục menu.
  • column-count:Điều này chỉ cần thiết nếu bạn muốn có thứ tự mục menu theo chiều dọc; nếu không có điều này, thứ tự mục menu sẽ nằm ngang.
  • column-gap: Điều này chỉ cần thiết nếu bạn muốn có thứ tự mục menu theo chiều dọc.
  • .genesis-nav-menu .megamenu.move .sub-menu Lớp "di chuyển" là tùy chọn và được thảo luận bên dưới.
  • border: 0; Bạn có thể xóa đường viền trên các mục menu phụ.
  • width: Chiều rộng của mỗi mục bằng 1/3 (3 cột) hoặc 1/2 (2 cột) tổng chiều rộng của menu phụ, 600px + 10px cho hướng dẫn.

Giải thích về Move Class

Theo mặc định, menu lớn thả xuống ngay bên dưới mục menu cấp cao nhất, như trong hình bên dưới. Điều này rất tốt cho các mục menu ở bên trái, nhưng đối với các menu lớn, trình đơn thả xuống cho các mục menu ở bên phải có thể bị cắt bỏ. Bạn có thể thấy vị trí căn phải trong hình ảnh ở đầu hướng dẫn. Bạn có thể thêm một lớp bổ sung, vì vậy bạn có thể chọn chỉ thay đổi một số menu phụ, có thể là một hoặc hai mục cuối cùng. Bạn chỉ cần thêm - di chuyển megamenu - vào trường Lớp CSS các mục menu đó, thay vì chỉ - megamenu - trong Giao diện> Trình đơn.![mega menu drop down right aligned|990x448](upload://yOXXDGws5yJjTRMEBbHXzv4lPOi.png)

Bước 4. Thêm CSS cho Menu di động - Chỉ dành cho máy tính để bàn

Điều này chỉ cần được thêm vào các chủ đề dành cho máy tính để bàn.

Một lần nữa, bạn sẽ thêm một số kiểu vào tệp style.css của mình.
Trong style.css, hãy tìm phần nơi menu di động được thêm vào. Trong Genesis Sample, đó là @media only screen and (max-width: 1023px). Tìm bộ chọn sau.js .genesis-nav-menu .sub-menu .sub-menu

	.js .genesis-nav-menu .sub-menu .sub-menu {
		margin: 0;
	}

Below it add:
.genesis-nav-menu .megamenu .sub-menu {
			column-count: 0; /* optional if added above */
                        overflow: hidden;
			width: 100%;
	}

	.genesis-nav-menu .megamenu .sub-menu a {
		width: auto;
	}

Hãy cho tôi biết hướng dẫn này hoạt động như thế nào để bạn thêm menu mega vào Chủ đề Genesis của bạn hoặc liên hệ với tôi về một dự án nhỏ để thêm menu mega cho bạn.