Người Viết : ViKiMi Editor

Hiện nay, có rất nhiều Framework hoặc những CMS hỗ trợ việc kéo thả để tạo ra các Menu đẹp như mong muốn. Tuy nhiên, không phải Menu nào cũng đáp ứng được yêu cầu tối ưu với các lập trình viên hoặc những khách hàng. Vì vậy, nếu có thể tự tay thiết kế và tuỳ chỉnh các Menu luôn là điều mong muốn với bất kỳ ai.
Việc có thể làm chủ hay chủ động trong việc hoàn thiện một Menu, Là điều tuyệt vời nhất. Tất nhiên, việc Menu của website có thể hiển thị tốt trên tất cả các trình duyệt, tất cả thiết bị người dùng còn tuyệt vời hơn nữa. Nếu không còn phải phụ thuộc vào các nhà sản xuất Framework, các nhà sản xuất CMS, hoặc tối thiểu là không còn phụ thuộc những gì mà các nhà phát triển themes cung cấp.
Tất cả những gì bạn được cung cấp có thể là quá nhiều, hay đôi khi bạn còn thấy nó thật sự han chế và phát ngán cho những gì bạn thây.
Khi đó, bạn sẽ thấy Bootstrap sẽ cung cấp cho bạn một sự tin tưởng với một Menu hoàn chỉnh không thiếu các chức năng cơ bản. Menu mà Bootstrap cho phép bạn tự tạo ra là quá tốt và chuẩn cho website có thể hoạt động trong một thời gian bạn yêu cầu nhất định.
A. TẠO MENU CƠ BẢN VỚI BOOTSTRAP
Ban đầu, chúng ta chỉ tạo ra một Menu cho phép hiển thị trên giao diện website. Menu này không có chức năng thu gọn và chỉ có thể co giãn độ rộng width các thành phần của Menu một cách phù hợp trên giao diện website (/Tuỳ theo thiết bị hiển thị của bạn là loại gì Mobile hay Desktop …)
Đây là Menu mặc định của Bootstrap :
Để tạo được Menu mặc định, chúng ta cần phải sử dụng:
+ Một thẻ HTML <Nav> để tạo Menu với Class .navbar & .navbar-default
+ Một thẻ HTML <Div> để tạo Brand của Website, Thẻ <Div> sẽ bao gồm một thẻ <a> . Thẻ <Div> có Class .navbar-header, thẻ <a> có Class .navbar-brand
+ Nhóm Danh Sách <UL> với Class .nav & .navbar-nav
Đoạn Code HTML & Bootstrap 1 :
Tại đây, chúng ta đặt Menu vào khu vực trung tâm / Center của màn hình. Bằng cách dùng thẻ <DIV> có Class .container để chứa nội dung Menu.
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">WEBSITE BUÔN BÁN</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">TRANG CHỦ</a></li>
<li><a href="#">HÀNG ĐIỆN TỬ</a></li>
<li><a href="#">ĐỒ MAY MẶC</a></li>
<li><a href="#">MỸ PHẨM</a></li>
<li><a href="#">TRANG SỨC</a></li>
<li><a href="#">PHỤ KIỆN</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3>Đây là Menu Mặc định của Bootstrap với Class .navbar-default</h3>
<p>Tại đây, Sử Dụng Menu Header Được Đặt Tại Vị Trí Top Của Website. Đây Là Top Menu!</p>
</div>

Đoạn Code HTML & Bootstrap 2 :
Tại đây, chúng ta đặt Menu tràn toàn bộ độ rộng của màn hình. Bằng cách dùng thẻ <DIV> có Class .container-fluid để chứa nội dung Menu.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Đoạn code có nội dung giống bên trên -->
</div>
</nav>
<div class="container">
<h3>Đây là Menu Mặc định của Bootstrap với Class .navbar-default</h3>
<p>Tại đây, Sử Dụng Menu Header Được Đặt Tại Vị Trí Top Của Website. Đây Là Top Menu!</p>
</div>

B. TẠO MENU THANH ĐIỀU HƯỚNG THU GỌN VỚI BOOTSTRAP, CÓ THỂ TỰ ĐỘNG THU GỌN TRÊN CÁC THIẾT BỊ NHỎ NHƯ MOBILE VÀ TABLE
Với cách tạo ra Menu như phần trên khiển cho việc hiển thị Menu quá tốn không gian trên các thiết bị hiển thị màn hình nhỏ. Vì Menu như đã nói ở trên không có khả năng thu gọn, nên việc tạo ra một Menu có khả Năng thu gọn là quá cần thiết, nhất là khi hiển thị trên các thiết bị di động màn hình nhỏ.
Để tính linh hoạt của website đạt yêu cầu thì hiển thị Menu thu gọn / Thanh điều hướng Thu Gọn là bắt buộc phải có. Vì vậy, Chúng ta sẽ cùng tạo một Menu có tính năng thu gọn thật đơn giản nhất:
+ Thêm Button Thu Gọn cho Menu / Thanh Điều hướng
Thẻ Div có Class .navbar-header thực hiện thêm phần tử con là một Button Thu Gọn được định nghĩa như sau :
<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”#myNavbar”>
<span class=”icon-bar”> </span>
…. Các icon bar
</button>
Button này có các thuộc tính :
data-toggle = collapse
class = navbar-toggle
data-target = #myNavbar (*)
+ Thêm thẻ <Div> chứa nội dung của Menu / Thanh điều hướng Thu Gọn :
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">TRANG CHỦ</a></li>
<li><a href="#">HÀNG ĐIỆN TỬ</a></li>
<li><a href="#">ĐỒ MAY MẶC</a></li>
<li><a href="#">MỸ PHẨM</a></li>
<li><a href="#">TRANG SỨC</a></li>
<li><a href="#">PHỤ KIỆN</a></li>
</ul>
</div>
Chú ý : Chúng ta thấy giá trị của data-target (*) khớp với giá trị ID của thẻ <Div> chứa nội dung Menu (/Thanh Điều Hướng) Thu Gọn.
Data-target có giá trị là #myNavbar (1)
<Div> có ID bằng myNavbar (2)
Và ID trong CSS được viết mã là # (3)
Sự kết hợp (3) và (2) khớp với (1)
(#) + (myNavbar) khớp (#myNavbar)
Mã Code Tạo Thanh Điều Hướng Thu Gọn Bằng HTML và Bootstrap :
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WEBSITE BUÔN BÁN</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">TRANG CHỦ</a></li>
<li><a href="#">HÀNG ĐIỆN TỬ</a></li>
<li><a href="#">ĐỒ MAY MẶC</a></li>
<li><a href="#">MỸ PHẨM</a></li>
<li><a href="#">TRANG SỨC</a></li>
<li><a href="#">PHỤ KIỆN</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Đây là Thanh điều hướng có khả năng thu gọn của Bootstrap được gọi là Collapsing The Navigation Bar.</h3>
<p>Với những màn hình lớn như Laptop hay Desktop thì Thanh điều hướng vẫn hiển thị một cách thông thường và chưa thu gọn. Nhưng khi thực hiện trên
các màn hình nhỏ như Mobile hay Table hay Browser có thu nhỏ màn hình hiển thị thì tính năng thu gọn của thanh điều hướng sẽ được thực hiện; Thanh
điều hướng sẽ được thu gọn / Collasible Navigation Bar . </p>
</div>
Hình Hiển Thị Thanh Điều Hướng Trên Desktop & Laptop

Hình Hiển Thị Thanh Điều Hướng Được Thu Gọn Trên Mobile & Table

C. TẠO THANH ĐIỀU HƯỚNG CỐ ĐỊNH / FIXED NAVIGATION BAR
Do nhu cầu hiển thị bố cục Layout chuyển hướng người dùng website, Thanh Điều Hướng cố định đã được thiết kế. Giúp người dùng Lướt Nét cảm thấy thoải mái hơn, không rơi vào cảm giác mỏi mệt.
Thanh Điều Hướng Cố Định được đặt ở những vị trí cố định của website, điển hình nhất là đầu hay ở cuối trang web.
Thanh Điều Hướng Cố Định hoạt động độc lập với phần cuộn trang.
Lưu ý : Nếu bạn muốn tự thực hiện Code Thanh Điều Hướng Cố Định thì hoàn toàn có thể lập trình bằng CSS và JQuery.
Với Bootstrap điều này thật đơn giản, chúng ta chỉ cần sử dụng Class .navbar-fixed-top đã được định nghĩa trong Framework Bootstrap, làm cho Thanh Điều Hướng được cố định ở phần trên cùng của Website.
Thẻ <Nav> thêm Class .navbar-fixed-top để tạo Thanh Điều Hướng Cố Định ở phần trên cùng của Website.
Mã Code HTML & Bootstrap :
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WEBSITE BUÔN BÁN</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">TRANG CHỦ</a></li>
<li><a href="#">HÀNG ĐIỆN TỬ</a></li>
<li><a href="#">ĐỒ MAY MẶC</a></li>
<li><a href="#">MỸ PHẨM</a></li>
<li><a href="#">TRANG SỨC</a></li>
<li><a href="#">PHỤ KIỆN</a></li>
</ul>
</div>
</div>
</nav>
< ! – Phần dưới để hiện thị nội dung trên body -- >
<div class="container" style="margin-top:50px">
<h3>FIXED NAVIGATION BAR DỄ DÀNG VỚI BOOTSTRAP.</h3>
<H3>“Mùa săn mây” tại Sun World Fansipan Legend</H3>
<p>Những địa điểm nào lý tưởng nhất để săn mây cuối năm tại Fansipan? Bí quyết trải nghiệm khu du lịch với những combo giá tiết kiệm bất ngờ? Thông tin được cô đọng ngay trong bài viết dưới đây.
Đến Sa Pa ngắm mùa săn mây đẹp nhất năm
Khoảng thời gian từ tháng 10 đến tháng 4 năm sau được khách du lịch gọi là “mùa mây” của Sa Pa. Đến đây dịp này, bạn có thể trải nghiệm cảm giác đứng giữa biển mây bông xốp.
Nếu muốn săn mây và có ảnh đẹp, nguyên tắc đơn giản vẫn là dậy sớm để tránh người quá đông. Bên cạnh đó, bạn có thể chọn thời điểm hoàng hôn. Khi đó, ánh nắng cuối ngày của mặt trời sẽ tạo nên màu sắc đỏ hồng tuyệt đẹp. Nhiều người ví hình ảnh biển mây lúc đó đẹp tựa “biển lửa”.
Việc săn mây ở Sa Pa và Fansipan vào tháng 10 không quá khó. Tuy nhiên, để gặp được biển mây, bạn phải khá may mắn. Biển mây thường xuất hiện rất nhanh và khó dự đoán trước được.</p>
</div>
<div class="container">
<h3>TIN TỨC MỚI</h3>
<div class="row">
<div class="col-md-4">
<H4>Nếu sắm 4 kiểu boots sau đây, phong cách mùa thu của bạn sẽ bớt sành điệu.</H4>
<p>Mùa lạnh đã đến và lúc này, chị em bổ sung cho tủ đồ vài đôi boots là rất hợp lý. Giày boots không chỉ có tác dụng giữ ấm đôi chân, đặc biệt là trong những ngày lạnh giá, kiểu giày này còn được đánh giá cao ở sự sành điệu. Boots có thể kết hợp được với hầu hết mọi kiểu trang phục. Và sự xuất hiện của đôi giày này giúp cả outfit thêm phần thời thượng, sang xịn mịn.
Tuy nhiên, vẫn có một số kiểu boots là ngoại lệ, không giúp phong cách của chị em sành điệu hơn, trái lại còn mang đến vẻ lỗi mốt. Dưới đây là 4 kiểu boots không còn hợp xu hướng, chị em hãy tránh khi đi mua sắm nhé! </p>
</div>
<div class="col-md-4">
<H4>Bộ ba nhóc tì nổi tiếng nhà tài tử Truyền thuyết Jumong giờ ra sao?</H4>
<p>The Return Of Superman là một trong những show truyền hình thực tế được yêu mến tại Hàn Quốc khi những nhân vật chính xuất hiện trong chương trình là con của các ngôi sao xứ Kim chi. Thời điểm mùa đầu tiên lên sóng, con sinh ba của nam diễn viên Song II Gook nhận được nhiều sự chú ý hơn cả. Nét kháu khỉnh, đáng yêu của 3 "em bé quốc dân" Daehan - Minguk - Manse một thời "đốn tim" khán giả truyền hình.</p>
</div>
<div class="col-md-4">
<H4>Nếu nói ra được những câu sau, chứng tỏ anh ấy rất yêu bạn</H4>
<p>Với tình yêu, nhiều người đàn ông sử dụng sai cách thức lấy lòng phụ nữ. Ví dụ như họ thích nói những lời hứa hẹn hoa mỹ, hứa rằng tương lai sẽ như thế nọ thế kia, đối xử với cô thật tốt. Lại có người ba hoa chích chòe, khoe về khả năng cá nhân để có thêm thiện cảm từ cô gái ấy.
Trên thực tế, con gái cần nhất là sự chân thành. Những câu nói đôi khi không cần quá ngọt ngào nhưng đủ khiến cho cô ấy rung động.
Dù là vợ chồng hay người yêu, anh ấy có thể nói ra những câu sau thì chứng tỏ tình yêu dành cho bạn rất sâu sắc đấy.</p>
</div>
</div>
</div>
<h1>HÃY KÉO THANH CUỘN ĐỂ THẤY HIỆU ỨNG</h1>
HIỂN THỊ KẾT QUẢ THANH ĐIỀU HƯỚNG CỐ ĐỊNH Ở ĐẦU WEBSITE



Lưu ý : Để có định Thanh Điều Hướng ở phần cuối cùng của Trang Web thì chỉ cần thêm Class .navbar-fixed-bottom
được định nghĩa bởi Bootstrap.
D. THÊM FORM VÀO THANH ĐIỀU HƯỚNG / SEARCH BOX
+ Để thêm Form vào Menu Thanh Điều Hướng, chỉ cần thêm Class .navbar-form vào phần tử HTML <form> và các thành phần inputs.
+ Hoặc thêm Class .form-group vào Div container có chứa các thành phần inputs.
+ Hoặc chúng ta có thêm các Icon và các Text bổ nghĩa bên cạnh các trường inputs bằng cách sử dụng các Class .input-group & .input-group-addon
Ở đây chúng ta sẽ dùng Class .input-group & .input-group-addon
Chúng ta xử lý như sau :
<nav class="navbar navbar-inverse navbar-fixed-top">
….
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
…..
</nav>
Chúng ta có đoạn mã code đầy đủ như bên dưới, cho phép hiển thị Thanh Điều Hướng Thu Gọn và có Search Box :
HTML & Bootstrap :
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WEBSITE BUÔN BÁN</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">TRANG CHỦ</a></li>
<li><a href="#">HÀNG ĐIỆN TỬ</a></li>
<li><a href="#">ĐỒ MAY MẶC</a></li>
<li><a href="#">MỸ PHẨM</a></li>
<li><a href="#">TRANG SỨC</a></li>
<li><a href="#">PHỤ KIỆN</a></li>
</ul>
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
</div>
</nav>
<!-- ĐOẠN NỘI DUNG NÀY GIỐNG Ở TRÊN -->
HÌNH ẢNH KẾT QUẢ :

+ THÊM TEXT CHO THANH ĐIỀU HƯỚNG
Để thực hiện căn chỉnh theo bất kỳ thành phần Text nào không phải là Link trên thanh điều hướng chúng ta sử dụng Class .navbar-text
Class .navbar-text có tác dụng căn chỉnh Text theo chiều dọc.
Mã Code ngắn gọn
<nav class="navbar navbar-inverse navbar-fixed-top">
…..
<p class="navbar-text">Some text</p>
…..
</nav>
HÌNH ẢNH HIỂN THỊ KẾT QUẢ :

+ THÊM BUTTON BÌNH THƯỜNG CHO THANH ĐIỀU HƯỚNG
Cách cũng như trên, chúng ta chỉ cần tạo một button bên trong navigation bar, Thêm Class .navbar-btn cho Button vừa tạo được.
<button class=”btn btn-success navbar-btn”>Download</button>
E. CĂN PHẢI CHO THANH ĐIỀU HƯỚNG
Chúng ta sử dụng Class .navbar-right để thực hiện căn phải cho các thành phần trên Thanh Điều Hướng.
Mã Code đơn giản như sau :
<!—Phần CODE này giống ở trên -->
……
<div class="navbar-right">
<p class="navbar-text" style="color:red">Text HÃY TÌM KIẾM</p>
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
…….
<!—Phần CODE này giống ở trên -->
KẾT QUẢ HIỂN THỊ NHƯ BÊN DƯỚI :

CHÚ Ý : BẠN CŨNG CÓ THỂ TẠO MỘT MENU / THANH ĐIỀU HƯỚNG THẢ XUỐNG DROPDROWN VỚI BOOTSTRAP
Mã Code đơn giản như sau :
………
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
</ul>
………
NHỮNG XỬ LÝ THANH ĐIỀU HƯỚNG VỚI BOOTSTRAP ĐEM LẠI CHO TRANG WEB MỘT BỐ CỤC ĐẸP, THUẬN TIỆN VÀ CHUYÊN NGHIỆP. ĐIỀU NÀY KHÔNG CHỈ ĐEM LẠI THUẬN LỢI CHO LẬP TRÌNH VIÊN MÀ CÒN LÀ ĐIỀU THÚ VỊ VỚI NHIỀU NGƯỜI DÙNG. SỰ KẾT HỢP GIỮA THANH ĐIỀU HƯỚNG CHUYÊN NGHIỆP CUNG CẤP BỞI BOOTSTRAP VÀ CÁC THÀNH PHẦN CƠ BẢN CỦA BOOTSTRAP SẼ ĐEM LẠI MỘT THIẾT KẾ WEBSITE CHUẨN ĐẠT YÊU CẦU.
NÊU BẠN MUỐN THỰC HIỆN TUỲ CHỈNH THÌ HOÀN TOÀN CÓ THỂ LÀM ĐIỀU NÀY VỚI CSS VÀ JQUERY.