Wednesday, May 10, 2017

Cách tạo css responsive menu đơn giản chi tiết

Từ khóa

Công nghệ website luôn thay đổi để hợp với xu hướng người dùng nhật là trong những năm gần đây con người hay truy cập web bằng điện thoại nhiều hơn máy tính, Với những website truyền thống có chế độ hiển thị không tương thích Smart Phone gấy mất cảm tình và quan trọng hơn nữa là không được Google đánh giá cao. Vậy làm thế nào để web hiển thị chế độ điện thoại nhất là phần menu? Chính vì thề hôm nay mình sẽ hướng dẫn các bạn làm thanh menu áp dụng kỹ thuật Responsive các bạn cùng theo dõi nhé

Cách làm menu hiển thị ở chế độ Responsive với jquery



Bước 1: Viết mã HTML

<nav >
<ul class="hien">
<li class="active1"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="rsp">Menu</div>
</nav>
 Bước 2: Viết CSS cho thanh menu nhé chèn đoạn code sau vào style.css

nav a{text-decoration: none;color: inherit;}
nav ul{
background: #cd9655;
overflow: hidden;
color: #fff;
padding: 0;
text-align: center;
margin: 0;
}
nav ul li{
display: inline-block;
padding: 10px 15px;
transition: max-height 0.4s
} nav ul li:hover{background:#947037}
.rsp{width: 100%;
background:#6f5225;
text-align:left;
box-sizing: border-box;
padding: 10px ;
cursor: pointer;
color: #fff;
display: none;

CSS cho chế độ Responsive

@media screen and (max-width: 580px){
nav ul{max-height: 0px}
.hien{max-height: 20em}
nav ul li{
box-sizing: border-box;
width: 100%;
padding: 15px
}
.rsp{display: block;}

Sau khi hoàn thành bước 1 va 2 các bạn copy đoạn jquery này chèn bên trong thẻ <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

Bước 3: viết lện thực thi cho nó bằng cách chèn đoạn code này vào đằng sau thẻ </body>


<script type="text/javascript">
$('.rsp').on('click', function ()
{
$('nav ul').toggleClass('hien');
}
);
</script>

Chỉ cần 3 bước vậy thôi các bạn đã có thanh menu hiển thị ở chế độ Responsive. Chúc các bạn thành công!

Điểm 4.6/5 dựa vào 87 đánh giá
  • Lazada : Mở chương trình "giá khuynh đảo", giới hạn mỗi người mua tối đa 2 sản phẩm Click xem
  • Adayroi : iPhone 7 lần đầu về giá dưới 15 triệu đồng Click xem
  • Tiki : Giảm 10% cho thẻ tín dụng HSBC Click xem

Bài liên quan