Cách tùy chỉnh top bar của Foundation 4

() translation by (you can also view the original English article)

Các tính năng Foundation 4 của Zurb có một top bar tuyệt vời và gần như trở thành biểu tượng của việc xây dựng một trang Foundation. Hôm nay chúng ta sẽ xem cách bạn có thể triển khai nó theo một cách khác, đặt nó ở nơi khác trên trang, cung cấp cho bạn một menu điều hướng theo chiều ngang tùy chỉnh và responsive (đáp ứng).

Hãy bắt đầu

Trước tiên, chúng tôi sẽ cần bản Foundation mới nhất. Giải nén và đưa tất cả các file trong thư mục công việc hoặc test của bạn. Chúng tôi sẽ chỉ sử dụng index.html, tạo style.css của riêng chúng tôi trong đó sẽ ghi đè các class khác nhau của Top Bar để thực hiện điều hướng tùy chỉnh của chúng tôi.

Ngoài ra, tải về ảnh nền được cung cấp ở trên. Chúng tôi sẽ sử dụng cái này cho menu, vì vậy hãy đặt nó trong thư mục "img" của bạn. Bạn đã có tất cả mọi thứ? Sau đó kích hoạt editor yêu thích của bạn và hãy bắt đầu!

Thiết lập cấu trúc HTML

Bước 1: Markup cơ bản

File index trong bản tải xuống của bạn có sẵn HTML. Bạn có thể giữ nguyên mọi thứ khi bạn thấy ổn trong thẻ header và bạn có thể đặt các liên kết script (trước thẻ đóng của body) ở vị trí của chúng. Chúng tôi cần tất cả những điều đó để đảm bảo Grid và Top Bar thực sự hoạt động.

Bạn có thể xóa phần còn lại của nội dung có sẵn. Chúng tôi sẽ có thiết kế full width (rộng toàn màn hình) ở đây, không có gì phức tạp, chỉ là điều gì đó để hiểu rõ hơn về những gì chúng tôi đang làm.

Được rồi, hãy thiết lập khu vực header, navigation, content và footer và đưa vào một số nội dung giả cho cho mục đích lấp đầy. Chúng tôi sẽ cung cấp cho mỗi khu vực một class "full-width", sau đó ở mỗi khu vực chúng tôi sẽ đặt một div có class="row", một div với class="Large-12" và class = "columns". Điều này thiết lập một cấu trúc lưới cơ sở.

Lưu ý: Để biết thêm thông tin về cách thức hoạt động của Grid, hãy xem bài Foundation for Beginners: The Grid System.


<!-- HEADER AREA -->
<header class="full-width header-area">
  <div class="row">
		<div class="large-12 columns">
			<h2>Foundation-4 Custom Top Bar</h2>
		</div>
	</div>
</header> 

<!-- NAVIGATION AREA -->
<div class="full-width navigation-area">
	<div class="row">
		<div class="large-12 columns">
							
			<nav class="top-bar"></nav>
		</div>
	</div>
</div>

<!-- CONTENT AREA -->
<div class="full-width content-area">
	<div class="row">
		<div class="large-12 columns">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, asperiores, voluptas, veniam commodi impedit tenetur dolores cumque facere explicabo esse quaerat veritatis laboriosam eius modi amet maxime non officia nemo? Iste, quisquam, voluptatum, dolor nam reiciendis unde aliquam numquam necessitatibus odio et perspiciatis facere nihil inventore ullam aspernatur corporis veritatis quia dolorum? Sed, hic, eos quis quibusdam eum aut optio repudiandae at! Eligendi, neque ratione alias enim quae magnam dolores esse pariatur earum laborum reiciendis nobis sunt sequi sapiente ducimus iure ipsam. Sapiente, minima, rerum, facere quos saepe pariatur magni dolorem cum amet nemo quis laborum ipsa dignissimos ducimus inventore modi rem cumque quibusdam quam asperiores! Optio, nobis suscipit molestias voluptas veritatis aspernatur accusamus excepturi rem quaerat impedit animi voluptate at facilis aliquid cum fugit labore omnis provident recusandae autem. Doloribus, mollitia quos officiis quas sapiente nam dolor praesentium maxime cupiditate illum? Rem, esse, nulla vitae adipisci sequi deleniti quasi!</p>
		</div>
	</div>
</div>

<!-- FOOTER AREA -->
<div class="full-width footer-area">
	<div class="row">
		<div class="large-12 columns">
			&copy; 2013
		</div>
	</div>
</div>

Bước 2: Markup cho top bar

Trước khi tạo style, chúng tôi sẽ bố trí cấu trúc HTML thiết yếu để làm cho Foundation Top Bar hoạt động chính xác. Chúng ta cần 5 yếu tố cơ bản để bộ máy hoạt động:

nav với class="top-bar"
ul với class="title-area"
li với class="toggle-topbar" để mở rộng menu cho bố cục trên di động
section có class="top-bar-section"
ul với class="left" và ul với class="right"

Bây giờ, hãy thiết lập những cơ sở này và triển khai 5 yếu tố.

Lưu ý: Trong ví dụ hướng dẫn này, chúng tôi sẽ muốn tạo một menu điều hướng tùy chỉnh, do đó loại bỏ title (tiêu đề) trong menu nó đó (thường ở dạng logo, text hoặc image). Để làm điều này, chúng ta chỉ cần gán cho li với class="name" và ul với class ="title-area".

Ngoài ra, hãy bổ sung một số thành phần menu và menu dropdown trong khi chúng tôi đang ở đó. Để bao gồm một danh sách dropdown, hãy bổ sung class "has-dropdown" vào phần tử li mà bạn muốn chứa danh sách dropdown, sau đó đưa vào một ul mới với một class "dropdown". Để chỉ ra trang hiện đang hoạt động, chúng tôi có thể cung cấp cho mục menu hiện tại của chúng tôi một class "hoạt động" trên phần tử li. Chúng ta có thể để trống class ul = "phải". Thông thường bạn sẽ sử dụng khu vực này để bổ sung thêm một button hoặc một form nhập thông tin tìm kiếm. Để biết thêm thông tin về các chi tiết cụ thể của markup cho top bar, hãy xem Foundation for Beginners: The Top Bar.

Nhìn vào HTML sau đây, các bình luận sẽ giải thích cách nó được xây dựng.


<!-- Nav Wrap --> 
<nav class="top-bar">
	<ul class="title-area">
	<!-- Title Area -->
		<li class="name"></li>
		<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
		<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
	</ul>

	<!-- The Section wrap -->
	<section class="top-bar-section">
	
		<!-- Left Nav Section -->
		<ul class="left">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">About us</a></li>
			<li><a href="#">Our products</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Prices</a></li>
			<li class="has-dropdown">
				<a href="#">Features</a>
				<ul class="dropdown">
					<li><a href="#">Modalboxes</a></li>
					<li><a href="#">Submenu's and navigation</a></li>
					<li><a href="#">Price tables</a></li>
					<li><a href="#">Buttons</a></li>
					<li><a href="#">Button groups</a></li>
					<li><a href="#">Labels, Keystrokes and Tooltips</a></li>
					<li><a href="#">Alert boxes</a></li>
					<li><a href="#">Columns</a></li>
				</ul>
			</li>
			<li><a href="#">Contact</a></li>
		</ul>

		<!-- Right Nav Section -->
		<ul class="right"></ul>

	</section>
</nav>

Bước 3: Kết quả hiện giờ

Nhìn vào kết quả trong trình duyệt của bạn. Bây giờ chúng tôi thiết lập framework Foundation cơ bản bằng top bar để tạo menu theo chiều ngang. Để đặt nó ở một nơi khác chứ không phải trên cùng của trình duyệt, chỉ cần đặt nav class="top-bar" trong một div của row và column.

Khi bạn thay đổi kích thước trình duyệt, bạn có thể thấy menu thay đổi tại break point được xác định trước.

Bước tiếp theo là mang đến cho nó một số style tùy biến. Chúng tôi sẽ tập trung vào cách chúng tôi có thể tạo style cho Top Bar và class nào được áp dụng cho nó.

Thiết lập CSS

Bước 1: Tạo style cơ sở

Nếu bạn chưa có, hãy tạo một file CSS mới, đặt tên là style.css và đặt nó vào thư mục css của bản tải xuống Foundation của bạn. Đừng quên đưa nó vào thẻ tiêu đề trong tệp chỉ mục của bạn, tham chiếu nó bên dưới Foundation.css như vậy:


<head>
    <meta charset="utf-8">
 	<meta name="viewport" content="width=device-width">
 	<title>Foundation 4</title>

 	<link rel="stylesheet" href="css/foundation.css">
 	<link rel="stylesheet" href="css/style.css">
 
 	<script src="js/vendor/custom.modernizr.js"></script>
</head>

Nếu bạn không thiết lập cho nó foundation.css; nó sẽ không ghi đè lên các class của Top Bar.

Được rồi, trước tiên hãy lấy một số style cơ bản trên khu vực header, navigation, content và footer. Đối với khu vực navigation, chúng tôi sẽ sử dụng hình nền mà bạn đã tải về trước đó. Thiết kế phổ dụng không phải là vấn đề lớn, hãy xem CSS dưới đây. Chúng tôi bổ sung một class full-width cho mỗi khu vực để đảm bảo nó lấp đầy chiều dài của trình duyệt.


body {
	background-color: #ccc;
}

/** Set the backgrounds for the different sections **/
.header-area {
    background-color: #2d465c;
    min-height: 160px;
}

.navigation-area {
	background-image: url('../img/navigation-container.jpg');
	background-repeat: repeat-x;
}

.content-area {
	padding: 50px 0 70px 0;
}

.footer-area {
    background-color: #1f1f1f;	
    color: #fff;
	min-height: 50px;
	padding: 20px 0 0 0;
}

.full-width {
	min-width:100%;
	position: relative;
}

h2 {
	color: #fff;
	font-weight: normal;
	margin-top: 50px;
}

Bước 2: Các style của top bar

Nếu bây giờ bạn nhìn vào kết quả, menu vẫn có vẻ hơi sai. Đó là bởi vì nó vẫn dùng CSS mặc định. Hãy sửa nó đi!

Có một vài class CSS chúng ta cần chỉ ra để nhận được kết quả mong muốn. Trước tiên, chúng tôi sẽ xóa một số nền đen của class .top-bar và danh sách phần và thay đổi height và line-height thành 58px (chiều cao của vùng điều hướng). Hãy xem các bình luận để giải thích thêm.


/** Changes background color, height and margin of the border **/
.top-bar {
    background: none;
    height: 58px;
    line-height: 58px;
    margin-bottom: 0;
}

/** Removes black background on menu bar **/
.top-bar-section ul {
    background: none;
    text-transform: uppercase;
}

/** Removes black background on menu item **/
.top-bar-section li a:not(.button) {
    background: none;
    line-height: 58px;
    padding: 0 27px;
}

Chúng tôi đã xóa nền đen mặc định khỏi nav với class="top-bar", danh sách section và các liên kết anchor ở menu. Chúng tôi điều chỉnh height, line-height và padding (vùng đệm) và chuyển đổi nội dung thành uppercase (chữ hoa) cho tất cả phù hợp với thiết kế tùy chỉnh của chúng tôi.

Nếu bạn làm mới trình duyệt của mình, bạn sẽ thấy rằng nó bắt đầu hình thành. Hãy tiếp tục với danh sách dropdown, các mục menu, trạng thái active và hover. Hãy xem CSS bên dưới và lần nữa, đọc nội dung bình luận giải thích:


/** Changes the active menu item from default black to a gradient **/
.top-bar-section ul li.active > a {
    background:  rgb(0, 0, 0);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0 0 transparent;
    color: #fff;
}

/** Changes the hover state of non active menu items **/
.top-bar-section li:hover a {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0 0 transparent;
    color: #fff;
}

/** Changes non active menu items text color to black **/
.top-bar-section ul li > a {
    color: #2d2d2d;
}

/** Changes the hover state of dropdown menu items **/
.top-bar-section ul.dropdown li a:hover:not(.button) {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
}

/** IMPORTANT fill for the ul dropdown container **/
.top-bar-section ul.dropdown {
    background: #333;
    color: #fff;
}

/** This fixes the position and the color of the dropdown arrow **/
.top-bar-section .has-dropdown > a:after {
    border-color: rgba(0, 0, 0, 1) transparent transparent;
    margin-top: 2.5px;
}

Chúng tôi đã thực hiện một số thay đổi cho menu ở đây. Trước hết, chúng tôi đã thay đổi nền đen mặc định của mục menu đang hoạt động thành một màu gradient CSS. Sau đó, chúng tôi đã cho các mục menu không hoạt động để định hình trạng thái hover. Để làm cho các mục menu không hoạt động trở nên rõ ràng hơn, chúng tôi thay đổi màu văn bản thành màu xám đậm. Các thay đổi được thực hiện trên .top-bar-section li: hover a sẽ duy trì trạng thái của menu thả xuống được di chuyển chuột của bạn di chuyển qua các mục dropdown. Để hoàn thành CSS, chúng tôi đã cung cấp container của ul dropdown một màu nền và định vị lại vị trí mặc định của mũi tên dropdown, vì các điều chỉnh cho padding của chúng tôi cho top-bar-section.

Bước 3: Kết quả cho đến nay

Làm mới trình duyệt của bạn và hãy nhìn qua kết quả cho đến giờ. Chúng tôi chưa hoàn thành chúng ta vẫn cần đảm bảo tất cả đều trông ổn khi thay đổi kích thước màn hình trình duyệt của chúng ta (hoặc, đối với vấn đề đó, khi chúng ta nhìn vào nó trên một thiết bị nhỏ hơn). Để thực hiện điều đó, chúng tôi sẽ thêm một số Media Queries vào file CSS của chúng tôi.

Thiết lập Media Queries

Bước 1: Media Queries

Có vài điều mà chúng ta cần điều chỉnh để khiến menu hoạt động với thiết kế tùy chỉnh của chúng tôi khi kích thước màn hình bị giảm đi. Điều này chủ yếu liên quan đến việc thêm padding (vùng đệm), line-height (chiều cao dòng), màu text và màu nền. Hãy xem CSS dưới đây và xem các bình luận để có được lời giải thích cho từng phần.


@media only screen and (max-width: 942px) {

    /* Makes the responsive menu fit in the navigation container and change its background to black */
    .top-bar ul {
        background-color: rgba(0, 0, 0, 0.5);
        padding-bottom: 13px;
    }

    /* Change non active menu item color to black */
    .top-bar-section ul li > a {
        color: #fff;
    }

    /* Gives the dropdown ul a black fill */
    .top-bar-section ul {
        background: #000;
    }

    /* Give the BACK button after going in a submenu the appropriate filling */
    .top-bar-section .dropdown li.title h5 a {
        line-height: 57px;
    }

    /* This fixes the position and the color of the dropdown arrow */
    .top-bar-section .has-dropdown > a:after {
        border-color: rgba(255, 255, 255, 1) transparent transparent;
        margin-top: 2.5px;
    }

} /* end media query */

Bước 2: Tận hưởng kết quả của bạn

Lưu file lại, tải lại trình duyệt của bạn và thử qua với kích thước trình duyệt. Như bạn có thể thấy menu phù hợp với thiết kế của chúng tôi.

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

Tổng kết

Vậy đó là kết thúc cho hướng dẫn của chúng tôi về cách tạo một menu responsive tùy chỉnh bằng Top Bar từ framework Foundation 4. Và hãy nhớ rằng, menu không nhất thiết phải ở đầu trang. Chỉ cần ba bọc nó trong div riêng cho row và column của nó, sau đó thực tế bạn có thể đặt nó bất cứ nơi nào bạn muốn!

Foundation là một công cụ tuyệt vời để nhanh chóng phát triển các thiết kế responsive và khi bạn biết cách mình thực hiện thì bạn có thể định hình nó theo bất kỳ cách nào bạn muốn. Chúc vui vẻ!