Xây dựng Thanh điều hướng Top Bar Off-Canvas bằng Foundation 5

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

Trong một bài hướng dẫn trước đây, chúng ta đã học How to Customize the Foundation 4 Top Bar (tuỳ biến top bar của Foundation 4) bằng CSS. Kể từ đó ZURB đã phát hành Foundation 5; nhanh hơn, tinh gọn hơn và mạnh hơn người tiền nhiệm của nó. Điều đáng chú ý là ZURB đã mang trở lại tính năng Off Canvas, có thể được tìm thấy trong Foundation 3.

Hôm nay, chúng ta sẽ kết hợp tính năng off-canvas với thanh điều hướng top bar của chúng tôi. Kết quả sẽ cho một thanh điều hướng tùy chỉnh đẹp cho người dùng máy tính để bàn và menu off-canvas mượt mà cho người dùng máy tính bảng và thiết bị di động.

Lưu ý: Chức năng mà chúng tôi sử dụng ở đây không hiệu quả đối với IE8 trở xuống. Tôi đã bao gồm một bản sửa lỗi cho IE9 trong các tài nguyên được liệt kê ở cuối hướng dẫn.

Những yêu cầu

Để thực hiện theo hướng dẫn này, bạn sẽ cần có kinh nghiệm cấp trung sau đây:

Hiểu biết cơ bản về Foundation và hệ thống Grid
Kiến thức về làm việc SaaS và Compass Foundation

Bắt đầu

Thiết lập môi trường

Nếu bạn chưa thực hiện, hãy thiết lập Compass và Sass bằng tài liệu Foundation Sass nếu bạn cần hướng dẫn. Nếu bạn đã làm thực hiện rồi, thì đây là thiết lập nhanh để tạo một dự án Foundation 5 mới bằng cách sử dụng Command Prompt:

Chuyển đến thư mục ưa thích của bạn

cd c:/user/your-working-environment

Sử dụng lệnh này để tạo dự án của bạn

foundation new your-project

Di chuyển đến file dự án mới được tạo của bạn

cd your-project

Và sử dụng lệnh này để xem và biên dịch các file Sass của bạn.

compass watch

Nếu mọi thứ thành công, thư mục của bạn sẽ trông giống như sau:

Việc duy nhất còn lại là tạo style.scss của chúng ta. Thực hiện việc này bằng cách tạo một file mới trong thư mục scss và đặt tên là style.scss. Chúng ta sẽ cần file này sau đó. Nếu Compass đang chạy, thì style.scss của bạn đã được biên dịch thành tệp style.css trong thư mục stylesheets của bạn. Tuyệt, chúng tôi đã thiết lập mọi thứ, hãy bắt đầu code cấu trúc HTML tổng quát của chúng ta.

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

Bước 1: Markup tổng quát

Mở index.html của bạn và xóa tất cả nội dung giữa các thẻ body, ngoại trừ các đoạn mã (script) ngay trước </body> . Chúng ta cần chúng cho tất cả các chức năng của Foundation hoạt động. Thứ hai, hãy tiếp tục và thêm dòng code sau vào <head> , để đảm bảo rằng đã load về file CSS của chúng ta.

1	<link rel="stylesheet" href="stylesheets/style.css" />

Với thiết lập đó, hãy bổ sung một vài mục và cho trang của chúng tôi với một số nội dung giả. Chúng ta sẽ bắt đầu với một số việc cơ bản, bằng cách thêm header (tiêu đề), main (nội dung chính), service (dịch vụ), call to action (lời kêu gọi hành động), footer (chân trang) và copyright (bản quyền).

<!-- HEADER SECTION -->
 <header>
   <div class="row">
 	    <div class="small-12 medium-12 large-12 columns">
 			<div class="logo">
 				<h1>Foundation 5 Topbar / Offcanvas menu</h1>
 			</div> <!-- END DIV.LOGO -->
 		</div> <!-- END 12 COLUMNS -->
 	</div> <!-- END ROW -->
 </header> <!-- END HEADER -->
 
 <!-- MAIN SECTION -->
 <section class="main-section">
 	<!-- CONTENT SECTION -->
 	<section class="full-width content-section">
 		<div class="row">
 			<div class="small-12 medium-12 large-12 columns">
 				<h2>Moving aside for the Offcanvas people!</h2>
 				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, minus molestias dolores blanditiis esse? Quam, accusamus, quo, eum, ipsum voluptatibus aliquam perspiciatis qui porro est sit eligendi suscipit. Expedita, eligendi, laboriosam animi itaque accusantium repudiandae dicta ullam quia ipsum amet quam nesciunt non! Porro, fuga molestiae quaerat accusantium nesciunt omnis.</p>
 				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, minima, quidem repellendus facilis dignissimos laboriosam doloribus sequi tempora iusto facere maxime quasi est ex qui commodi nobis aliquid id eius magnam consectetur. Ut deserunt repellat asperiores dolores odio! Incidunt, esse, distinctio modi ratione facilis iusto tempora saepe nisi nostrum culpa velit eaque quos dolore repellat facere accusamus architecto iure similique numquam autem asperiores error cumque eum. Dolor, minima aspernatur autem eaque ipsa officiis rem! Suscipit, esse, quos. Quos, perferendis, iure nobis modi perspiciatis enim error nulla asperiores dignissimos harum. Dolor, non rem in nobis illum id hic laboriosam blanditiis aliquid!</p>
 			</div> <!-- END 12 COLUMNS -->
 		</div> <!-- END ROW -->
 	</section> <!-- END SECTION.CONTENT-SECTION -->
 
 	<!-- SERVICES SECTION -->
 	<section class="full-width services-section">
 		<div class="row">
 			<div class="small-12 medium-4 large-4 columns">
 				<h3>Service #1</h3>
 				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
 			</div>
 
 			<div class="small-12 medium-4 large-4 columns">
 				<h3>Service #3</h3>
 				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, nihil nemo tempore voluptatum veritatis corrupti id doloremque. Saepe, in sequi voluptatem impedit rem omnis aliquam?</p>
 			</div>
 
 			<div class="small-12 medium-4 large-4 columns">
 				<h3>Service #3</h3>
 				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate ducimus aut commodi eius! Sequi, magni labore ea iusto quibusdam autem repellendus ipsum dolorem quasi maxime!</p>
 			</div>
 
 		</div> <!-- END ROW -->
 	</section> <!-- END SECTION.FULL-WIDTH.SERVICES-SECTION -->
 
 	<!-- CALL 2 ACTION -->
 	<section class="full-width call-to-action">
 		<div class="row">
 			<div class="small-12 medium-12 large-12 columns">
 				<a href="#" class="button radius">Get in touch with us!</a>
 			</div>
 		</div>
 	</section>
 </section> <!-- END SECTION.MAIN-SECTION -->
 
 <!-- FOOTER SECTION -->
 <footer>
 	<div class="row">
     	<div class="small-12 medium-4 large-4 columns">
 		    <h4>Foundation</h4>
 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
 		</div>
 
 		<div class="small-12 medium-4 large-4 columns">
 			<h4>Foundation</h4>
 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
 		</div>
 
 		<div class="small-12 medium-4 large-4 columns">
 			<h4>Foundation</h4>
 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
 		</div>
 	</div> <!-- END ROW -->
 </footer> <!-- END FOOTER -->
 
 <!-- COPYRIGHT SECTION -->
 <section class="full-width copyright-section">
 	<div class="row">
 	    <div class="small-12 columns">
 			<p>&copy; 2014</p>
 		</div> <!-- END 12 COLUMNS -->
 	</div> <!-- END ROW -->
 </section> <!-- END SECTION.FULL-WIDTH COPYRIGHT-SECTION -->

Ở đây chúng tôi đã thêm vào một logo ở phần header, sau đó phần main được chia thành content (nội dung), ba phần service (dịch vụ) và call to action (kêu gọi hành động). Cuối cùng có phần footer (chân trang) với ba cột và phần copyright (bản quyền). Tiếp tục với phần markup, hãy đến top bar (thanh trên cùng)!

Bước 2: Markup cho top bar

Chúng ta sẽ đưa Top Bar của chúng ta vào trong một phần với tên class là navigation-section để tạo style. Chúng ta cũng sẽ cho phần này thêm một class khác: show-for-large-up. Điều này đảm bảo rằng Top Bar chỉ được hiển thị cho các thiết bị có chiều rộng tối thiểu nhất định và cao hơn. Đây là một trong nhiều Visibility Class mà Foundation cung cấp cho chúng tôi (bạn có thể đọc thêm về các tài liệu này trong tài liệu Foundation Component). Giờ là phần markup:

<!-- LARGE SCREEN TOP BAR MENU -->
 <section class="navigation-section show-for-large-up">
 	<div class="row">
 		<div class="large-12 columns">
 			
             <!-- TOP BAR INITIALIZATION -->
 			<nav class="top-bar" data-topbar>
 				<ul class="title-area">
 					<li class="name">
 						<h1></h1>
 					</li>
 				</ul> <!-- END UL.TITLE-AREA -->
 
 				<!-- TOP BAR MENU ELEMENTS -->
 				<section class="top-bar-section">
 					<ul class="left">
 						<li class="active"><a href="index.html">Home</a></li>
 						<li class="has-dropdown">
 							<a href="blog.html">Blog</a>
 							<ul class="dropdown">
 								<li><a href="blog.html">Archive</a></li>
 								<li><a href="post.html">Single</a></li>
 							</ul>
 						</li>
 						<li class="has-dropdown">
 							<a href="page.html">Page</a>
 							<ul class="dropdown">
 								<li><a href="page.html">Full-wdith</a></li>
 								<li><a href="sidebar-left.html">Left Sidebar</a></li>
 								<li><a href="sidebar-right.html">Right Sidebar</a></li>
 							</ul>
 						</li>
 						<li><a href="portfolio.html">Portfolio</a></li>
 						<li class="has-dropdown">
 							<a href="#">Dropdown</a>
 							<ul class="dropdown">
 								<li><a href="#">First link in dropdown</a></li>
 								<li><a href="#">Second link in dropdown</a></li>
 								<li><a href="#">Third link in dropdown</a></li>
 							</ul>
 						</li>
 					</ul>
 				</section> <!-- END SECTION.TOP-BAR-SECTION -->
 			</nav> <!-- END NAV.TOP-BAR -->
 
 		</div> <!-- END 12 COLUMNS -->
 	</div> <!-- END ROW -->
 </section> <!-- END SECTION.NAVIGATION-SECTION -->

Lưu ý: Nhớ kèm theo data-topbar trong nav của bạn. Bằng cách này, chúng tôi đảm bảo JavaScript của Top Bar hoạt động chính xác (ví dụ như menu dropdown).

Bước 3: Markup cho Off-Canvas

Menu Off-Canvas của chúng tôi sẽ bị ẩn ngoài ranh giới của viewport. Thời điểm chúng ta nhấn menu, Offcanvas sẽ trượt vào (từ bên trái trong trường hợp của chúng ta) và di chuyển nội dung của trang sang bên phải. Trong thiết lập của chúng ta, phần header và footer sẽ bị loại trừ. Chỉ có khu vực content (nội dung chính) sẽ được di chuyển sang một bên, phần header và footer được giữ lại.

Ngoài ra, khi cuộn xuống, header của chúng tôi (có thể chứa logo và nội dung khác) sẽ xuất hiện cố định ở đầu trang (Lưu ý: Trang phải chứa đủ nội dung để làm việc này, vì nếu không phần footer cũng sẽ trôi nổi trên menu Offcanvas của chúng tôi). Điều này có nghĩa là chúng ta phải "bao bọc" Off-canvas xung quanh phần nội dung chính. Sau phần điều hướng Top Bar và trước phần content (nội dung chính) của chúng ta, đưa vào HTML sau:

<!-- OFF CANVAS SECTIONS WRAPPING THE MAIN CONTENT -->
 <div class="off-canvas-wrap">
     <div class="inner-wrap">
 
 		<!-- OFF CANVAS MENU BAR -->
 		<nav class="tab-bar hide-for-large-up">
 
 			<section class="left-small">
 				<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
 			</section>
 
 			<section class="right tab-bar-section">
 				<h1 class="title">Menu</h1>
 			</section>
 
 		</nav> <!-- END NAV.TAB-BAR HIDE-FOR-LARGE-UP -->
 
 		<!-- OFF CANVAS MENU -->
 		<aside class="left-off-canvas-menu">
 			<ul class="off-canvas-list">
 				<li><label>Navigation</label></li>
 				<li><a href="index.html">Home</a></li>
 			</ul>
 			<ul class="off-canvas-list">
 				<li class="has-dropdown"><a href="blog.html">Blog</a>
 					<ul class="off-canvas-list">
 						<li><a href="blog.html">Archive</a></li>
 						<li><a href="post.html">Single</a></li>
 					</ul>
 				</li>
 			</ul>
 			<ul class="off-canvas-list">
 				<li class="has-dropdown"><a href="page.html">Page</a>
 					<ul class="off-canvas-list">
 						<li><a href="page.html">Full-width</a></li>
 						<li><a href="sidebar-left.html">Left Sidebar</a></li>
 						<li><a href="sidebar-right.html">Right Sidebar</a></li>
 					</ul>
 				</li>
 			</ul>
 			<ul class="off-canvas-list">
 				<li><a href="portfolio.html">Portfolio</a></li>
 			</ul>
 		</aside>

Hãy chia nhỏ nó ra. Chúng tôi đã tạo hai phần tử div; một với class off-canvas-wrap và một với class inner-wrap. Off-canvas-wrap sẽ ẩn nội dung của chúng ta cho đến khi nút menu được nhấn. Phần wrap (bao bọc) bên trong chứa nav menu bar (thanh menu điều hướng), menu off-canvas ở bên trái và main content (nội dung chính) của chúng tôi. Chúng tôi đã cung cấp cho nav một class hide-for-large-up, để đảm bảo nó chỉ hiển thị cho các thiết bị vừa và nhỏ. Bằng cách bổ sung thêm class left-off-canvas-menu bên cạnh, để đảm bảo rằng menu off-canvas của chúng ta xuất hiện ở bên trái màn hình. Các mục menu trong off-canvas-menu của chúng ta tương tự như top bar. Đối với off-canvas, chúng tôi sử dụng một unordered list (danh sách không có thứ tự) với class off-canvas-list thực hiện điều kỳ diệu này.

Tất cả những gì còn lại cần làm là cung cấp cho người dùng một phương pháp để tắt menu Offcanvas. Sau đó chúng ta tắt các thẻ div off-canvas-wrap và inner-wrap. Bổ sung nó ngay sau khi đóng phần main section (nội dung chính).

    <!-- CLOSE THE OFF-CANVAS MENU -->
     <a class="exit-off-canvas"></a>
 
 	</div>
 </div> <!-- END OFF CANVAS -->

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

Hãy mở trình duyệt của chúng tôi và định vị file index.html mà chúng ta vừa chỉnh sửa. Kết quả sẽ trông giống như những ảnh chụp màn hình bên dưới (hãy thử thay đổi kích thước trình duyệt của bạn!)

Cài đặt Sass

Được rồi, chúng tôi có một top bar đầy đủ chức năng cho người dùng máy tính để bàn và menu off-canvas đẹp, mượt mà cho người dùng thiết bị nhỏ hơn như máy tính bảng và điện thoại. Tuy nhiên, trang của chúng ta trông không giống như một website thực sự, vì vậy hãy tiếp tục và tô điểm thêm một ít.

Bước 1: Tạo style tổng quát

Đầu tiên, chúng tôi sẽ cung cấp cho các phần chung của chúng tôi (header, navigation, main, footer và copyright) một số màu sắc. Chúng ta cũng sẽ cho phần body một màu nền tinh tế và tạo một class full-width để có nó chiều rộng đạt 100%. Trong HTML, chúng tôi đã thêm class full-width vào các phần khác nhau, để đảm bảo chúng trải dài đến các cạnh biên của trình duyệt. Hãy xem Sass sau đây:

body {
     background-color: #f1f1f1;
 }
 
 .full-wdith {
 	min-width: 100%;
 }
 
 header {
 	background: url('../images/stary-bg.png') #074e68;
 	min-height: 175px;
 	h1 {
 		color: #fff;
 		padding-top: 50px;
 	}
 }
 
 .navigation-section {
 	background-color: #333;
 	.top-bar {
 		li {
 			text-transform: uppercase;
 		}
 	}
 }
 
 .main-section {
 	padding: 30px 0 25px 0;
 }
 
 footer {
 	background-color: #074e68;
 	padding: 50px 0 40px 0;
 	h4, p {
 		color: #fff;
 	}
 }
 
 .copyright-section {
 	background-color: #333;
 	color: #fff;
 	padding: 25px 0 0 0;
 }

Lưu ý: Để bổ sung Starry BG, hãy tải xuống file nguồn!

Chúng tôi đã cho thiết kế nhiều khoảng trống hơn bằng cách thêm padding và tạo ra một thiết kế full-width bằng cách cho tất cả các phần một màu nền và chiều rộng tối thiểu 100%. Chúng tôi cũng chuyển các mục menu thành chữ in hoa với text-transform: uppercase.

Bước 2: Tạo style cho top bar với _settings.scss

Để tạo kiểu cho top bar của chúng ta, hãy xem kỹ file _settings.scss. Tùy thuộc vào code editor mà bạn đang sử dụng, hãy sử dụng tùy chọn Find (tìm kiếm) và nhập "Topbar". Ở đây bạn có thể tìm thấy tất cả các thiết lập để thay đổi top bar tiêu chuẩn. Đối với bài hướng dẫn này, chúng ta sẽ sử dụng hai tùy chọn khác nhau; chọn lựa đầu tiên điều chỉnh top bar cao hơn một chút và chọn lựa còn lại để tăng kích thước font chữ một chút. Gỡ bỏ phần ghi chú và thay đổi hai cài đặt sau đây:

1	$topbar-height: 65px;
2	$topbar-link-font-size: rem-calc(15);

Bước 3: Tạo kiểu cho Off-Canvas với _setting.scss

Chúng ta cũng sẽ sử dụng file cài đặt để điều chỉnh menu off-canvas. Markup tiêu chuẩn cho off-canvas khá ổn, nhưng hãy bảo đảm rằng phần nav có chiều cao tương đương với phần nav của top bar. Trong điều kiện đó, chúng ta sẽ phải di chuyển biểu tượng hamburger một chút, do đó, nó nằm ở giữa tính từ trên xuống. Trong file cài đặt, tìm và nhập vào "Off-canvas". Bỏ ghi chú và thay đổi hai cài đặt sau đây:

1	$tabbar-height: rem-calc(65);
2	$tabbar-hamburger-icon-top: rem-calc(16);

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

Lưu file lại, hãy để compass biên dịch các file của bạn và refresh trình duyệt của bạn. Bây giờ trang của chúng ta trông bắt mắt hơn và tất cả đều được hỗ trợ với một top bar tuyệt đẹp và cả off-canvas! Kết quả của bạn sẽ trông giống thế này:

Tổng kết

Chúng tôi đã tạo một trang đẹp, tự thích ứng bằng cách sử dụng top bar và off-canvas của Foundation, thêm một chút tạo kiểu Sass của riêng chúng tôi để mang đến cho nó vẻ bắt mắt hơn và tinh chỉnh trang bằng cách sử dụng file _settings.scss.

Rõ ràng, chúng ta có thể làm nhiều hơn với _settings.scss ngoài phần tôi chỉ minh hoạ. Hãy tiếp tục và thực hiện các cài đặt để xem bạn có thể tùy chỉnh các phần tử Foundation dễ dàng như thế nào trong trang web của mình hoặc dùng thử bản demo này để tùy chỉnh thêm menu top bar/off-canvas của bạn. Chúc vui vẻ!