Apple đã gây ra một số tiếng ồn khi họ phát hành một trang web cập nhật, bao gồm một điều hướng đáp ứng hoàn toàn mới. Trong khi thiết kế lại tập trung vào những thứ khác, một điều còn tồn tại là việc sử dụng biểu tượng menu bánh hamburger trong điều hướng đáp ứng được thiết kế mới. Và, không chỉ là bánh hamburger, một loại không có thịt - chỉ là bánh. Nó có thể là một tuyên bố về sự đơn giản hoặc bất cứ điều gì, nhưng đây là cách chúng ta có thể tạo lại nó với cùng một hiệu ứng động biến biểu tượng từ một chiếc bánh hamburger thành một ×.
Đoạn mã sau giả định sử dụng trình sửa lỗi tự động.
.hamburger ( cursor: pointer; position: absolute; width: 48px; height: 48px; transition: all 0.25s; ) .hamburger__top-bun, .hamburger__bottom-bun ( content: ''; display: block; position: absolute; left: 15px; width: 18px; height: 1px; background: #fff; transform: rotate(0); transition: all 0.25s; ) .hamburger:hover (class*="-bun") ( background: #999; ) .hamburger__top-bun ( top: 23px; transform: translateY(-3px); ) .hamburger__bottom-bun ( bottom: 23px; transform: translateY(3px); ) .open ( transform: rotate(90deg); ) .open .hamburger__top-bun ( transform: rotate(45deg) translateY(0px); ) .open .hamburger__bottom-bun ( transform: rotate(-45deg) translateY(0px); ) $('.hamburger').click (function()( $(this).toggleClass('open'); ));Xem Menu Bánh Hamburger của Pen Apple bằng CSS-Tricks (@ css-trick) trên CodePen.
Những ví dụ khác
Nếu bạn quan tâm đến các ví dụ khác về biểu tượng menu xếp hàng, có một bộ sưu tập lớn trên CodePen mà bạn có thể duyệt qua.