Tự Code Menu Sidebar Responsive

9

Menu là một thành phần không thể thiếu cho mọi website. Dù bạn có làm cái gì đi nữa thì việc đầu tiên khi thiết kế Website bạn cũng sẽ nghĩ tới Menu. Cái menu của bạn đẹp hay xấu sẽ ảnh hưởng rất nhiều đến chất lượng website của bạn. Bỏi khi người dùng truy cập vào một website, thông thường họ sẽ nhìn vào cái menu trước. Họ sẽ khám phá trong đó có những chuyên mục gì, cách hiển thị như thế nào, hiệu ứng ra sao …..

Tự Code Menu Sidebar Responsive Tự Code Menu Sidebar Responsive - Tự Code Menu Sidebar Responsive

Vài lời bên trên đủ cho bạn thấy sức mạnh của Menu trên website rồi đúng không? Hầu hết các website hiện nay đều thiết kế menu ngang như Blog Lại Văn Đức. Bên cạnh đó cũng có một số Menu đặt trên sidebar.

Có rất nhiều cách hiển thị Menu, nhưng với thời điểm hiện nay khi mà các công cụ tìm kiếm đang muốn làm khó anh em thiết kế thì việc Responsive cho Menu là điều rất cần thiết. Chính vì vậy, bài viết này sẽ giới thiệu tới các bạn một phong cách Menu Responsive rất ấn tượng để hiển thị tốt nhất trên mọi thiết bị từ máy tính đến điện thoại di động.

Bắt đầu tạo Menu Sidebar Responsive

Ngay bây giờ chúng ta sẽ cùng thực hiện một Menu sidebar khá ấn tượng. Đầu tiên các bạn cần gọi thư viện về với link sau:

http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

Tiếp đến chúng ta sẽ cần tới đoạn HTML dưới dây:

<nav class="main-nav" id="main-nav">
  <a href="http://www.laivanduc.com/">Trang chủ</a>
  <a href="#">HTML</a>
  <a href="#">CSS</a>
  <a href="#">javascript</a>
  <a href="#">jquery</a>
  <a href="#">Design</a>
</nav>

<div class="page-wrap">

  <header class="main-header">
    <a href="#main-nav" class="open-menu">
      ☰
    </a>
    <a href="#" class="close-menu">
      ☰
    </a>
    
    <h1>Tự Code Menu Sidebar với hiệu ứng trượt</h1>
  </header>
  
  <div class="content">

     <p>Hầu hết các website hiện nay đều thiết kế menu ngang như Blog Lại Văn Đức. Bên cạnh đó cũng có một số Menu đặt trên sidebar.</p>

    <p>Lorem Ipsum chỉ đơn giản là một đoạn văn bản giả, được dùng vào việc trình bày và dàn trang phục vụ cho in ấn. Lorem Ipsum đã được sử dụng như một văn bản chuẩn cho ngành công nghiệp in ấn từ những năm 1500, khi một họa sĩ vô danh ghép nhiều đoạn văn bản với nhau để tạo thành một bản mẫu văn bản. Đoạn văn bản này không những đã tồn tại năm thế kỉ, mà khi được áp dụng vào tin học văn phòng, nội dung của nó vẫn không hề bị thay đổi. Nó đã được phổ biến trong những năm 1960 nhờ việc bán những bản giấy Letraset in những đoạn Lorem Ipsum, và gần đây hơn, được sử dụng trong các ứng dụng dàn trang, như Aldus PageMaker.</p>
        
  </div>
  
</div>

Đoạn văn bản bên trong thẻ <p> các bạn có thể nhân bản ra để việc demo cho dễ nhìn.

Tiếp theo chúng ta sẽ cần tới CSS. Dưới đây là đoạn Code chúng ta cần tới:

@import "compass/css3";

* {
  box-sizing: border-box;
}

html, body { min-height: 100%; }
a { text-decoration: none; }

.main-header {
  background: linear-gradient(#3F94BF, #246485);
  padding: 5px;
  text-align: center;
  color: white;
  text-shadow: #222 0px -1px 1px;
  position: fixed;
  width: 100%;
  left: 0;
  transition: all 0.3s ease;
  a {
    position: absolute;
    left: 20px;
    top: 20px;
    color: white;
    font-size: 32px;
  }
}

.page-wrap {
  float: right;
  width: 100%;
  transition: width 0.3s ease;
}

.main-nav {
  position: fixed;
  top: 0;
  width: 0;
  height: 100%;
  background: #3B3B3B;
  overflow-y: auto;
  transition: width 0.3s ease;
  a {
    display: block;
    background: linear-gradient(#3E3E3E, #383838);
    border-top: 1px solid #484848;
    border-bottom: 1px solid #2E2E2E;
    color: white;
    padding: 15px;
    &:hover, &:focus {
      background: linear-gradient(#484848, #383838);
    }
  }
  &:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 34px;
    background: linear-gradient(left, rgba(black, 0), rgba(black, 0.4));
  }
}

.content {
  padding: 100px 20px 20px 20px;
}

.close-menu {
  display: none;
}

#main-nav:target {
  width: 20%;
}
#main-nav:target + .page-wrap {
  width: 80%;
  .open-menu {
     display: none; 
  }
  .close-menu {
     display: block;
  }
  .main-header {
    width: 80%;
    left: 20%;
  }
}

Chỉ vậy thôi. Bây giờ mời các bạn cùng Demo để xem cái Menu này hoạt động như thế nào và thực sự nó có Responsive không nhé.

See the Pen Menu Sidebar Responsive by Lại Văn Đức (@laivanduc) on CodePen.16775

9 Comments
  1. Thái Thuần nói

    Trong blogspot, đặt code HTML và CSS trên ở đâu?

    1. Lại Văn Đức nói

      CSS bạn đặt trong cặp thẻ  <b:skin></b:skin>
      HTML bạn kéo xuống dưới cùng đặt trước thẻ </body> Hoặc bạn vào Mẫu để chỉnh sửa và Thêm Tiện Ích > Chọn Tiện ích HTML/Javascrip là được.

  2. Minh Đức nói

    có cách nào làm đơn giản hơn ko,mình ko làm đc.http://dreamhouses.info

  3. Thành Công nói

    code lỗi rồi anh đức ơi, em làm trên notepad++ để test mà nó lỗi linh tinh hết

    1. Lại Văn Đức nói

      Nó vẫn đang chạy trên bảng Demo bên dưới mà em.

  4. Thiên Thành nói

    Làm sao chèn các icon F, G+.. vào menu-top, thêm sahifa được vậy a…Chân thành cảm ơn

  5. Long nói

    nh đức ơi,mình down cái theme sahifa của anh và rất ưng ý. Tuy nhiên cái menu trên bản mobile nó ko đứng lại đc ạ?
    mong bác cứu phát này
    em có đọc bài này của bác: http://www.laivanduc.com/chia-se-code/css/tu-code-menu-sidebar-responsive.html
    đây là web em làm ạ: camcaracara.vn
    khi check trên mobile thì lúc vuốt xuống và vuốt lên cái Menu bar nó ko tự động hiện ra==> mình muốn fix cứng thì làm cách nào ạ

  6. Anh Quân nói

    Để chỉnh sửa giao diện của trang wordpress theo ý muốn thì học mình CSS với HTML đã đủ chưa hay phải học thêm gì nữa bạn.

    1. Lại Văn Đức nói

      Để sửa giao diện WP theo ý của mình thì ngoài HTML và CSS thì bạn cần biết về PHP và javascript là ok nhé

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.