Tạo Menu theo phong cách Google Play với 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.

Xem Demo | Download

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>

       
      <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;
  awidth: 300px;
  background-color: #bbb;
}
  .menu i {
    display: inline-block;
    awidth: 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%;
    awidth: 30px;
    background-color: #fff;
    cursor: pointer;
  }
    .menu .back-btn i {
      position: relative;
      display: block;
      padding-top: 25px;
      top: 50%;
      height: 20px;
      awidth: 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="https://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 !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster