Thêm menu hamburger bootstrap

Trong hướng dẫn này, tôi sẽ giải thích toàn bộ quá trình tạo Menu Hamburger Morphing với CSS mà không sử dụng 1 dòng JavaScript nào. Vì vậy, tôi sẽ sử dụng CSS (và SCSS) để tạo ra nó. Đây là CodePen của những gì chúng ta sẽ xây dựng

Cấu trúc HTML

Chúng ta sẽ sử dụng cấu trúc HTML dưới đây

Started Style

Bước đầu chúng ta sẽ bổ sung một số kiểu cơ bản để tạo cảm giác dễ nhìn

/* Basic styles */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
}

body {
  font-family: sans-serif;
  background-color: #F6C390;
}

a {
  text-decoration: none;
}

.container {
  position: relative;
  margin: 35px auto 0;
  width: 300px;
  height: 534px;
  background-color: #533557;
  overflow: hidden;
}

chuyển đổi

Trước khi bắt đầu xây dựng phần còn lại của giao diện, chúng ta hãy bổ sung chức năng chuyển đổi để dễ dàng thay đổi từ trạng thái này sang trạng thái khác. HTML chúng tôi cần phải được áp dụng và phong cách để làm cho nó hoạt động như thế này

//  cho ẩn khi chưa checked
#toggle {
  display: none;
}
// Style cho trường hợp checked
#toggle:checked {
  & ~ .nav {
  }
}

Create menu close

Để tạo menu được đóng chúng ta cần chuyển đổi các mục thành các dòng để tạo nên biểu tượng biểu tượng menu hamburger

and under here is style for it active

$transition-duration: 0.5s;

// Showing nav items as lines, making up the hamburger menu icon
.nav-item {
  position: relative;
  display: inline-block;
  float: left;
  clear: both;
  color: transparent;
  font-size: 14px;
  letter-spacing: -6.2px;
  height: 7px;
  line-height: 7px;
  text-transform: uppercase;
  white-space: nowrap;
  transform: scaleY(0.2);
  transition: $transition-duration, opacity 1s;

  // Adjusting width for the first line
  &:nth-child(1) {
    letter-spacing: -8px;
  }

  // Adjusting width for the second line
  &:nth-child(2) {
    letter-spacing: -7px;
  }

  // Adjusting from the fourth element onwards
  &:nth-child(n + 4) {
    letter-spacing: -8px;
    margin-top: -7px;
    opacity: 0;
  }

  // Getting the lines for the hamburger menu icon
  &:before {
    position: absolute;
    content: '';
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #EC7263;
    transform: translateY(-50%) scaleY(5);
    transition: $transition-duration;
  }
}

Lưu ý rằng ở đây tôi chỉ đăng các phong cách chính cho các mục điều hướng, đó là phần quan trọng nhất. Bạn có thể vào github lấy mã đầy đủ nhất

Create menu open

$transition-duration: 0.5s;

#toggle:checked {

  // Open nav
  & ~ .nav {

    // Restoring nav items from "lines" in the menu icon
    .nav-item {
      color: #EC7263;
      letter-spacing: 0;
      height: 40px;
      line-height: 40px;
      margin-top: 0;
      opacity: 1;
      transform: scaleY(1);
      transition: $transition-duration, opacity 0.1s;

      // Hiding the lines
      &:before {
        opacity: 0;
      }
    }
  }
}

Config delay for item nav

$items: 4;
$transition-delay: 0.05s;

.nav-item {

  // Setting delays for the nav items in close transition
  @for $i from 1 through $items {
    &:nth-child(#{$i}) {
      $delay: ($i - 1) * $transition-delay;
      transition-delay: $delay;
      &:before {
        transition-delay: $delay;
      }
    }
  }
}

Ở đây chúng ta đang sử dụng vòng lặp. Bạn có thể tìm hiểu thêm về những điều này và các tính năng tuyệt vời khác trong trang tài liệu SASS. Chúng ta cần phải tính toán $delay hơi khác biệt cho hoạt hình mở, để có thể chuyển đổi ngược lại. Only like this

$delay: ($items - $i) * $transition-delay;

Tài liệu tham khảo. http. //www. cssscript. com/morphing-fullscreen-hamburger-menu-pure-htmlcss/ http. //www. cssscript. com/demo/morphing-side-menu-with-pure-css-css3/ http. //www. cssscript. com/pure-css3-animated-hamburger-toggle/ https. //rượu Scotch. io/tutorials/building-a-morphing-hamburger-menu-with-css http. //www. scottohara. tôi/bài viết/css-morph-menu-button. html

Khi duyệt các trang web, bạn có thể nhận thấy biểu tượng ba thanh nằm ở góc trên cùng bên trái hoặc bên phải của trang web. Biểu tượng này được gọi là biểu tượng bánh hamburger và nó được sử dụng để lưu trữ các tùy chọn điều hướng. Mặc dù tương đối đơn giản (chỉ mất vài phút để tạo menu bánh hamburger trong các công cụ tạo mẫu), đây là một trong những yếu tố gây tranh cãi nhất của thiết kế. Một số nhà thiết kế thích sử dụng nó, những người khác không thích nó

Trong bài viết này, chúng tôi sẽ xem xét khái niệm về menu hamburger, ưu điểm và nhược điểm của nó, đồng thời chia sẻ một bộ sưu tập các trang web tuyệt vời sử dụng menu hamburger

Các bài viết liên quan

• Hướng dẫn tạo menu wordpress
• SEO với menu
• Cách làm sạch cấu trúc trang web
• Chỉnh sửa trong menu màu
• Menu quảng cáo. the best method or best
• Thiết kế web là gì?
• Design UX is what
• Thiết kế website chuẩn SEO là gì?
• Web điều hướng(web điều hướng) là gì?
• Xu hướng thiết kế trang web hiện đại

Tóm tắt nội dung

• Menu hamburger là gì?
• Ưu và nhược điểm của thiết kế menu bánh hamburger
• Biểu tượng menu bánh hamburger nên được đặt ở bên trái hay bên phải của màn hình?
• Thiết kế lý tưởng cho menu hamburger di động là gì?
• Một số ví dụ điển hình về menu trang web bánh hamburger là gì?
  • 1. bản đồ Google
  • 2. adidas
  • 3. Awww
  • 4. Bootstrap
  • 5. Evernote
• Khám phá xem menu bánh hamburger có phù hợp với trang web hoặc ứng dụng của bạn không

Menu hamburger là gì?

Menu hamburger là một biểu tượng được sử dụng trên trang web và trong các ứng dụng, khi được nhấp hoặc nhấn, sẽ mở menu bên hoặc điều hướng. Nó được gọi là “Menu hamburger” vì nó có hình dạng của món bánh sandwich nổi tiếng. Biểu tượng này được tạo bởi nhà thiết kế Norm Cox cho giao diện người dùng đồ họa của máy trạm Xerox Star vào năm 1981. Mục tiêu của Cox là tạo ra một biểu tượng có thể thông báo cho người dùng rằng danh sách các mục bị ẩn sau nó

Sau Xerox Star, menu bánh hamburger đã trở thành một kiểu điều hướng không phổ biến và vẫn như vậy trong gần ba thập kỷ. Nhưng tình hình đã thay đổi vào năm 2009 khi điện thoại thông minh bắt đầu có sức hút. Không gian màn hình là một thứ quý giá trên thiết bị di động và các nhà thiết kế cần đưa thông tin vô số vào màn hình để có thể bỏ túi. Menu hamburger dường như là một giải pháp tốt cho vấn đề này và biểu tượng bắt đầu xuất hiện trong nhiều ứng dụng di động phổ biến như Facebook

Ngay sau đó, nó bắt đầu lan rộng trên Internet và nhiều trang web cũng như ứng dụng di động đã áp dụng mô hình này. Ngày nay, nhiều bộ giao diện người dùng (UI) phổ biến biến dùng làm tài liệu tham khảo cho người tạo sản phẩm được thiết kế với menu bánh hamburger

Ưu và nhược điểm của thiết kế menu bánh hamburger

Khi nói đến trải nghiệm người dùng (UX), menu bánh hamburger là một khái niệm gây tranh cãi – bởi vì nó có những lợi ích và nhược điểm riêng. Điều quan trọng là phải cân nhắc cả hai trước khi đưa ra quyết định sử dụng mẫu này. Hãy bắt đầu với những lợi ích của Menu bánh hamburger

• Nó sắp xếp hợp lý các bố cục màn hình. Sự hủy bộn là kẻ thù hư hỏng nhất của khả năng sử dụng tốt. Các nhà thiết kế biết rằng sự chú ý của người dùng là nguồn tài nguyên quý giá và điều quan trọng là tránh bị phân tâm. Menu hamburger là một cơ chế tiết kiệm điện không gian vì tất cả các tùy chọn điều hướng chỉ hiển thị sau một lần nhấp hoặc chạm. Bằng cách chuyển tùy chọn điều hướng từ màn hình, bạn tập trung sự chú ý của người dùng vào nội dung
• It is got a good good. Bộ não con người giải mã hình ảnh nhanh hơn lời nói và điều tuyệt vời về biểu tượng ba thanh là nó là một trong những biểu tượng mà mọi người đều hiểu. Mặc dù nhiều người dùng không thể biết nó được gọi là “menu hamburger”, nhưng họ có thể dễ dàng hiểu nó làm được gì

Bây giờ, hãy nói về những nhược điểm của menu hamburger

• Nó ít được phát hiện hơn. Như một câu tục ngữ cổ nói, “” Những gì khuất tầm nhìn là ngoài tâm trí. ” Menu bánh hamburger ẩn các tùy chọn điều hướng và để nhìn thấy chúng, trước tiên người dùng phải nhấp hoặc nhấn vào biểu tượng. Nhưng khi người dùng không nhìn thấy các tùy chọn điều hướng của họ ngay từ đầu, họ sẽ ít có khả năng tương tác với họ hơn
• Nó không thể quét được. Ở trạng thái mặc định, các tùy chọn điều hướng trong menu bánh hamburger vẫn bị ẩn. Điều này khiến người dùng khó hiểu những công cụ điều hướng nào có sẵn khi họ truy cập lần đầu tiên trên một trang
• Nó cần thêm nỗ lực của người dùng. Người dùng phải mất ít nhất hai lần nhấp hoặc nhấn để điều hướng đến một trang khác. Người dùng phải nhấp vào biểu tượng bánh hamburger trước để xem các tùy chọn, sau đó họ cần tìm tùy chọn mà họ đang tìm kiếm và nhấp vào nó

Biểu tượng menu bánh hamburger nên được đặt ở bên trái hay bên phải của màn hình?

Dù không có câu trả lời đúng hay sai duy nhất, nhưng điều quan trọng là phải chia sẻ một số khuyến nghị chung cho các nhà thiết kế đang cân nhắc Thực đơn bánh hamburger. Nếu bạn đang thiết kế web kế tiếp, bạn nên đặt các biểu tượng bánh hamburger ở góc trên cùng bên trái của trang. Ở thế giới phương Tây, người dùng bắt đầu quét một trang từ trái sang phải và menu bánh hamburger sẽ là thứ đầu tiên họ chú ý

Nếu bạn đang thiết kế một ứng dụng Android, bạn nên tuân theo các nguyên tắc của Material Design. Đối với các ngôn ngữ từ trái sang phải, menu bánh hamburger nên được đặt ở góc trên cùng bên trái của màn hình. Điều này có nghĩa là Ngăn điều hướng hoặc menu bên cũng sẽ mở ra từ phía bên trái của màn hình

Thiết kế lý tưởng cho menu hamburger di động là gì?

Menu hamburger là một mẫu điều hướng phổ biến trên nhiều ứng dụng và trang web dành cho thiết bị di động. Vì màn hình di động không có sản phẩm tương đối nhỏ nên việc sử dụng mẫu này sẽ có lợi để rút lại nhiều không gian hơn cho nội dung. Đồng thời, biểu tượng bánh hamburger có thể khó tiếp cận với người dùng trên thiết bị di động. Khi màn hình ngày càng lớn, người dùng ngày càng khó tiếp cận biểu tượng bánh hamburger nằm ở góc trên cùng của màn hình.

Nếu bạn quyết định sử dụng menu hamburger cho trang web hoặc ứng dụng dành riêng cho thiết bị di động của mình, các quy tắc đơn giản sau sẽ giúp bạn tạo menu hamburger thiết kế lý tưởng cho thiết bị di động

• Ưu tiên các điểm đến và phân cấp điều hướng. Sử dụng menu bánh hamburger khi sản phẩm của bạn có nhiều hơn năm điểm đến cấp cao nhất hoặc hai hoặc nhiều cấp phân điều hướng. Nếu bạn có tùy chọn điều hướng từ năm quan trọng như nhau trở xuống, bạn nên sử dụng điều hướng hiển thị (ví dụ:. thẻ thanh)
• Đặt các tùy chọn điều hướng trong một cột. Sắp xếp các điểm theo mức độ quan trọng của người dùng, có nghĩa là các tùy chọn quan trọng hơn nên đi về phía dưới cùng, trong khi các tùy chọn ít quan trọng hơn nên đi về phía dưới cùng. Bằng cách hiển thị các tùy chọn điều hướng này trong danh sách dọc, bạn sẽ giúp người dùng quét chúng dễ dàng hơn
• Không bao giờ kết hợp các mẫu điều hướng cho điều hướng chính. Bạn không nên trộn menu bánh hamburger với các mẫu điều hướng khác, giả sử như tab thanh, vì nó sẽ gây nhầm lẫn cho người dùng của bạn. Chỉ nên có một mẫu điều hướng chính cho mỗi ứng dụng hoặc trang web
• Cố gắng sử dụng menu bánh hamburger cho các tùy chọn phụ. Menu bánh hamburger rất phù hợp để lưu trữ các tùy chọn điều hướng phụ hoặc các tùy chọn không trực tiếp phục vụ mục tiêu điều hướng chính của bạn

Một số ví dụ điển hình về menu trang web bánh hamburger là gì?

Bây giờ bạn đã biết mẫu điều hướng nổi tiếng này là gì, đã đến lúc chia sẻ một số trang web phổ biến có menu bánh hamburger

1. bản đồ Google

Google Maps là một trang web ưu tiên nội dung. Nó cung cấp cho người dùng chính xác những gì họ mong đợi từ nó. Vùng chính của màn hình được dành riêng cho một bản đồ với một số điều khiển giao diện người dùng (UI) thiết yếu, bao gồm các công cụ phóng to và thu nhỏ. Tất cả các nút điều hướng phụ đều bị ẩn đi trong menu bánh hamburger

2. adidas

Thiết kế trang web của Adidas đặt menu bánh hamburger ở góc trên bên trái của trang. Adidas trảm theo mô hình Ưu tiên +, vì menu bánh hamburger chỉ hiển thị khi chế độ xem của người dùng trở nên tương đối nhỏ

3. Awww

Awwwards là một tập hợp các trang web sáng tạo và đổi mới. Thiết kế của trang web này theo một cách tiếp cận tối thiểu. Để cố gắng tập trung chú ý của người dùng vào nội dung, họ sẽ loại bỏ tất cả các âm thanh phức tạp. Không có gì ngạc nhiên khi họ quyết định sử dụng Menu hamburger để đạt được mục tiêu này. Một điều tuyệt vời về Awwwards là chúng bổ sung menu biểu tượng với nhãn “Menu”. Bằng cách đó, họ giảm thiểu khả năng người dùng không thể phát hiện ra menu biểu tượng bánh hamburger

4. Bootstrap

Bootstrap là bộ công cụ mã nguồn mở front-end phổ biến nhất thế giới. Nó cho phép các nhà thiết kế web tạo ra các tổ chức đáp ứng cục bộ một cách nhanh chóng. Điểm ngắt là các khối xây dựng của thiết kế đáp ứng. Các nhà thiết kế sử dụng chúng để kiểm tra giám sát cách bố trí cục bộ của họ có thể được điều chỉnh sao cho phù hợp với tầm nhìn cụ thể. Bootstrap sử dụng menu hamburger cho các điểm ngắt nhỏ (tức là nhỏ hơn 576px)

5. Evernote

Evernote là một sản phẩm được thiết kế để ghi chú và sắp xếp các thông tin khác nhau. Thiết kế trang chủ trang web của Evernote có menu bánh hamburger ở góc trên cùng bên phải của trang. Lưu ý rằng mỗi khối nội dung có bao nhiêu khoảng trắng, bao gồm giữa tên và biểu tượng của Evernote, dòng tiêu đề của trang và nút gọi hành động

Khám phá xem menu bánh hamburger có phù hợp với trang web hoặc ứng dụng của bạn không

Khi bạn đang suy nghĩ về công việc menu hamburger có phù hợp với trang web của mình hay không, điều quan trọng là phải xem xét cách thức hoạt động của menu đối với người dùng của bạn. Menu hamburger có giúp điều hướng dễ dàng hơn không? . Chạy thử trải nghiệm A / B với hai ví dụ thiết kế, bao gồm một ví dụ có menu bánh hamburger và một ví dụ có điều hướng hiển thị như thanh điều hướng cấp cao nhất. Do timehoàn thành nhiệm vụ và xem tùy chọn nào phù hợp nhất với người dùng của bạn