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