Code Menu Sidebar Responsive với HTML và CSS

Code Menu Sidebar Responsive chỉ với HTML và CSS giúp bạn có được mẫu Menu ấn tượng cho các dự án thiết kế website của mình. Chắc chắn rằng tất cả website đều phải có Menu, hầu hết các dự án web đều sử dụng Menu Ngang tuy nhiên không ít website sử dụng Menu Sidebar.

Code Menu Sidebar Responsive

Trong Bài Viết này, Lại Văn Đức Blog chia sẻ đến bạn một bộ code nhỏ thôi nhưng hiệu quả để bạn sử dụng làm Menu Sidebar. Bạn cũng có thể tuỳ chỉnh, chỉnh sửa thêm để phù hợp với phong cách thiết kế cho dự án của mình. Bên dưới là Demo cho mẫu Code Menu Sidebar Responsive trong bài viết này.

Menu trên website là thứ vô cùng quan trọng giúp điều hướng người dùng vào các chuyên mục quan trọng. Hầu hết mọi người truy cập vào website sẽ nhìn vào Menu đầu tiên. Menu sẽ cho người dùng thấy chủ đề chính của website nói về điều gì.

Menu đẹp hay xấu ảnh hưởng rất lớn đến trải nghiệm người dùng trên website của bạn. Bạn bố trí, sắp xếp Menu như thế nào cũng ảnh hưởng đến cách người dùng truy cập. Vậy hãy cân nhắc các hạng mục có nên đưa ra hay không.

Có rất nhiều cách hiển thị Menu trên website của bạn. Nhưng dù bằng bất cứ cách nào thì 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 Code Menu Sidebar Responsive

Ngay bây giờ chúng ta sẽ đến phần chính thực hiện một Menu Sidebar cho dự án thiết kế website của bạn. Đầu tiên, bạn cần gọi thư viện jquery với link như sau:

Tiếp theo, bạn sẽ cần đến đoạn HTML này để Code Menu Sidebar Responsive.

<nav class="main-nav" id="main-nav">
  <a href="https://laivanduc.vn/">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>Code Menu Sidebar Responsive</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%;
  }
}

Thế Thôi

Bài viết chia sẻ đến các bạn những đoạn Code HTML và CSS để tạo thành một Menu Sidebar Responsive khá ấn tượng. Bạn có thể sử dụng ngay cho các dự án của mình hoặc chỉnh sửa dễ dàng theo nhu cầu.

Code Menu Sidebar Responsive với HTML và CSS giúp website của bạn đẹp hơn, nhẹ nhàng hơn. Chúc bạn luôn vui vẻ và hoàn thành dự án một cách chuyên nghiệp nhất.