Thực đơn
trang chủTrình duyệt

Làm cách nào để thiết kế đường dẫn trong CSS? Breadcrumbs trong thiết kế web: ứng dụng và ví dụ Thiết kế breadcrumbs

Trên các trang web có nhiều trang, đường dẫn ( điều hướng đường dẫn) có thể giúp ích rất nhiều cho khách truy cập điều hướng cấu trúc phân cấp của tài liệu và cho biết vị trí hiện tại của người dùng trên trang web. Từ góc độ khả năng sử dụng, đường dẫn có thể giảm số bước mà khách truy cập phải thực hiện để tìm đường lên cấp cao nhất của trang.

Breadcrumb là gì?

vụn bánh mì (Chức năng điều hướng, "Mẩu bánh mì", Tiếng Anh vụn bánh mì) - một thành phần điều hướng trang web, thể hiện đường dẫn xuyên qua trang web từ “gốc” của nó đến trang hiện tại mà người dùng đang ở.

Tựa đề "Breadcrumbs" là một sự ám chỉ mỉa mai đến câu chuyện cổ tích Đức "Hansel và Gretel", trong đó những đứa trẻ khi bị dẫn vào rừng lần thứ hai đã không thể tìm được đường quay về vì lần này thay vào đó là những viên sỏi nhỏ. họ để lại những mẩu vụn bánh mì, sau đó bị chim rừng mổ.

Bạn thường có thể xem đường dẫn trên các trang web có nhiều nội dung được sắp xếp theo thứ bậc. Hình thức đơn giản nhất là khi breadcrumb được trình bày dưới dạng các liên kết văn bản nằm ngang và các ký hiệu phân tách (> -"lớn hơn") cho biết mức độ của trang đó so với các trang khác.

Khi nào bạn nên sử dụng Breadcrumbs?

Sử dụng đường dẫn breadcrumb dành cho các website lớn và website có tổ chức trang phân cấp.

Không nên sử dụng đường dẫn cho các trang web cấp đơn không có bất kỳ phân cấp hoặc nhóm logic nào.

Một cách tuyệt vời để xác định liệu một trang web có được hưởng lợi từ việc sử dụng đường dẫn hay không là xây dựng sơ đồ hoặc sơ đồ trang web thể hiện kiến ​​trúc điều hướng của trang web, sau đó phân tích xem đường dẫn có cho phép người dùng dễ dàng điều hướng trong và giữa các danh mục hay không.

Điều hướng phân cấp nên được coi là một tính năng bổ sung và không nên thay thế menu điều hướng chính hiệu quả. Đây là sơ đồ điều hướng phụ cho phép người dùng xác định vị trí của họ và là một cách khác để điều hướng trang web.

Các loại Breadcrumb

Có ba chínhloại "mẩu bánh mì".

Dựa trên vị trí

Đường dẫn dựa trên vị trí hiển thị cho người dùng vị trí của họ trong hệ thống phân cấp trang web.Chúng thường được sử dụng cho các cấu trúc điều hướng có nhiều cấp độ (thường là nhiều hơn hai cấp độ).Trong ví dụ dưới đây (từSitePoint ), mỗi liên kết văn bản của trang nằm ở bên trái sẽ cao hơn một cấp.

Dựa trên thuộc tính

Đường dẫn dựa trên thuộc tính phản ánh các thuộc tính của một trang cụ thể.

Dựa trên đường dẫn

Chúng hiển thị đường dẫn người dùng đã đi để đến trang hiện tại. Đường dẫn này là động. Cùng một trang có thể có các địa chỉ khác nhau.

Lợi ích của việc sử dụng Breadcrumb

Chúng có thể giúp người dùng

Breadcrumbs được sử dụng chủ yếu để cung cấp cho người dùng một phương tiện bổ sung để điều hướng một trang web.Trên các trang web lớn, đa cấp, việc cung cấp hình ảnh trực quan về đường đi có thể giúp người dùng điều hướng đến các danh mục cấp cao hơn một cách khá dễ dàng.

Giảm số lần nhấp chuột hoặc hành động để quay lại các trang cấp cao hơn

Thay vì sử dụng nút quay lại của trình duyệt hoặc điều hướng chính của trang web, người dùng có thể điều hướng quay lại các danh mục hàng đầu bằng cách sử dụng đường dẫn với ít lần nhấp chuột hơn.

Nói chung không làm tắc màn hình

Chúng thường có hướng nằm ngang và do đó không chiếm nhiều không gian trên trang.

Giảm tỷ lệ thoát

Breadcrumbs có thể lôi kéo khách truy cập mới duyệt phần còn lại của trang web của bạn. Ví dụ: người dùng truy cập một trang thông qua tìm kiếm trên Google, xem các danh mục được đăng ở trên và có thể quan tâm. Điều này, đến lượt nó, làm giảm tỷ lệ thoát của trang web.

Lỗi khi sử dụng Breadcrumbs

Sử dụng breadcrumbs khá đơn giản. Nhưng trước khi triển khai chúng trên trang web của mình, bạn cần xem xét một số sai lầm mà bạn nên tránh.

Sử dụng breadcrumb khi không cần thiết

Một sai lầm phổ biến là sử dụng breadcrumbs khi làm như vậy không mang lại lợi ích gì.

Trong ví dụ trên, chúng ta có thể thấy có quá nhiều tùy chọn điều hướng được đặt khá gần nhau: điều hướng chính, đường dẫn và điều hướng phụ.

Sử dụng đường dẫn làm điều hướng chính của bạn

Như đã lưu ý trước đó, đường dẫn nên được sử dụng như một công cụ hỗ trợ điều hướng bổ sung.

Sử dụng đường dẫn khi trang có nhiều danh mục

Breadcrumbs có cấu trúc tuyến tính nên sẽ khó sử dụng nếu trang của bạn không thể chia thành các danh mục rõ ràng.Việc quyết định có nên sử dụng đường dẫn hay không phụ thuộc phần lớn vào cách bạn đã tạo hệ thống phân cấp trang web của mình.Ở cấp độ trang thấp, việc sử dụng đường dẫn không hiệu quả, không chính xác và gây nhầm lẫn cho người dùng.

Thiết kế đường dẫn

Khi phát triển đường dẫn, một số câu hỏi có thể phát sinh. Ví dụ:

Ký hiệu nào nên được sử dụng để phân tách các liên kết?

Ký hiệu phổ biến và dễ nhận biết nhất để phân tách các siêu liên kết trong đường dẫn là ký hiệu lớn hơn - (>).

Bạn cũng có thể sử dụng dấu ngoặc kép để biểu thị góc bên phải (") và dấu gạch chéo lên (/).

Sự lựa chọn phụ thuộc vào chính trang web và loại chuỗi bạn sử dụng.Ví dụ: nếu các liên kết trong đường dẫn không có mối quan hệ phân cấp với nhau thì việc sử dụng ký hiệu lớn hơn > có thể không truyền tải chính xác bản chất của chúng.

Họ nên là gì?

Bạn không muốn đường dẫn của bạn chiếm ưu thế trên trang.Chúng nên được sử dụng như một công cụ hỗ trợ bổ sung cho người dùng (để thuận tiện), vì vậy kích thước của chúng cũng phải phù hợp với điều này và truyền tải chức năng này đến người dùng một cách chính xác - chúng phải nhỏ hơn hoặc ít được chú ý hơn so với điều hướng menu chính.

Một nguyên tắc nhỏ khi xác định quãng đường di chuyển là nókhông nên là yếu tố đầu tiên thu hút sự chú ý của người dùng trên trang.

Breadcrumbs nên được đặt ở đâu?

Breadcrumbs thường xuất hiện ở đầu trang, bên dưới menu điều hướng chính, nếu sử dụng menu ngang.

Số liệu thống kê

Dưới đây là số liệu thống kê được thu thập vào tháng 5 năm 2002 trên 75 trang thương mại điện tử hàng đầu.

Định hướng chuỗi

95% - ngang

5% theo chiều dọc

Dấu phân cách giữa các phần tử (đối với chuỗi ngang)

Ví dụ về việc sử dụng breadcrumbs trong thiết kế web

Bây giờ chúng ta đã xem ai, như thế nào, khi nào và tại sao mọi người sử dụng đường dẫn, chúng ta có thể xem một số ví dụ về cách chúng được sử dụng trên các trang web.

Cách sử dụng breadcrumbs cổ điển

Sử dụng các ký hiệu khác

Điều hướng Breadcrumb giúp khách truy cập trang web điều hướng cấu trúc phân cấp của tài liệu và tìm đường đến cấp cao nhất. Do đó, nếu trang web chứa một số lượng lớn tài liệu thì nó phải được cung cấp “mẩu bánh mì”. Bài học này sẽ trình bày mã CSS để tạo các tùy chọn thiết kế khác nhau cho một công cụ điều hướng cần thiết như vậy.

đánh dấu HTML

Việc đánh dấu rất đơn giản và tối thiểu. Nó dựa trên một danh sách không có thứ tự.

CSS

Trước tiên, hãy thiết lập lại CSS một chút cho danh sách không có thứ tự của chúng ta:

Ul(lề: 0; phần đệm: 0; kiểu danh sách: không có; )

Chúng tôi sẽ sử dụng các phần tử giả để thiết kế đường dẫn của mình.

Ví dụ đầu tiên

Ví dụ này sử dụng một kỹ thuật rất đơn giản. Một hình tam giác được tạo trên khung bên phải bằng cách sử dụng các phần tử giả được đặt chồng lên nhau. Hình tam giác tối được bù đắp để tạo hiệu ứng khung.

#breadcrumbs-one( nền: #eee; độ rộng đường viền: 1px; kiểu đường viền: rắn; màu đường viền: #f5f5f5 #e5e5e5 #ccc; bán kính đường viền: 5px; bóng hộp: 0 0 2px rgba(0, 0,0,.2); tràn: ẩn; chiều rộng: 100%; ) #breadcrumbs-one li( float: left; ) #breadcrumbs-one a( đệm: .7em 1em .7em 2em; float: left; text- trang trí: không có; màu: #444; vị trí: tương đối; bóng văn bản: 0 1px 0 rgba(255,255,255,.5); màu nền: #ddd; hình nền: gradient tuyến tính(sang phải, #f5f5f5, # ddd); ) #breadcrumbs-one li:first-child a( đệm-trái: 1em; bán kính đường viền: 5px 0 0 5px; ) #breadcrumbs-one a:hover( nền: #fff; ) #breadcrumbs-one a ::after, #breadcrumbs-one a::trước( nội dung: ""; vị trí: tuyệt đối; trên cùng: 50%; lề trên: -1,5em; viền trên: 1,5em trong suốt; viền dưới: 1,5em rắn trong suốt; viền-trái: 1em rắn; phải: -1em; ) #breadcrumbs-one a::after( z-index: 2; border-left-color: #ddd; ) #breadcrumbs-one a::trước( viền-trái-màu: #ccc;phải: -1.1em; chỉ số z: 1; ) #breadcrumbs-one a:hover::after( border-left-color: #fff; ) #breadcrumbs-one .current, #breadcrumbs-one .current:hover( font-weight: đậm; nền: none; ) # breadcrumbs-one .current::after, #breadcrumbs-one .current::trước( nội dung: bình thường; )

Hình dạng CSS được xây dựng bằng cách sử dụng các phần tử giả được đặt trước và sau một phần tử.

#breadcrumbs-two( tràn: ẩn; chiều rộng: 100%; ) #breadcrumbs-two li( float: left; lề: 0 .5em 0 1em; ) #breadcrumbs-two a( nền: #ddd; phần đệm: .7em 1em ; float: trái; trang trí văn bản: không có; màu: #444; bóng văn bản: 0 1px 0 rgba(255,255,255,.5); vị trí: tương đối; ) #breadcrumbs-two a:hover( nền: #99db76; ) #breadcrumbs-two a::trước(nội dung: ""; vị trí: tuyệt đối; trên cùng: 50%; lề trên: -1,5em; chiều rộng đường viền: 1,5em 0 1,5em 1em; kiểu đường viền: liền khối; đường viền- color: #ddd #ddd #ddd trong suốt; trái: -1em; ) #breadcrumbs-two a:hover::trước( border-color: #99db76 #99db76 #99db76 trong suốt; ) #breadcrumbs-two a::after( nội dung : ""; vị trí: tuyệt đối; trên cùng: 50%; lề-trên: -1,5em; viền-trên: 1,5em khối trong suốt; viền-dưới: 1,5em khối trong suốt; viền-trái: 1em khối #ddd; phải: -1em; ) #breadcrumbs-two a:hover::after( border-left-color: #99db76; ) #breadcrumbs-two .current, #breadcrumbs-two .current:hover( font-weight: đậm; lý lịch: không có; ) #breadcrumbs-two .current::after, #breadcrumbs-two .current::trước( content: normal; )

Thuộc tính bán kính đường viền làm tròn các góc của hình chữ nhật và hình vuông. Hình vuông được xoay để tạo thành một viên kim cương.

#breadcrumbs-ba( tràn: ẩn; chiều rộng: 100%; ) #breadcrumbs-ba li( float: left; lề: 0 2em 0 0; ) #breadcrumbs-ba a( đệm: .7em 1em .7em 2em; float: trái; trang trí văn bản: không có; màu: #444; nền: #ddd; vị trí: tương đối; chỉ mục z: 1; bóng văn bản: 0 1px 0 rgba(255,255,255,.5); bán kính đường viền: .4em 0 0 .4em; ) #breadcrumbs-ba a:hover( nền: #abe0ef; ) #breadcrumbs-ba a::after( nền: #ddd; nội dung: ""; chiều cao: 2,5em; lề trên: -1,25em ; vị trí: tuyệt đối; bên phải: -1em; trên cùng: 50%; chiều rộng: 2,5em; chỉ số z: -1; biến đổi: xoay(45deg); bán kính đường viền: .4em; ) #breadcrumbs-ba a:hover: :after( nền: #abe0ef; ) #breadcrumbs-ba .current, #breadcrumbs-ba .current:hover( font-weight: đậm; nền: none; ) #breadcrumbs-ba .current::after( nội dung: bình thường; )

Sử dụng các phần tử giả, hai hình chữ nhật được thêm vào. Sau đó, họ làm tròn các góc.

#breadcrumbs-four( tràn: ẩn; chiều rộng: 100%; ) #breadcrumbs-four li( float: left; lề: 0 .5em 0 1em; ) #breadcrumbs-four a( nền: #ddd; phần đệm: .7em 1em ; float: trái; trang trí văn bản: không có; màu: #444; bóng văn bản: 0 1px 0 rgba(255,255,255,.5); vị trí: tương đối; ) #breadcrumbs-four a:hover( nền: #efc9ab; ) #breadcrumbs-four a::trước, #breadcrumbs-four a::after( nội dung:""; vị trí:tuyệt đối; trên cùng: 0; dưới cùng: 0; chiều rộng: 1em; nền: #ddd; biến đổi: skew(-10deg ); ) #breadcrumbs-four a::trước( left: -.5em; border-radius: 5px 0 0 5px; ) #breadcrumbs-four a:hover::Before( nền: #efc9ab; ) #breadcrumbs-four a ::after( right: -.5em; border-radius: 0 5px 5px 0; ) #breadcrumbs-four a:hover::after( nền: #efc9ab; ) #breadcrumbs-four .current, #breadcrumbs-four .current :hover( font-weight: đậm; nền: không có; ) #breadcrumbs-four .current::after, #breadcrumbs-four .current::trước( nội dung: bình thường; )

Lợi ích của thiết kế Breadcrumb CSS3

  • Không có hình ảnh nên dễ dàng cập nhật và bảo trì.
  • Dễ dàng mở rộng.
  • Tương thích ngược với các trình duyệt cũ hơn.

Danh sách rất thuận tiện do cấu trúc phân cấp và cài đặt chế độ xem linh hoạt, vì vậy chúng không chỉ được sử dụng cho mục đích đã định mà còn để tạo các thành phần trang khác nhau như đường dẫn, đánh số trang, menu, tab, v.v.

vụn bánh mì

Đường dẫn giúp bạn điều hướng trang web và hiển thị vị trí của trang hiện tại so với các phần khác của trang web. Điều này giúp bạn dễ dàng thăng cấp và hiểu được mình đang ở phần nào. Vì vậy, đối với một trang web kỹ thuật, việc điều hướng có thể như sau (Hình 1).

Cơm. 1. Loại bánh mì vụn

Văn bản cuối cùng trỏ đến trang hiện tại và không phải là một liên kết. Tất cả các mục được phân tách với nhau bằng một số ký hiệu, thường là mũi tên (→), dấu gạch chéo (/), dấu lớn hơn (>) và những thứ tương tự.

Vì thiết kế được giao phó cho các kiểu dáng nên mã HTML rất ngắn gọn. Chúng tôi tạo một danh sách và gán cho nó lớp breadcrumbs để kiểu này không mở rộng sang các danh sách khác.

  • trang chủ
  • chuyển nhượng
  • Hộp số
  • Hộp số giun

Lưu ý rằng không có dấu phân cách ở đây; chúng được hiển thị bằng thuộc tính kiểu nội dung (ví dụ 1).

Ví dụ 1: Tạo Breadcrumb

vụn bánh mì

  • trang chủ
  • chuyển nhượng
  • Hộp số
  • Hộp số giun

Để bắt đầu, chúng ta đặt lại tất cả lề và phần đệm của danh sách, đồng thời sắp xếp các mục theo chiều ngang bằng cách sử dụng thuộc tính display có giá trị inline-block . Nó cũng loại bỏ các điểm đánh dấu, vì vậy không cần phải cố ý làm điều này. Phần tử giả ::Before được yêu cầu để thêm dấu phân cách giữa các mục và kiểm soát sự xuất hiện của nó. Văn bản được thêm vào tất cả các điểm, bao gồm cả điểm đầu tiên, tất nhiên là chúng tôi không cần. Do đó, chúng tôi loại bỏ nó bằng cách sử dụng lớp giả :first-child, lớp này áp dụng kiểu cho phần tử đầu tiên

  • .

    Một lượng lớn tài liệu, chẳng hạn như các bài viết trên trang web, thường được chia thành các trang riêng biệt, mỗi trang 10-15 bài, điều này dẫn đến việc giảm tải trang. Việc chuyển đổi giữa các trang riêng lẻ được thực hiện thông qua việc đánh số của chúng, trong đó mỗi số đóng vai trò là một liên kết đến trang tương ứng. Có thể hiển thị tất cả các trang, một số trang nhất định hoặc chỉ liên kết đến trang tiếp theo và trang trước. Tùy chọn nào để chọn tùy thuộc vào thiết kế trang web và sở thích của bạn. Một trong những phương pháp đánh số có thể được hiển thị trong Hình. 2.

    Cơm. 2. Đánh số trang

    Để thực hiện việc đánh số này, chúng ta lại sử dụng một danh sách đơn giản, bây giờ với lớp pager, mỗi mục trong danh sách này sẽ là một liên kết đến trang. Để đánh dấu trang hiện tại, hãy thêm lớp đang hoạt động (ví dụ 2).

    Ví dụ 2: Đánh số trang

    Phân trang

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    Đường giữa các điểm được tạo thông qua thuộc tính border-bottom cho phần tử