Mã hóa một menu điều hướng Breadcrumb duyên dáng trong CSS3
Các menu và liên kết điều hướng có thể là các yếu tố giao diện quan trọng nhất đối với bố cục web. Đây là những cửa hàng duy nhất cho người dùng du lịch giữa các trang và tương tác với tất cả nội dung bạn đã tạo. Breadcrumb cung cấp chức năng tương tự với lợi ích bổ sung của theo dõi vị trí hiện tại của bạn. Bạn sẽ có thể hiển thị tất cả các đường dẫn liên kết trước đó khi người dùng đi qua hệ thống phân cấp trang web của bạn.
Trong hướng dẫn này, chúng tôi sẽ tạo ra một menu điều hướng bánh mì tuyệt vời với một số hiệu ứng CSS3. Điều này đã được thử nghiệm để hoạt động trong tất cả các trình duyệt tương thích CSS3, ngay cả các trình duyệt cũ không hỗ trợ CSS3 vẫn sẽ hiển thị đúng cách trong hầu hết các trường hợp.
Trước khi đi sâu vào mã, chúng ta sẽ nói một chút về chức năng của mẩu bánh mì của chúng tôi, hướng dẫn đầy đủ khi nhảy!
Cung cấp đường mòn
Một đường mòn bánh mì không phức tạp hơn bất kỳ menu nào khác. Các kiểu của chúng tôi sẽ sử dụng các thuộc tính CSS phức tạp hơn nhiều so với hầu hết các ví dụ, tuy nhiên mẫu cơ bản của chúng tôi vẫn sẵn sàng để hướng dẫn người dùng từ trang này sang trang khác.
Trong ví dụ này, chúng tôi sẽ tạo lại một kiểu tương tự như menu hỗ trợ của Google. Bạn có thể xem menu của họ trên trang hỗ trợ Gmail để biết ý tưởng về nơi chúng tôi đang hướng tới. Cuối cùng, chúng tôi muốn cung cấp trải nghiệm người dùng tốt nhất của chúng tôi cho tất cả người dùng, bất kể hệ điều hành hoặc phần mềm trình duyệt của họ, do đó tôi đã xây dựng 2 ví dụ mã khác nhau để hỗ trợ xuống cấp duyên dáng giữa các trình duyệt cũ hơn.
Cái đầu tiên được xây dựng bằng cách sử dụng hình nền tùy chỉnh và sắp xếp CSS thích hợp. Tất cả các sự kiện di chuột và các sự kiện đang hoạt động đều được xây dựng trước chỉ với một vài kiểu CSS, nhưng người dùng đã tắt hình ảnh sẽ không thể trải nghiệm các hiệu ứng này! Đây là lý do tại sao tôi cũng đã xây dựng một menu trông tương tự với độ dốc CSS, góc tròn và bóng hộp.
Nếu bạn lo lắng về việc hỗ trợ cả hai phong cách, bạn có thể chọn giữa chúng cho trang web của riêng bạn. Hầu hết khách truy cập sẽ sử dụng hình ảnh theo mặc định, nhưng hãy đào qua công cụ phân tích trang web của bạn nếu bạn muốn dữ liệu khách truy cập chính xác hơn.
Đủ từ, hãy nhảy vào dự án! Chúng ta sẽ bắt đầu bằng cách xây dựng khung HTML cơ bản và chuyển sang các hiệu ứng kiểu dáng khác nhau. Đầu tiên bạn cần tải hình ảnh cần thiết cho dự án.
Mã số trần
Tôi đang bắt đầu tài liệu của mình với mẫu trang HTML5 tiêu chuẩn. Điều này bao gồm các loại tài liệu mặc định, CSS được liên kết và tất cả các yếu tố cơ bản. Tôi đã thêm mã dưới đây nếu bạn muốn bắt đầu tài liệu của riêng mình theo cách này. Lưu ý rằng nó không ảnh hưởng đến cách hiển thị mẩu bánh mì của bạn, vì vậy hãy sử dụng mẫu trang của riêng bạn nếu bạn muốn.
Trang chủ
Tôi sẽ chia mã thành hai khối khác nhau. Khối đầu tiên với hình ảnh được xây dựng theo cách hơi khác, tiếp theo là menu của chúng tôi không có hình ảnh. Mỗi bộ được đưa ra ID để chúng tôi có thể xác định nội dung dễ dàng hơn nhiều. Nếu bạn cũng là một fan hâm mộ của jQuery, bạn có thể sử dụng Bộ chọn #ID để thao tác tất cả các thành phần DOM bên trong.
Đầu tiên chúng ta có một chứa div với id “vụn bánh mì“. Trong tệp demo tôi đã sử dụng điều này để phân tách mã của chúng tôi và di chuyển nó trên trang với một số lề được thêm vào. Bạn có thể xóa div bên ngoài này, nhưng bạn sẽ phải tạo kiểu lại mọi thứ để phù hợp với mẫu mới. Việc rời khỏi một container thực sự không hại gì vì bạn sẽ có thể kiểm soát vị trí dễ dàng hơn nhiều.
Trong nội bộ, tôi đã xây dựng các mẩu bánh mì bằng cách sử dụng một danh sách không có thứ tự. Có rất nhiều cách độc đáo để tùy chỉnh danh sách HTML theo kiểu và mẩu bánh mì chỉ là một trong số đó. Bạn có thể nhận thấy tôi đã đưa ra mục danh sách ban đầu lớp học của “Đầu tiên“. Điều này là cần thiết cho một số phần đệm thêm để giữ cho các mục menu thẳng hàng. Ngoài ra một nhỏ khối nhịp được thêm vào để chúng ta có đường viền bên trái phù hợp không chồng lên hình nền.
Ngoài ra, mỗi liên kết neo được trồng với số lượng giảm dần cho chỉ số z bất động sản. Sử dụng hình ảnh chúng ta sẽ cần có mỗi liên kết của chúng tôi chồng chéo để hiển thị mũi tên bánh mì đúng cách. Cách dễ nhất để thực hiện điều này là điều chỉnh chỉ số z vì vậy mỗi liên kết chồng lên nhau. Tôi bắt đầu với 9 và làm việc từ đó, nhưng nếu bạn có nhiều liên kết hơn trong menu, hãy bắt đầu với số nguyên cao hơn.
Menu không có hình ảnh
Đến duyên dáng làm giảm bánh mì của chúng tôi chúng ta cần một tập hợp các mục danh sách HTML thứ cấp. Nếu bạn đang cố gắng dự phòng trên một điều hướng, bạn có thể sử dụng jQuery để phát hiện tác nhân trình duyệt và áp dụng ID phù hợp. Thật không may, điều này không phải lúc nào cũng đáng tin cậy (ví dụ đối với một số người dùng di động nhất định). Một giải pháp khác là bao gồm một biểu định kiểu dành riêng cho IE và ẩn hoặc hiển thị menu nào hoạt động tốt nhất - nhưng tất nhiên, tùy chọn này chỉ dành cho Internet Explorer.
bánh mì2 là ID mới của chúng tôi được sử dụng để nhắm mục tiêu menu mà không có hình ảnh. Giữ theo mẫu này tôi đã sử dụng vụn2 là lớp cho danh sách không có thứ tự. Lưu ý rằng lý do chúng tôi đang sử dụng các lớp học là cho nó đơn giản để sao chép các menu này, Vì vậy, khi bạn muốn có một vài mẩu bánh mì khác nhau trên trang của mình, với các lớp này, điều này sẽ không bao giờ trở thành vấn đề.
Chúng tôi đã giữ .Đầu tiên lớp nhưng thêm vào .Cuối cùnglớp vào mục danh sách cuối cùng. Không có hình ảnh, chúng tôi không thể nhân đôi mũi tên cho từng mục của menu điều hướng, do đó tôi đã sử dụng một số góc tròn để thêm gia vị. .Đầu tiên lớp và .Cuối cùng thao tác bán kính đường viền ở các cạnh của menu để tạo ra một kiểu web 2.0 thực sự thú vị.
CSS hình nền trượt
Đối với một số hiệu ứng đơn giản hơn, tôi đã ghép cả hai mẩu bánh mì với nhau khi xây dựng các thuộc tính. Điều này rất hữu ích vì nó không chỉ tiết kiệm một số không gian mà khi quay lại chỉnh sửa kiểu dễ dàng tùy chỉnh hơn cái nhìn của riêng bạn.
Cho cả hai #breadcrumb và # Breadcrumb2 Tôi đã thiết lập danh sách kiểu: không có; vì vậy tất cả các mục nội bộ sẽ không có điểm đánh dấu. Bạn có thể để những thứ này nếu bạn thích hiệu ứng này, nhưng tôi thấy HTML trở nên mệt mỏi khi làm việc và việc tạo các biểu tượng mới sẽ dễ dàng hơn rất nhiều. Vì vậy, hãy bắt đầu với .vụn lớp học.
.vụn hiển thị: khối; .crumbs li display: nội tuyến; .crumbs li.first padding-left: 8px; .crumbs li a, .crumbs li a: link, .crumbs li a: đã truy cập color: # 666; hiển thị: khối; phao: trái; cỡ chữ: 12px; lề trái: -13px; đệm: 7px 17px 11px 25px; vị trí: tương đối; trang trí văn bản: không có; .crumbs li a nền-hình ảnh: url ('Lỗi /img/bg-crumbs.png'); lặp lại nền: không lặp lại; vị trí nền: 100% 0; vị trí: tương đối; .crumbs li a: hover color: # 333; vị trí nền: 100% -48px; con trỏ: con trỏ; .crumbs li a: active color: # 333; vị trí nền: 100% -96px; .crumbs li.đầu tiên một nhịp height: 29px; chiều rộng: 3px; viền trái: 1px solid # d9d9d9; vị trí: tuyệt đối; đầu trang: 0px; trái: 0px; Chúng tôi thiết lập danh sách không theo thứ tự của chúng tôi thành khối vì vậy không có gì khác leo lên xung quanh khu vực. Lưu ý các mục danh sách là hiển thị nội tuyến trong khi mỗi liên kết neo được cung cấp nhiều chỗ hơn để trải ra. Chúng tôi muốn tất cả không gian trong menu của chúng tôi có thể nhấp được vì vậy điều này đòi hỏi xây dựng các mỏ neo của chúng tôi như là các yếu tố khối.
Tôi đã sử dụng một hình ảnh được gọi là bg-crumbs.png cho nền. Đây được gọi là một bảng sprite đơn giản trong CSS, hoặc cách khác là cửa kéo kỹ thuật. Điều này có nghĩa là khi người dùng di chuyển hoặc nhấp vào liên kết, chúng tôi sẽ chuyển vị trí nền để hiển thị kiểu cập nhật. Hình ảnh duy nhất này chứa tất cả 3 thiết kế chúng ta cần để tạo nền bánh mì ở các vị trí khác nhau, vì vậy chúng ta có thể sử dụng vị trí nền tài sản để di dời dựa trên sự tương tác của người dùng.
Hiệu ứng tùy chỉnh với CSS3
Thiết kế bánh mì ban đầu đơn giản hơn nhiều để tạo ra. Điều này rất đáng chú ý vì rất nhiều thuộc tính CSS cơ bản hơn bạn tưởng tượng, nhưng bây giờ chúng tôi bắt đầu tập trung vào việc sao chép các hiệu ứng này chỉ với CSS3!
Các kiểu riêng lẻ chiếm nhiều không gian, vì vậy tôi sẽ chia chúng thành 2 khối mã.
.crumbs2 hiển thị: khối; lề trái: 27px; đệm: 0; đệm-top: 10px; .crumbs2 li display: nội tuyến; .crumbs2 li a, .crumbs2 li a: link, .crumbs2 li a: đã truy cập color: # 666; hiển thị: khối; phao: trái; cỡ chữ: 12px; đệm: 7px 16px 7px 19px; vị trí: tương đối; trang trí văn bản: không có; viền: 1px solid # d9d9d9; viền-phải-chiều rộng: 0px; .crumbs2 li a hình nền: hình nền: -moz-linear-gradient (đáy trung tâm, rgb (241,241,241) 45%, rgb (245,245,245) 73%); / * Đối với Internet Explorer 5.5 - 7 * / bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * Đối với Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; .crumbs2 li. Trước tiên, Border-top-left-radius: 5px; -moz-Border-radius-topleft: 5px; -webkit-Border-top-left-radius: 5px; .crumbs2 li.last a Border-right-width: 1px; viền-dưới-phải-bán kính: 5px; -moz-Border-radius-bottomright: 5px; -webkit-Border-bottom-right-radius: 5px;
Các .vụn2 thực đơn đang sử dụng Độ dốc CSS để nhân đôi hiệu ứng nền. Nếu bạn không quen thuộc với những điều này, tôi rất khuyến nghị hướng dẫn Thủ thuật CSS về các Lớp CSS3 sẽ giúp bạn sử dụng hiệu quả các gradient CSS3 một cách hiệu quả. Chúng đã bao gồm một vài thuộc tính cho trình duyệt Microsoft và Opera, nhưng chúng không được hỗ trợ đầy đủ trong mọi trường hợp. Tôi chưa bao gồm chúng trong mã demo ở đây - nhưng thật tốt khi hiểu tất cả các tùy chọn.
-webkit-gradient và -moz-tuyến tính-gradient là những giải pháp cốt lõi làm hầu hết công việc. Tôi đã bao gồm mã kế thừa cho các phiên bản Internet Explorer cũ hơn, nhưng nó không được đảm bảo để hiển thị chính xác mọi lúc (chúng tôi đang sử dụng các kỹ thuật kết xuất hình ảnh mạnh mẽ). Lưu ý rằng tôi đã đặt cả mã màu RGB và hex giữa các thuộc tính nền. Bạn có thể sử dụng phương pháp này hay phương pháp khác nếu bạn thấy thoải mái hơn.
Các bán kính biên giới mã chỉ được áp dụng cho điều hướng bánh mì thứ cấp của chúng tôi. Điều này mang lại hiệu ứng gọn gàng ở phía trên bên trái và dưới cùng bên phải của toàn bộ menu bánh mì của chúng tôi. Thanh dường như bật ra khỏi trang - thực sự là một hiệu ứng tuyệt vời trên các trình duyệt hỗ trợ các kiểu, nhưng chúng chỉ bao gồm các trạng thái mặc định cho các liên kết của chúng tôi. Bây giờ, hãy xây dựng các hiệu ứng di chuột tương tự như các hình ảnh chúng ta đã sử dụng ở trên.
Biên giới và bóng CSS3
Bất cứ khi nào người dùng di chuyển qua một liên kết, chúng tôi muốn cập nhật một vài điều. Đầu tiên chúng ta cần phải làm tối màu đường viền trên và dưới của phần tử hoạt động của chúng tôi. Điều này có thể được nhìn thấy trong các hình ảnh cho cả trạng thái di chuột và trạng thái hoạt động.
.crumbs2 li a: hover Border-top-color: # c4c4c4; viền dưới cùng màu: # c4c4c4; hình nền: -webkit-gradient (tuyến tính, đáy trái, đỉnh trái, dừng màu (0,45, rgb (241,241,241)), dừng màu (0,73, rgb (248,248,248))); hình nền: -moz-linear-gradient (đáy trung tâm, rgb (241,241,241) 45%, rgb (248,248,248) 73%); / * Đối với Internet Explorer 5.5 - 7 * / bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Đối với Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; màu: # 333; -moz-box-bóng: 0px 2px 2px # e8e8e8; -webkit-box-bóng: 0px 2px 2px # e8e8e8; hộp bóng: 0px 2px 2px # e8e8e8; .crumbs2 li a: active Border-top-color: # c4c4c4; viền dưới cùng màu: # c4c4c4; hình nền: -webkit-gradient (tuyến tính, đáy trái, đỉnh trái, dừng màu (0,45, rgb (224,224,224)), dừng màu (0,73, rgb (235,235,235)); hình nền: -moz-linear-gradient (đáy trung tâm, rgb (224,224,224) 45%, rgb (235,235,235) 73%); / * Đối với Internet Explorer 5.5 - 7 * / bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Đối với Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; hộp bóng tối: -1px 1px 1px 0px #dadada inet; -webkit-box-bóng: -1px 1px 1px 0px #dadada in; -moz-box-bóng: -1px 1px 1px 0px #dadada in; màu: # 333;
Tôi đang sử dụng cùng một mã gradient như chúng ta đã sử dụng ở trên, nhưng lần này màu sắc sẽ khác đi nhiều nếu bạn nhận thấy các giá trị RGB của chúng tôi. Mỗi trạng thái sẽ làm tối màu văn bản thành # 333, nhưng các mô tả khác đã được thay đổi một chút để tương ứng với các lệnh của người dùng.
Khi di chuột bạn sẽ thấy một hiệu ứng dập nổi sáng bóng mà kết hợp với viền tối cung cấp cho các kiểu cửa sổ bật lên. Nếu bạn nhấp và giữ, bạn sẽ vào trạng thái hoạt động có tính năng gradient nền tối. Hiệu ứng này làm cho các nút trông giống như thật “ép” trong trang.
Chúng tôi cũng đang áp dụng bóng hộp các thuộc tính từ thông số kỹ thuật CSS3 mới. -webkit, -moz, và các kiểu mặc định được sử dụng với cùng các cài đặt. Di chuột hiển thị một bóng tối đi ra từ dưới cùng của liên kết được chọn. Khi kích hoạt, bóng sẽ được hình thành ở các viền trên, phải và dưới. Hiệu ứng này được tạo ra với hình nhỏ từ khóa được thêm vào cuối mỗi dòng thuộc tính hộp bóng. Một lần nữa, Thủ thuật CSS là người bạn tốt nhất của bạn ở đây với một bài viết tuyệt vời về bóng hộp, vì nó nói về cú pháp và cách sử dụng đúng trong CSS3.
Phần thưởng: Nhiều kiểu hơn
Ngoài mã hướng dẫn, tôi đã bao gồm các hình ảnh nền bổ sung với các bảng màu phù hợp. Tôi đã lấy mẫu từ nền ban đầu và sử dụng Adobe Photoshop để tạo một vài biến thể mà bạn có thể áp dụng vào trang web của riêng mình.
Những tập tin thưởng được bao gồm trong tập tin nguồn mà bạn có thể tải xuống ở định dạng lưu trữ .zip ở phần bên dưới.
Bạn có thể xem hình ảnh trên để có ý tưởng về những gì tôi đang nói. Nếu bạn cần một bảng màu cụ thể bật mở Photoshop> Hình ảnh> Điều chỉnh> Hue / Saturation để sửa đổi bảng màu cho phù hợp với mẫu của riêng bạn, hãy nhớ kiểm tra tùy chọn Colorize trong khung Hue / Saturation nếu màu sắc không thay đổi.
Phần kết luận
Hướng dẫn này sẽ giúp bạn làm quen với một số kỹ thuật CSS3 mới hơn. Chúng tôi đã tạo ra hai menu bánh mì tuyệt vời được tạo kiểu theo cách tương tự và xây dựng nó theo cách nó có thể làm giảm một cách duyên dáng trong các trình duyệt cũ hơn. Ngoài ra, tôi đã cung cấp mã trình diễn của tôi và một số hình ảnh thưởng để bạn chơi xung quanh.
Bạn có đặc biệt thích phong cách chúng tôi xây dựng ở đây không? Hoặc có thể bạn có câu hỏi hoặc ý tưởng về cách cải thiện mã hướng dẫn? Vui lòng chia sẻ suy nghĩ của bạn với chúng tôi trong khu vực thảo luận bên dưới và đừng quên tải xuống các tệp nguồn để bạn có thể chơi với bản demo!
Thêm hướng dẫn CSS3
Thèm có thêm CSS3? Dưới đây là các bài viết của chúng tôi để bạn hiểu về lý thuyết và thực tế CSS3!
- CSS3: Tạo Logo RSS Feed
- CSS3: Tạo trường tìm kiếm
- CSS3: Tạo biểu mẫu liên hệ AJAX
- CSS3: Xây dựng trang web HTML5 / CSS3
