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 >Bước 2: Viết CSS cho thanh menu nhé chèn đoạn code sau vào style.css
<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>
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á