Trong bài viết này, mình sẽ hướng dẫn các bạn tạo thanh navigation bar giống với trang chủ Appple – https://www.apple.com/. Các bạn có thể xem kết quả ở dưới đây.
Một số thành phần
- HTML5 + CSS3
- Font Awesome:
Font Awesome được thêm vào bên trong phầnheadnhư sau:<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
- jQuery:
jQuery được thêm vào cuối phầnbody, ngay trước phần custom script của các bạn:<script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript"> //Custom code ở đây </script> </body>
Phương pháp thực hiện
Thanh navigation được tạo như một thanh navigation bình thường, trong đó có các icon sử dụng Font Awesome. Đồng thời khung nhập nội dung tìm kiếm là một form. Khi click vào nút Search, bạn cho hiện form này lên. Ngược lại khi nhấn vào dấu x thì ẩn form này đi. VIệc này được thực hiện nhờ jQuery thêm, bớt các class CSS. Các class này có 2 thuộc tính quan trọng là opacity và visibility được đặt giá trị phù hợp. Hiệu ứng khi ẩn, hiện khung tìm kiếm sử dụng thuộc tính transition-delay.
Chi tiết
Dưới đây là source code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Navigation bar like Apple.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous"
/>
</head>
<body>
<nav>
<div class="menu">
<ul>
<li>
<a href="#"><i class="fa fa-apple"></i></a>
</li>
<li><a href="#" class="menu-item">Mac</a></li>
<li><a href="#" class="menu-item">iPad</a></li>
<li><a href="#" class="menu-item">iPhone</a></li>
<li><a href="#" class="menu-item">Watch</a></li>
<li><a href="#" class="menu-item">TV</a></li>
<li><a href="#" class="menu-item">Music</a></li>
<li><a href="#" class="menu-item">Support</a></li>
<li>
<a href="#" id="search"><i class="fa fa-search"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-shopping-basket"></i></a>
</li>
</ul>
<div class="search-form">
<form>
<input type="text" name="" placeholder="Search Apple.com" />
</form>
</div>
<a href="#" class="close"><i class="fa fa-times"></i></a>
</div>
</nav>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"
></script>
<script type="text/javascript">
$(document).ready(function() {
$("#search").click(function() {
$(".menu-item").addClass("hide-item");
$(".search-form").addClass("active");
$(".close").addClass("active");
$("#search").hide();
});
$(".close").click(function() {
$(".menu-item").removeClass("hide-item");
$(".search-form").removeClass("active");
$(".close").removeClass("active");
$("#search").show();
});
});
</script>
</body>
</html>
main.css
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400");
body {
margin: 0;
padding: 0;
font-family: "Source Sans Pro", sans-serif;
}
nav {
height: 44px;
background: #000;
}
.menu {
position: relative;
margin: 0 auto;
width: 1000px;
overflow: hidden;
}
.menu ul {
width: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
.menu ul li {
list-style: none;
}
.menu ul li,
.menu ul li a {
color: #fff;
line-height: 44px;
text-decoration: none;
}
.menu ul li .fa.fa-apple {
font-size: 20px;
}
.menu ul li a.menu-item {
transform: scale(1);
transition: 0.5s;
display: block;
}
.menu ul li a.menu-item.hide-item {
transform: scale(0);
}
.menu ul li:nth-child(2) a.menu-item.hide-item {
transition-delay: 0.6s;
}
.menu ul li:nth-child(3) a.menu-item.hide-item {
transition-delay: 0.5s;
}
.menu ul li:nth-child(4) a.menu-item.hide-item {
transition-delay: 0.4s;
}
.menu ul li:nth-child(5) a.menu-item.hide-item {
transition-delay: 0.3s;
}
.menu ul li:nth-child(6) a.menu-item.hide-item {
transition-delay: 0.2s;
}
.menu ul li:nth-child(7) a.menu-item.hide-item {
transition-delay: 0.1s;
}
.menu ul li:nth-child(8) a.menu-item.hide-item {
transition-delay: 0s;
}
.menu ul li:nth-child(2) a.menu-item {
transition-delay: 0s;
}
.menu ul li:nth-child(3) a.menu-item {
transition-delay: 0.1s;
}
.menu ul li:nth-child(4) a.menu-item {
transition-delay: 0.2s;
}
.menu ul li:nth-child(5) a.menu-item {
transition-delay: 0.3s;
}
.menu ul li:nth-child(6) a.menu-item {
transition-delay: 0.4s;
}
.menu ul li:nth-child(7) a.menu-item {
transition-delay: 0.5s;
}
.menu ul li:nth-child(8) a.menu-item {
transition-delay: 0.6s;
}
.search-form {
position: absolute;
top: 0;
left: 50%;
transform: translateX(0);
width: 600px;
height: 44px;
opacity: 0;
visibility: hidden;
transition: 0.5s;
}
.search-form.active {
opacity: 1;
visibility: visible;
transition-delay: 0.5s;
transform: translateX(-50%);
}
.search-form input {
width: 100%;
height: 44px;
background: transparent;
color: #fff;
border: none;
outline: none;
font-size: 16px;
}
.search-form input::placeholder {
color: #fff;
}
.search-form:before {
content: "\f002";
position: absolute;
top: 12px;
left: -26px;
font-size: 18px;
color: #fff;
font-family: fontAwesome;
}
.close {
position: absolute;
right: 0;
top: 0;
height: 44px;
background: #000;
color: #fff;
line-height: 44px;
font-size: 18px;
text-align: right;
width: 20px;
cursor: pointer;
opacity: 0;
visibility: hidden;
}
.close.active {
opacity: 1;
visibility: visible;
}
Còn đây là video hướng dẫn chi tiết các bước thực hiện.
Demo và download
Các bạn có thể xem demo và download source ở đây.