Nếu bạn từng vào trang cửa hàng của Google Play , chắc hẳn là sẽ ấn tượng với menu từ trang web này. Nếu các bạn muốn áp đặt kiểu menu như thế vào trong web hay blog của mình, thì trong bài viết này, mình sẽ chia sẻ cho các bạn từng bước làm menu theo phong cách của trang Google Play với sự hỗ trợ của CSS3 và jQuery.
Bước 1 : HTML
Để menu của chúng ta giống với trang Google Play, chúng ta sẽ có bộ khung chuẩn html như sau:
<div class="menu">
<ul>
<li class="category" data-target="apps"><i class="icon-windows"></i>Apps</li>
<li class="category" data-target="movies"><i class="icon-film"></i>Movies</li>
<li class="category" data-target="music"><i class="icon-headphones"></i>Music</li>
<li class="category" data-target="books"><i class="icon-book"></i>Books</li>
<li class="category" data-target="devices"><i class="icon-desktop"></i>Devices</li>
</ul>
<!-- Sub Menus -->
<div id="apps" class="sub-menu">
<ul>
<li>My Apps</li>
<li>Shop</li>
</ul>
</div>
<div id="movies" class="sub-menu">
<ul>
<li>My Movies</li>
<li>Shop</li>
</ul>
</div>
<div id="music" class="sub-menu">
<ul>
<li>My Music</li>
<li>Shop</li>
</ul>
</div>
<div id="books" class="sub-menu">
<ul>
<li>My Books</li>
<li>Shop</li>
</ul>
</div>
<div id="devices" class="sub-menu">
<ul>
<li>My Devices</li>
<li>Shop</li>
</ul>
</div>
<div class="back-btn"><i class="icon-angle-left"></i></div>
</div>
Bước 2 : Định dạng CSS
Các bạn copy toàn bộ đoạn css bên dưới để định dạng cho menu như sau :
.menu {
color: #444;
text-align: left;
position: relative;
float: left;
width: 300px;
background-color: #bbb;
}
.menu i {
display: inline-block;
width: 20px;
}
.menu li {
cursor: pointer;
position: relative;
z-index: 1;
padding: 0 15px;
height: 50px;
line-height: 50px;
font-weight: bold;
background: #dddddd; /* Old browsers */
background: -moz-linear-gradient(top, #dddddd 0%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dddddd 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dddddd 0%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #dddddd 0%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to bottom, #dddddd 0%,#cccccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}
.menu li.current {
z-index: 2;
}
.menu li.hidden {
z-index: 0;
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.menu .sub-menu {
position: absolute;
top: 0;
margin-top: 55px;
margin-left: 30px;
display: none;
}
.sub-menu li {
background: none;
font-size: 14px;
height: 30px;
line-height: 30px;
}
.menu .back-btn {
position: absolute;
top: 0;
height: 100%;
width: 30px;
background-color: #fff;
cursor: pointer;
}
.menu .back-btn i {
position: relative;
display: block;
padding-top: 25px;
top: 50%;
height: 20px;
width: 30px;
text-align: center;
margin-top: -10px;
}
Bước 3 : jQuery
Các bạn để ý, trong đoạn css ở bước 2, chúng ta có định nghĩa cho 2 class là hidden và current. Và trong đoạn jQuery này, chúng ta chỉ việc chèn những class thích hợp để tạo hiệu ứng cho menu.
$("li.category").click(function() {
if (!$(this).hasClass("hidden")) {
$(this).siblings().addClass("hidden");
$(this).addClass("current");
var index = $(this).index();
var offset = (-1 * $(this).height()) * index;
$(this).animate({ "top": offset }, 400 );
$("#" + $(this).data("target")).fadeIn( 500 );
}
});
Và đây là sự kiện khi chúng ta click vào nút back.
$(".back-btn").click(function() {
$(".menu li").removeClass().css({ "top": "auto" });
$(".sub-menu").hide();
});
Bây giờ thì menu của chúng ta đã hoàn thành và sẵn sàng hoạt động, tuy nhiên để có thể hiện các icon tương ứng trên menu, các bạn copy thêm đoạn code bên dưới, và dán nó vào ngay bên trong thẻ
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
Rất đơn giản và dễ thực hiện phải không nào, nhớ để lại comment nếu các bạn gặp khó ở phần nào trong bài viết này nhé. Và đặc biệt là nhớ chia sẻ bài viết đến cho bạn bè của mình, để cùng nhau học tập và nâng cao trình web nhé.