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

Cách tùy chỉnh top bar của Foundation 4

by
Length:MediumLanguages:
This post is part of a series called Foundation for Beginners.
Foundation for Beginners: The Top Bar
Foundation for Beginners: Buttons and Dropdowns

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

Các tính năng Foundation 4 của Zurb có một top bar tuyệt vời và gần như trở thành biểu tượng của việc xây dựng một trang Foundation. Hôm nay chúng ta sẽ xem cách bạn có thể triển khai nó theo một cách khác, đặt nó ở nơi khác trên trang, cung cấp cho bạn một menu điều hướng theo chiều ngang tùy chỉnh và responsive (đáp ứng).


Hãy bắt đầu

Trước tiên, chúng tôi sẽ cần bản Foundation mới nhất. Giải nén và đưa tất cả các file trong thư mục công việc hoặc test của bạn. Chúng tôi sẽ chỉ sử dụng index.html, tạo style.css của riêng chúng tôi trong đó sẽ ghi đè các class khác nhau của Top Bar để thực hiện điều hướng tùy chỉnh của chúng tôi.

foundation-download

Ngoài ra, tải về ảnh nền được cung cấp ở trên. Chúng tôi sẽ sử dụng cái này cho menu, vì vậy hãy đặt nó trong thư mục "img" của bạn. Bạn đã có tất cả mọi thứ? Sau đó kích hoạt editor yêu thích của bạn và hãy bắt đầu!


Thiết lập cấu trúc HTML

Bước 1: Markup cơ bản

File index trong bản tải xuống của bạn có sẵn HTML. Bạn có thể giữ nguyên mọi thứ khi bạn thấy ổn trong thẻ header và bạn có thể đặt các liên kết script (trước thẻ đóng của body) ở vị trí của chúng. Chúng tôi cần tất cả những điều đó để đảm bảo Grid và Top Bar thực sự hoạt động.

Bạn có thể xóa phần còn lại của nội dung có sẵn. Chúng tôi sẽ có thiết kế full width (rộng toàn màn hình) ở đây, không có gì phức tạp, chỉ là điều gì đó để hiểu rõ hơn về những gì chúng tôi đang làm.

Được rồi, hãy thiết lập khu vực header, navigation, content và footer và đưa vào một số nội dung giả cho cho mục đích lấp đầy. Chúng tôi sẽ cung cấp cho mỗi khu vực một class "full-width", sau đó ở mỗi khu vực chúng tôi sẽ đặt một div có class="row", một div với class="Large-12" và class = "columns". Điều này thiết lập một cấu trúc lưới cơ sở.

Lưu ý: Để biết thêm thông tin về cách thức hoạt động của Grid, hãy xem bài Foundation for Beginners: The Grid System.

Bước 2: Markup cho top bar

Trước khi tạo style, chúng tôi sẽ bố trí cấu trúc HTML thiết yếu để làm cho Foundation Top Bar hoạt động chính xác. Chúng ta cần 5 yếu tố cơ bản để bộ máy hoạt động:

  • nav với class="top-bar"
  • ul với class="title-area"
  • li với class="toggle-topbar" để mở rộng menu cho bố cục trên di động
  • section có class="top-bar-section"
  • ul với class="left" và ul với class="right"

Bây giờ, hãy thiết lập những cơ sở này và triển khai 5 yếu tố.

Lưu ý: Trong ví dụ hướng dẫn này, chúng tôi sẽ muốn tạo một menu điều hướng tùy chỉnh, do đó loại bỏ title (tiêu đề) trong menu nó đó (thường ở dạng logo, text hoặc image). Để làm điều này, chúng ta chỉ cần gán cho li với class="name" và ul với class ="title-area".

Ngoài ra, hãy bổ sung một số thành phần menu và menu dropdown trong khi chúng tôi đang ở đó. Để bao gồm một danh sách dropdown, hãy bổ sung class "has-dropdown" vào phần tử li mà bạn muốn chứa danh sách dropdown, sau đó đưa vào một ul mới với một class "dropdown". Để chỉ ra trang hiện đang hoạt động, chúng tôi có thể cung cấp cho mục menu hiện tại của chúng tôi một class "hoạt động" trên phần tử li. Chúng ta có thể để trống class ul = "phải". Thông thường bạn sẽ sử dụng khu vực này để bổ sung thêm một button hoặc một form nhập thông tin tìm kiếm. Để biết thêm thông tin về các chi tiết cụ thể của markup cho top bar, hãy xem Foundation for Beginners: The Top Bar.

Nhìn vào HTML sau đây, các bình luận sẽ giải thích cách nó được xây dựng.

Bước 3: Kết quả hiện giờ

Nhìn vào kết quả trong trình duyệt của bạn. Bây giờ chúng tôi thiết lập framework Foundation cơ bản bằng top bar để tạo menu theo chiều ngang. Để đặt nó ở một nơi khác chứ không phải trên cùng của trình duyệt, chỉ cần đặt nav class="top-bar" trong một div của row và column.

Khi bạn thay đổi kích thước trình duyệt, bạn có thể thấy menu thay đổi tại break point được xác định trước.

Bước tiếp theo là mang đến cho nó một số style tùy biến. Chúng tôi sẽ tập trung vào cách chúng tôi có thể tạo style cho Top Bar và class nào được áp dụng cho nó.

foundation-4-custom-top-bar-html-layout

Thiết lập CSS

Bước 1: Tạo style cơ sở

Nếu bạn chưa có, hãy tạo một file CSS mới, đặt tên là style.css và đặt nó vào thư mục css của bản tải xuống Foundation của bạn. Đừng quên đưa nó vào thẻ tiêu đề trong tệp chỉ mục của bạn, tham chiếu nó bên dưới Foundation.css như vậy:

Nếu bạn không thiết lập cho nó foundation.css; nó sẽ không ghi đè lên các class của Top Bar.

Được rồi, trước tiên hãy lấy một số style cơ bản trên khu vực header, navigation, content và footer. Đối với khu vực navigation, chúng tôi sẽ sử dụng hình nền mà bạn đã tải về trước đó. Thiết kế phổ dụng không phải là vấn đề lớn, hãy xem CSS dưới đây. Chúng tôi bổ sung một class full-width cho mỗi khu vực để đảm bảo nó lấp đầy chiều dài của trình duyệt.

Bước 2: Các style của top bar

Nếu bây giờ bạn nhìn vào kết quả, menu vẫn có vẻ hơi sai. Đó là bởi vì nó vẫn dùng CSS mặc định. Hãy sửa nó đi!

Có một vài class CSS chúng ta cần chỉ ra để nhận được kết quả mong muốn. Trước tiên, chúng tôi sẽ xóa một số nền đen của class .top-bar và danh sách phần và thay đổi height và line-height thành 58px (chiều cao của vùng điều hướng). Hãy xem các bình luận để giải thích thêm.

Chúng tôi đã xóa nền đen mặc định khỏi nav với class="top-bar", danh sách section và các liên kết anchor ở menu. Chúng tôi điều chỉnh height, line-height và padding (vùng đệm) và chuyển đổi nội dung thành uppercase (chữ hoa) cho tất cả phù hợp với thiết kế tùy chỉnh của chúng tôi.

Nếu bạn làm mới trình duyệt của mình, bạn sẽ thấy rằng nó bắt đầu hình thành. Hãy tiếp tục với danh sách dropdown, các mục menu, trạng thái active và hover. Hãy xem CSS bên dưới và lần nữa, đọc nội dung bình luận giải thích:

Chúng tôi đã thực hiện một số thay đổi cho menu ở đây. Trước hết, chúng tôi đã thay đổi nền đen mặc định của mục menu đang hoạt động thành một màu gradient CSS. Sau đó, chúng tôi đã cho các mục menu không hoạt động để định hình trạng thái hover. Để làm cho các mục menu không hoạt động trở nên rõ ràng hơn, chúng tôi thay đổi màu văn bản thành màu xám đậm. Các thay đổi được thực hiện trên .top-bar-section li: hover a sẽ duy trì trạng thái của menu thả xuống được di chuyển chuột của bạn di chuyển qua các mục dropdown. Để hoàn thành CSS, chúng tôi đã cung cấp container của ul dropdown một màu nền và định vị lại vị trí mặc định của mũi tên dropdown, vì các điều chỉnh cho padding của chúng tôi cho top-bar-section.

Bước 3: Kết quả cho đến nay

Làm mới trình duyệt của bạn và hãy nhìn qua kết quả cho đến giờ. Chúng tôi chưa hoàn thành chúng ta vẫn cần đảm bảo tất cả đều trông ổn khi thay đổi kích thước màn hình trình duyệt của chúng ta (hoặc, đối với vấn đề đó, khi chúng ta nhìn vào nó trên một thiết bị nhỏ hơn). Để thực hiện điều đó, chúng tôi sẽ thêm một số Media Queries vào file CSS của chúng tôi.


Thiết lập Media Queries

Bước 1: Media Queries

Có vài điều mà chúng ta cần điều chỉnh để khiến menu hoạt động với thiết kế tùy chỉnh của chúng tôi khi kích thước màn hình bị giảm đi. Điều này chủ yếu liên quan đến việc thêm padding (vùng đệm), line-height (chiều cao dòng), màu text và màu nền. Hãy xem CSS dưới đây và xem các bình luận để có được lời giải thích cho từng phần.

Bước 2: Tận hưởng kết quả của bạn

Lưu file lại, tải lại trình duyệt của bạn và thử qua với kích thước trình duyệt. Như bạn có thể thấy menu phù hợp với thiết kế của chúng tôi.

foundation-4-custom-top-bar-final-product-responsive

Tổng kết

Vậy đó là kết thúc cho hướng dẫn của chúng tôi về cách tạo một menu responsive tùy chỉnh bằng Top Bar từ framework Foundation 4. Và hãy nhớ rằng, menu không nhất thiết phải ở đầu trang. Chỉ cần ba bọc nó trong div riêng cho row và column của nó, sau đó thực tế bạn có thể đặt nó bất cứ nơi nào bạn muốn!

Foundation là một công cụ tuyệt vời để nhanh chóng phát triển các thiết kế responsive và khi bạn biết cách mình thực hiện thì bạn có thể định hình nó theo bất kỳ cách nào bạn muốn. Chúc vui vẻ!

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.