Xây dựng một Điều hướng Off-Canvas Với jQuery.mmenu

() translation by (you can also view the original English article)

Hướng dẫn này sẽ đưa bạn đến với một chuyến khám phá nhanh jQuery.mmenu, một plugin jQuery giúp tạo điều hướng trang web. Khi tìm hiểu nó, chúng ta sẽ thấy cách chúng ta có thể sử dụng plugin này để xây dựng một menu off-canvas từ đầu.

jQuery.mmenu là gì?

Để mô tả rõ nhất về jQuery.mmenu, chúng ta sẽ đi đến trang Github của nó:

"Plugin jQuery tốt nhất cho các trang web trông giống ứng dụng và menu -canvas với menu con trượt ra.

Plugin jQuery.mmenu có khả năng tùy biến cao và đi kèm với nhiều add-on bổ sung (ví dụ, counters và dividers) cùng với các extension (ví dụ, hiệu ứng động và page shadow). Đối với những ai yêu thích, nó tồn tại dưới dạng một plugin Wordpress, và nó hoạt động tốt trong hầu hết các trình duyệt!

Bắt đầu với jQuery.mmenu

Để bắt đầu, bạn sẽ phải lấy về một bản sao của thư viện. Việc này có thể được thực hiện bằng cách truy cập vào trang chính thức của nó, thông qua trình quản lý gói (ví dụ, Bower) hoặc CDN (ví dụ, cdnjs).

Sau khi tải về, bạn sẽ phải bao gồm các tập tin CSS và JS cần thiết trong các trang của mình.

Xin lưu ý rằng tùy thuộc vào menu mà bạn muốn xây dựng, các tập tin khác nhau có thể được yêu cầu. Ví dụ, một menu off-canvas yêu cầu các tập tin jquery.mmenu.css (hoặc phiên bản minified) và jquery.mmenu.js (hoặc phiên bản minified) của nó. Nếu bạn muốn thay đổi hành vi mặc định của menu (ví dụ, di chuyển vị trí của nó sang bên phải), bạn cũng sẽ phải bao gồm các tập tin có liên quan đến add-on “off-canvas”. Nếu có vẻ khó hiểu và bạn không muốn lo lắng về các tập tin được yêu cầu, hãy tiếp tục và sử dụng các tập tin “all” (ví dụ, jquery.mmenu.all.css và jquery.mmenu.min.all.js) trong dự án.

Trong bản demo, chúng ta sẽ import các tập tin "all" thông qua một CDN. Phần head của trang sẽ tham chiếu đến tập tin CSS "all":

1	<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.4/css/jquery.mmenu.all.min.css'>

Tương tự, chúng ta sẽ đặt script "all" (và một bản sao của jQuery) trước thẻ đóng <body> :

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.4/js/jquery.mmenu.min.all.min.js'></script>

Vậy, hãy bắt đầu xây dựng menu nào!

Thiết lập HTML

Hãy bắt đầu bằng cách hiểu rõ cấu trúc web trang của chúng ta. Dưới đây là code HTML tương ứng:

<div>
    <header><!-- more content here --></header>
    <main><!-- more content here --></main>
</div>
<nav id="menu"><!-- more content here --></nav>

Lưu ý rằng chúng ta đặt tất cả các phần tử, ngoại trừ phần tử nav, bên trong một kho chứa div.

Chúng ta có thể sử dụng phần tử khác làm kho chứa, nhưng làm như vậy, chúng ta sẽ phải thông báo cho plugin về thay đổi này thông qua thuộc tính cấu hình có liên quan (ví dụ, thuộc tính offCanvas.pageNodetype). Ngoài ra, nếu có thể, chúng ta nên tránh khai báo một số thuộc tính CSS cho phần tử wrapper. Cụ thể hơn, plugin khuyến khích những yêu cầu sau:

“DIV này là tốt nhất khi không có chiều rộng và chiều cao (tối thiểu/tối đa), padding, border và margin.”

Markup

Bước tiếp theo là xem xét kỹ hơn cấu trúc của menu. Code HTML liên quan sẽ trông giống như sau:

1	<nav id="menu">
2	<ul>
3	<li>
4	<a href="#">About</a>
5	<ul>
6	<li>
7	<a href="#">History<span>Click me</span></a>
8	</li>
9	<li>
10	<a href="#">Vision</a>
11	</li>
12	<li>
13	<a href="#">Team</a>
14	</li>
15	</ul>
16	</li>
17	<li>
18	<a href="#">Services</a>
19	</li>
20	<li>
21	<a href="#">Portfolio</a>
22	</li>
23	<li>
24	<a href="#">Clients</a>
25	</li>
26	<!-- more list items here -->
27	</ul>
28	</nav>

Ở đây chúng ta sử dụng một số code HTML đơn giản để xây dựng menu của chúng ta. Danh sách không có thứ tự, với danh sách lồng nhau và các liên kết. Plugin không yêu cầu markup cụ thể; may thay, chúng ta có thể sử dụng bất kỳ markup nào mà chúng ta muốn.

Chúng ta chỉ định một số định danh duy nhất cho menu mà chúng ta sẽ sử dụng sau này để khởi tạo plugin. Sau đó, cuối cùng nhưng không kém phần quan trọng, chúng ta ẩn nó cho đến khi tất cả các style đã được áp dụng thành công. Bước này là quan trọng bởi vì, bằng cách thêm code CSS sau đây, chúng ta ngăn chặn một FOUC:

1	nav {
2	display: none;
3	}

Bây giờ chúng ta đã chuẩn bị xong trang của mình, đã đến lúc khởi tạo menu!

Kích hoạt Plugin

Trước khi trình bày cách chúng ta có thể kích hoạt plugin, trước hết hãy lưu bộ nhớ cache một số bộ chọn của chúng ta:

1	var $menu = $('#menu');
2	var $btnMenu = $('.btn-menu');
3	var $img = $('img');

Bây giờ chúng ta khởi tạo nó bằng cách sử dụng đoạn code ở dưới đây:

1	$menu.mmenu({ // configuration settings here });

Chúng ta có thể tùy biến giao diện mặc định và tính năng của menu thông qua CSS và các cài đặt cấu hình có sẵn. Chúng ta sẽ thấy một số ví dụ về điều này trong giây lát nữa.

Hơn nữa, chúng ta có tùy chọn để mở và đóng menu tự động hoặc thủ công. Trong trường hợp này, chúng ta sẽ hiển thị menu khi phần tử với lớp btn-menu được nhấp vào. Để làm được tính năng này, chúng ta sẽ tận dụng API có sẵn. Đây là code được cần thiết:

var api = $menu.data("mmenu");
    
$btnMenu.click(function() {
    api.open();
});

Ngược lại, chúng ta sẽ chọn tự động ẩn menu. Đây là hành vi mặc định; được kích hoạt khi chúng ta nhấp vào bất kỳ phần nào của trang, ngoại trừ phần nằm bên trong trình đơn.

Trước khi chúng ta tiếp tục, còn một điều nữa mà ta nên đề cập đến. Nếu chúng ta cố mở một menu con bằng cách nhấp vào phần tử menu (phần tử a), thì phần tử này sẽ không hoàn toàn có thể nhấp được. Cụ thể, menu con sẽ chỉ mở khi chúng ta nhấp vào phần bên phải của phần tử menu đó (xem ví dụ trực tiếp để hiểu hành vi này). Để làm cho toàn bộ phần tử menu có thể nhấp được, chúng ta phải thêm dòng code sau đây:

1	$menu.find( ".mm-next" ).addClass("mm-fullsubopen");

Thay đổi hình ảnh Off-Canvas

Trong phần này, mục tiêu là để hiển thị một biểu tượng điều hướng khác tùy vào trạng thái của menu. Ảnh minh hoạ ở bên dưới gợi ý những gì chúng ta muốn đạt được:

menu icon states — Hai trạng thái của icon

Để thực hiện điều đó, chúng ta sẽ làm việc với các sự kiện opening và closing. Bạn có thể tìm thấy tài liệu hướng dẫn về các sự kiện đó trong trang có liên quan đến add-on "offCanvas". Dưới đây là đoạn code mà chúng ta sử dụng để thay đổi các biểu tượng:

api.bind('opening', function() {
    $img.attr('src', 'arrows_remove.svg');
});
api.bind('closing', function() {
    $img.attr('src', 'arrows_hamburger.svg');
});

Ngoài các sự kiện ở trên, còn có một vài sự kiện khác để khám phá (ví dụ, các sự kiện opened và closed) những sự kiện mà bạn có thể thấy hữu ích cho các dự án của riêng mình.

Thay đổi chiều rộng mặc định

Để thay đổi chiều rộng được gán trước của menu, chúng ta có thể sử dụng CSS hoặc Sass (bằng cách sửa đổi các tập tin nguồn). Mặc định, giá trị thuộc tính min-width và max-width của nó tương đương với 140px và 440px. Trong bản demo của chúng ta, hãy xem cách chúng ta có thể thay đổi giá trị thuộc tính max-width ban đầu thông qua CSS. Dưới đây là các quy tắc CSS cần được thay thế:

.mm-menu {
    max-width: 350px; 
}
    
/**
 * add more vendor prefixes
 * depending on the browsers you're targeting
 */

@media all and (min-width: 550px) {
    html.mm-opening .mm-slideout {
        transform: translate(350px, 0); 
    } 
}
    
/**
 * override this rule
 * in case you're building a right menu
 */

@media all and (min-width: 550px) {
    html.mm-right.mm-opening .mm-slideout {
        transform: translate(-350px, 0);
    }
}

Các thay đổi CSS bổ sung

Tại thời điểm hiện tại, chúng ta sẽ tiếp tục tùy biến giao diện của menu. Một lần nữa, chúng ta sẽ chỉnh sửa tập tin nguồn Sass để sửa đổi các style theo nhu cầu của chúng ta. Hãy xem các quy tắc mà chúng ta sẽ ghi đè ở bên dưới (để đơn giản, tôi đã bỏ qua các giá trị của biến Sass):

.mm-menu {
    background: darken($main-color, 10%);
}
  
.mm-listview > li > a {
    color: $text-color;
    padding: 20px;
}

.mm-listview > li > a:hover,
.mm-listview .mm-next.mm-fullsubopen:hover + a {
    color: $highlight-color;
}

.mm-listview > li > a:hover span {
    color: $text-color;
}

.mm-menu .mm-listview > li.mm-selected > a:not(.mm-next) {
    background: transparent url(arrows_check.svg) no-repeat center right 10px;
    background-size: 30px 30px;
    text-decoration: line-through;
}

Hãy xem quy tắc cuối cùng. Mỗi khi chúng ta nhấp vào một phần tử menu, nó sẽ nhận lớp mm-selected, vì vậy chúng ta có thể sử dụng bộ chọn đó để style nó. Nhưng chúng ta chỉ muốn style phần tử cuối cùng, vì vậy chúng ta sẽ trỏ đến những phần tử không có lớp mm-next.

next link styles — “About” dẫn đến menu con ở bên phải, nhưng chúng ta chỉ style cho liên kết cuối cùng được nhấp vào

Thêm Extension và Add-on

Trong phần trước, chúng ta đã tìm hiểu cách khởi tạo plugin. Bây giờ, hãy mở rộng hành vi và chức năng của nó bằng cách ghi đè các tùy chọn cấu hình mặc định.

Trước tiên, chúng ta thay đổi tiêu đề xuất hiện phía trên panel chính.

Tiếp theo, chúng ta bao gồm các add-on "counters" và "off-canvas". Add-on cuối cho phép chúng ta thay đổi vị trí của menu tương đối so với trang.

Cuối cùng, chúng ta thêm ba extension. Hãy xem code khởi tạo hoàn chỉnh ở bên dưới:

$menu.mmenu({
    counters: true,
    navbar: {
        title: "Menu Content"
    },
    extensions: ["pageshadow", "effect-zoom-menu", "effect-zoom-panels"],
    offCanvas: {
        position  : "right",
        zposition : "back"
    }
});

Phần kết luận

Trong bài hướng dẫn này, chúng ta đã tìm hiểu quá trình tạo ra một menu off-canvas bằng cách sử dụng plugin jQuery.mmenu. Tiếp theo, hãy xem mã nguồn hoàn chỉnh cho bản demo của chúng ta ở trên CodePen. Sau đó, tôi khuyên bạn nên khám phá trang chủ của jQuery.mmenu và tham khảo các ví dụ tương tác khác nhau có sẵn. Hãy cho chúng tôi xem các ví dụ của bạn trong phần bình luận nhé!