Menu ẩn hiện mình giới thiệu ở bài viết này sử dụng CSS vì thế nên sẽ không ảnh hưởng đến tốc độ tải trang, hơn nữa về mặt thẩm mỹ rất ok vì khi không sử dụng sẽ ẩn đi không che nội dung của trang
Bạn xem demo tại bài viết này để rõ hơn nha, button Menu nằm bên trên cùng tay trái màn hình :D
Tạo button menu
Sử dụng đoạn code bên dưới chèn vào trong thẻ body
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
Thêm menu
Đoạn code bên dưới dùng để hiển thị nội dung trong menu, bạn có thể tùy sửa theo ý mình
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Đinh Công Huy <span>HuyDC Blog</span></li>
<li><a href="/" target="_blank">Blog</a></li>
<li><a href="https://instagram.com/huycovip" target="_blank">Instagram</a></li>
<li><a href="https://twitter.com/huycovip" target="_blank">Twitter</a></li>
<li><a href="https://www.youtube.com/channel/UC_5Tbq8ANthJ8TpCyHTArEA" target="_blank">YouTube</a></li>
<li><a href="https://fb.com/huycovip" target="_blank">Facebook</a></li>
</ul>
</div>
Thêm style cho Menu và button Menu
<style>
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
top: 30px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background: linear-gradient(180deg, #9a9a9a 0%, #e9ebee 100%);
}
.sidebarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li {
list-style: none;
color: #262626;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a {
color: #333;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu { transform: translateX(0); }
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: fixed;
z-index: 9999;
top: 15px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #999;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
</style>
Cảm ơn và chúc bạn thành công! ./.
