Wednesday, May 10, 2017

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


THỦ THUẬT SEO

Bài liên quan

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 nh...

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!



Biểu tượng cảm xúc ( Copy và dán xuống phần Comment )
Hãy Comment Những Gì Bạn Chưa Hiểu Hay Đơn Giản Là Để góp phần Tạo Động Lực Cho Tác Giả
• Không SPAM bạn nhé!
EmoticonEmoticon