quang cao hosting

Hướng dẫn Tạo Menu theo phong cách Google Play với CSS3 và jQuery

Xem: 1264    Tải: 5   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

10 điểm   ( 6 đánh giá ) File đã được kiểm thử
Miễn Phí [megacode]huong-dan-tao-menu-theo-phong-cach.rar (3.44 KB)
Tải miễn phí
Xem Demo

Bạn cần phải Đăng nhập để tải file [megacode]huong-dan-tao-menu-theo-phong-cach.rar
Nếu bạn chưa có tài khoản thì Đăng ký miễn phí tại đây

Báo lỗi download   Báo vi phạm bản quyền

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.

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 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é.

Chúc các bạn thành công !

Hướng dẫn Tạo Menu theo phong cách Google Play với CSS3 và jQuery

Hướng dẫn Tạo Menu theo phong cách Google Play với CSS3 và jQuery Đăng ngày 12-08-2014  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. 1.6666666666667/10 1264

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 
Hỗ trợ kỹ thuật cho thành viên:
Số di động (Hotline): 085.99999.25
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn
File gợi ý cho bạn
File tải nhiều nhất
Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: 085.99999.25;