Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Site Elements
Webdesign

Cách tạo menu bánh xe với CSS3

by
Length:LongLanguages:

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Không có cách học CSS nào nhanh là thực hành trong một dự án thực tế và đó chính xác là điều chúng ta sẽ làm. Tôi sẽ hướng dẫn bạn cách tạo một menu bánh xe CSS3 tuyệt vời, nhiều layer bằng cách sử dụng một vài kỹ thuật CSS cơ bản đến nâng cao. Vì vậy, hãy mở text editor hoặc IDE yêu thích của bạn và hãy bắt đầu với CSS3!

Hôm nay bạn sẽ học cách tạo ra giọt nước mắt kẹo ngọt từ nhiều biến thể màu sắc và style khác nhau hiện có. Bạn sẽ nhận được tất cả các biến thể trong các file nguồn. Ngoài ra, như một bonus bổ sung, tôi đã bổ sung một chút Javascript tùy chọn để bạn có thể xoay hình ảnh của mình tùy theo vào mục menu khi được rê chuột qua. Các file nguồn thậm chí đi kèm với tài liệu riêng của mình!

Lưu ý: Hiện tại hỗ trợ cho IE bị hạn chế. Chúng tôi chủ yếu sẽ trải qua điều này với mục đích thúc đẩy bao bọc với những điều chúng ta có thể làm trong CSS3 ... nhưng cũng như tất cả mọi thứ bên margin thực tiễn, điều đó có nghĩa là hy sinh một chút sự ổn định. Chúng tôi sẽ giải quyết chủ đề IE ở cuối bài hướng dẫn!


Hướng dẫn bằng video

Chúng tôi đang đề xuất hướng dẫn này ở hai định dạng khác nhau ngày hôm nay: Một video cũng như một hướng dẫn đầy đủ bằng chữ bên dưới. Thực hiện theo bất kỳ phương pháp học nào mà bạn thích (hoặc cả hai!) Và chúng tôi sẽ hướng dẫn bạn đến tận cuối cùng!


Hướng dẫn bằng chữ

Bài hướng dẫn từng bước bằng chữ nằm dưới đây. Hãy bảo đảm nhận lấy các nguồn có thể tải xuống đầy đủ là tốt!


Bước 1: Các layer

Điều đầu tiên chúng tôi muốn làm là tạo một số layer xếp chồng lên nhau và giữ nguyên vị trí với càng ít code càng tốt. Điều quan trọng là không khiến code của bạn phình to và không quá nhiều
những float không cần thiết hoặc các thành phần định vị absolute (tuyệt đối), vì vậy chúng tôi sẽ cố gắng duy trì nhiều nhất có thể.

Code:

Như bạn có thể thấy code khá đơn giản. Về cơ bản, chúng tôi đã xếp chồng một layer lên trên một layer khác và bằng cách này, chúng sẽ có thể giữ vị trí của mình.

Tiếp theo, chúng tôi muốn bổ sung một ảnh vào trung tâm của bánh xe, hoặc giọt nước mắt trong trường hợp này. Để thực hiện điều đó, chúng ta chỉ cần bổ sung đoạn code sau vào giữa layer wrap4 và layer complete. Thay đổi này sẽ cố định hình ảnh vào trung tâm của canvas. Chúng tôi sẽ chỉ sử dụng ảnh Rockable cho hình ảnh này vì chúng tuyệt vời!

Bây giờ chúng tôi sẽ bổ sung một số style cho từng layer riêng lẻ.

#menu-wrap:

Đây sẽ là container chính cho menu bánh xe của bạn. Nó cũng gồm có bất kỳ font phổ biến và kích thước font tác động đến bất kỳ thứ gì bên trong div id="menu-wrap".

Chúng tôi sẽ tiếp tục đảm bảo rằng hình ảnh trung tâm của chúng tôi được tạo style chính xác bằng cách đặt nó vào giữa bánh xe bằng cách sử dụng margin, bổ sung một số kích thước cho nó và một border.

Tất cả các wrapper: Chúng tôi sẽ tạo một số style nhằm áp dụng cho tất cả các wrapper chính bằng cách bổ sung border radius phổ thông, đặt tất cả chúng vào giữa, bổ sung một position relative (vị trí tương đối) sao cho bao bọc mọi thứ và đẩy chúng xuống để thu được hiệu ứng xếp lớp.

.wrap1:

Đây là layer lớn nhất của bạn nằm bên dưới tất cả những layer khác. Chúng tôi sẽ tạo ra một nền gradient màu đỏ và sử dụng một dự phòng màu đỏ cho các trình duyệt cũ hơn. Chúng tôi cũng sẽ sử dụng CSSpie để cho IE hiểu rằng sử dụng các style này là ổn. Sau đó, tất cả điều chúng ta cần làm là bổ sung width và height và bạn đã hoàn thành. Bạn muốn đảm bảo width và height lớn hơn tất cả các layer khác để nó hiển thị bên dưới chúng.

.wrap2:

Bây giờ cho wrap2, chúng ta sẽ thực hiện chính xác điều tương tự, chúng ta sẽ sử dụng các biến thể của màu trắng làm gradient và bổ sung outer và inner box shadow để tạo hiệu ứng bevel kết hợp với shadow backdrop. Sau đó, chúng ta cần xét width và height nhỏ hơn khoảng 40px so với layer chính để làm cho đẹp và đồng đều.

.wrap3 & 4:

Bây giờ chúng tôi sẽ lặp lại quy trình cho tất cả các wrapper khác bằng cách sử dụng các gradient màu khác nhau và làm cho mỗi layer nhỏ hơn 40px so với layer trước đó.

.wrap5 & .nav-holder:

Bây giờ chúng ta có thể tạo style wrap5 và nav-holder, chúng sẽ giữ tất cả các mục trong menu và cho style của candycane, chúng ta sẽ tô màu đen cho nó để bổ sung contrast trung tính trong khi wrap5 sẽ có màu trắng và sẽ đóng vai trò như container cho ảnh trung tâm. Điều chúng ta đang làm ở đây là cắt đi nền để bạn có thể nhìn xuyên qua wrap5 và ngăn giữ điều hướng, làm cho các layer khác xuất hiện phía sau nó cũng như hình ảnh trung tâm. Sau khi làm cho layer trong suốt, chúng ta sẽ bổ sung một border màu đen cho nav-holder và border màu trắng cho wrap5. Border của nav-holder phải được ẩn ở phía bên phải (đối với các menu phụ), tăng gấp đôi ở phía bên trái (đối với các menu chính) và màu trơn cho phần còn lại để tạo ra hiệu ứng đẹp và dễ dàng trong khi giảm thiểu số lượng layer mà chúng ta cần bổ sung. Theo truyền thống với hiệu ứng này, bạn có thể bổ sung tối đa 5 hoặc 6 layer mới, điều này giúp tiết kiệm rất nhiều code.

Lần này, width và height của wrap5 sẽ nhỏ hơn 60px so với các layer khác để làm cho nó đẹp hơn và thậm chí là lặp lại một lần nữa. Một lần đẩy thêm 10px ở trên cùng sẽ giúp căn chỉnh layer và một inner box shadow sẽ cho chúng ta một phối cảnh đẹp về khoảng cách giữa wrap5 và ảnh trung tâm.

Thêm top 0 vào nav-holder sẽ tự động căn chỉnh các layer với các layer khác. Chúng tôi cũng sẽ sử dụng margin âm cho căn chỉnh trên cùng bên trái và tạo một tỷ lệ height/width để khiến nó phù hợp trên cùng của các layer khác.

"Border của nav-holder phải được ẩn ở phía bên phải (đối với các menu phụ), tăng gấp đôi ở bên trái (đối với các menu chính) và màu trơn cho phần còn lại tạo ra hiệu ứng đẹp và dễ dàng trong khi giảm thiểu số lượng layer chúng ta phải bổ sung vào. "

Vâng, điều đó đủ dễ. Vậy sau khi bạn hoàn thành tất cả những điều đó, hy vọng bạn đã học được điều gì đó mới để bổ sung vào nhóm kỹ năng của mình. Tuy nhiên, cho đến giờ đây là điều bạn tạo ra. Nếu nó không giống như thế này, vui lòng dò lại code và xem bạn có thể đã bỏ lỡ điều gì không ... đừng lo lắng, đó có lẽ là điều gì đó rất nhỏ.

Các completer: Hmm ... điều này có vẻ không hoàn chỉnh với bạn? Chúng ta cần phủ lên trên một vài layer mà tôi đã gọi các completer để chúng ta có thể ẩn các phần của ảnh trung tâm và đưa nav-holder xa hơn xung quanh các layer khác để tạo hiệu ứng bo tròn đẹp và tắt nó đi.

Để làm điều tôi vừa đề cập khá đơn giản. Chúng ta có thể giúp hầu hết các style áp dụng cho cả hai completer với ít code hơn. Chúng ta hãy bổ sung border radius vào một bên để tạo một đường cong đẹp, sau đó chúng ta sẽ sử dụng transform để căn chỉnh completer giữa wrap1 và wrap5. Việc bổ sung màu nền của chúng tôi rất quan trọng hoặc sẽ không hiển thị gì. Chúng ta phải làm cho layer này được định vị tuyệt đối (absolute position) và di chuyển nó sang bên phải (right) và trên cùng (top) để có sắp xếp hoàn hảo.

.completer1 sẽ có display là none cho style giọt nước mắt này. Trên các kiểu khác, chẳng hạn như bánh xe, chúng tôi đã xóa phần đó để làm cho nó hiển thị.

.completer2 có bổ sung rotation (xoay) và chúng ta cần đẩy nó xuống một chút để phù hợp.

Sau khi bạn đã bổ sung các bộ hoàn thành thì bạn sẽ có một cái gì đó như thế này ... Một lần nữa nếu bạn không có những thứ tương tự như những gì bạn thấy ở đây, chỉ cần kiểm tra code của bạn và xem những gì bạn đã bỏ lỡ.

Bây giờ chúng ta có một tập hợp lớn các layer để làm việc. Tất cả đều được bố trí đẹp và có hiệu ứng CSS3 mượt mà, vậy hãy tiếp tục làm cho em bé này hoạt động!


Bước 2: Các mục menu điều hướng và các mục menu phụ

Bây giờ chúng tôi muốn bổ sung các liên kết điều hướng trông giống như đằng sau các layer khác nhau. Ở phía bên trái (ở chỗ border nhân đôi), chúng tôi muốn các mục menu chính và ở bên phải (trong không gian mở), chúng tôi muốn các mục menu phụ xuất hiện sau khi một mục chính được rê chuột qua. Bạn sẽ ngạc nhiên khi việc này quá dễ dàng để hoàn thành.

Code:

Có một hover block để giữ cho các menu đang active khi bạn di chuyển qua bánh xe chuột và chúng tôi muốn đảm bảo bao phủ toàn bộ bánh xe, vì vậy để đảm bảo khả năng tương thích của IE, chúng tôi sẽ bổ sung một nền có opacity 0,01 nếu IE sẽ không nhận ra rằng các phần tử thậm chí còn ở đó.

Sử dụng margin-left: 76px đảm bảo rằng bạn có đủ chỗ để rê chuột qua menu chính và menu phụ và vượt qua bánh xe mà không có gì biến mất.

Bây giờ chúng tôi muốn xóa các dấu đầu dòng khỏi từng mục menu hoặc [li]. Chúng tôi cũng muốn đảm bảo rằng chúng có liên quan đến nav-holder.

Bạn có thể bổ sung một border radius cho một chút style bổ sung. Chúng tôi sẽ làm cho nền có màu trơn và di chuyển các mục menu sang bên trái để chúng hầu như không chạm vào các cạnh của nav-holder.

Padding, text-indent và màu sắc là để tạo style bổ sung và không bắt buộc để menu hoạt động.

Bây giờ, hãy bổ sung một chút gradient vào các menu phụ và đẩy nó sang bên phải và gập mục menu phụ đầu tiên chỉ vừa đủ vào cạnh của wrap5.

Thêm box-shadow sẽ giúp chúng ta tạo hiệu ứng của các mục menu phụ bên dưới các layer tương ứng của chúng.

Xét margin trên mỗi mục menu phụ sẽ giúp chúng ta tạo bổ sung sự tách biệt và cho hiệu ứng của từng mục bên dưới một layer khác nhau.

Bạn cũng có thể bổ sung opacity cho từng mục để làm cho nó mờ dần từ top đến middle và bottom đến middle, nơi mục middle (ở giữa) có opacity hoàn toàn.

Ok vì vậy bạn đã bổ sung menu phụ của mình nhưng nó vẫn hiển thị mà không có menu chính nào được rê chuột qua. Để khắc phục điều này, chúng ta chỉ cần bổ sung display là none vào [ul].

Vì vậy, bây giờ nó hoàn toàn không hiển thị! OK, hãy tiếp tục làm cho nó hiển thị sau khi một mục chính được rê chuột qua. Bằng cách sử dụng li:hover > ul, chúng ta có thể biết rằng khi một menu chính [li] được rê chuột qua thì chúng ta sẽ hiển thị [ul] thích hợp cho menu phụ bằng cách sử dụng display: block.

Tạo style cho từng mục menu chính.

Đối với tính thẩm mỹ thuần túy, chúng ta có thể bổ sung border radius, box shadow và background. Điều cần thiết là tạo height, width, position: absolute và margin-top.

Margin top cho phép chúng ta đẩy mục menu đầu tiên xuống nơi chúng ta muốn, sau đó chúng ta có thể sử dụng ít margin hơn để đẩy phần còn lại của các mục.

Đối với 3 mục menu còn lại, chúng tôi sẽ bổ sung margin top cho mỗi khoảng cách chẵn giữa chúng và một margin trái để đặt chúng vào các layer khác nhau.

Tiếp theo, chúng ta cần đảm bảo bổ sung rotation cho mỗi mục để chúng ta có thể phù hợp với các menu xung quanh bánh xe.

Sau khi xử lý các mục menu chính, chúng tôi sẽ làm điều tương tự cho menu phụ nhưng thay vì làm các mục menu bố trí vòng quanh bánh xe, chúng tôi muốn chúng thẳng lên và xuống. Để làm điều này, chúng ta cần phải bù cho vòng quay của menu chính bằng cách bổ sung rotation vào mỗi menu phụ.

Giống như menu chính, chúng ta cần bổ sung một margin top để tạo khoảng cách giữa mỗi mục và đẩy từng mục menu phụ sang phải để chúng gần hơn với các layer tương ứng của chúng.

Cuối cùng, chúng ta có thể bổ sung một số style tùy chọn để làm cho các font mờ dần và sau đó trở lại màu trơn khi rê chuột qua. Điều này sẽ chuyển từng mục lên phía trước cho người dùng khi họ rê chuột qua nó.

Những style này không bắt buộc để menu hoạt động nhưng chúng có bổ sung một số hiệu ứng đẹp mắt và tăng khả năng sử dụng.

Nếu bạn muốn tạo style bổ sung cho từng menu phụ riêng lẻ, bạn có thể sử dụng code sau đây ...

Sau khi bạn hoàn thành phần cuối cùng, bạn sẽ có kết quả như thế này ... Một lần nữa nếu kết quả của bạn không giống như hình ảnh bên dưới, đừng lo lắng, chỉ cần quay lại và kiểm tra code của bạn.

Credit: Hình ảnh trung tâm là từ thư viện của envato.


Còn IE thì sao?

Đối với IE, chúng ta có thể sử dụng CSSPIE trong một stylesheet riêng. Tôi sẽ không đi sâu vào nó vì ngay cả với bản sửa lỗi này, IE cũng không hiển thị đúng. Nếu bạn biết cách khắc phục tốt hơn, xin vui lòng cho tôi biết trong phần bình luận.

Bằng cách dùng behavior (hành vi), chúng ta có thể gọi file csspie php để cho IE biết rằng các kiểu CSS3 đủ ổn để sử dụng. Vì vậy, đây là cách nó sẽ hoạt động...

Một vài bản sửa lỗi IE khác giống thế này ...


Bạn đã hoàn thành tất cả!

Vì vậy, tôi hy vọng các bạn thích hướng dẫn này! Hãy nhớ rằng sự hỗ trợ CSS3 bị hạn chế và nếu bạn muốn khả năng tương thích trên tất cả các trình duyệt hiện có thì có nhiều cách khác để thực hiện như sử dụng hình ảnh và một số javascript. Nếu bạn thích một hướng dẫn về các kiểu menu khác, cách sử dụng phiên bản javascript hoặc chỉ cách sử dụng các hiệu ứng CSS3 tuyệt vời hơn, hãy cho tôi biết trong các bình luận và tôi sẽ giới thiệu cho bạn! Hãy để lại bình luận của bạn và câu hỏi bên dưới.

Hãy kiên nhẫn và tiếp tục học tập và trước khi bạn biết bạn sẽ là một bậc thầy trong mọi điều bạn làm!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.