Side Navbar không sử dụng bootstrap và framework

Home / Side Navbar không sử dụng bootstrap và framework
Bài này mình hướng dẫn làm Side Navbar chỉ dùng HTMl, CSS, JS không dùng bootstrap hay bất cứ framework nào

1.Tạo khung HTML

<!-- Đây là phần html chứ menu trong side navbar-->



<div id="mySidenav" class="sidenav">
    <a href="#" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
</div>



<!-- Đây là phần html chứ menu trong side navbar-->
<!-- Đây là button để kích hoạt bật side navbar-->



<div id="main">      
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
</div>



<!-- Đây là button để kích hoạt bật side navbar-->

Vậy là hoàn thành xong khung sườn html cho phần side navbar

2.Style Css cho khung html vừa mới tạo

body {
transition: background-color .5s;
}
/*Phần này là phần style cho sidenav*/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}

.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}

.sidenav a:hover {
color: #f1f1f1;
}

.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/*Phần này là phần style cho sidenav*/
/*Phần này là phần style body*/
#main {
transition: margin-left .5s;
padding: 16px;
}
/*Phần này là phần style body*/
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}

Ban đầu mình sẽ cho phần Side Nav ẩn đi bằng cách cho width của nó bằng 0 khi có sự kiến nhấn button thì sidenav mới hiện lên

3. Tạo chức năng đóng mở cho Side Nav

function getID(id) {
    document.getElementById(id);
}

function openNav() {
    getID("mySidenav").style.width = "250px";
    getID("main").style.marginLeft = "250px";
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
    getID("mySidenav").style.width = "0";
    getID("main").style.marginLeft = "0";
    document.body.style.backgroundColor = "white";
}

Lúc này khi nhìn code JS các bạn thấy được là hàm openNav() khi được kích hoạt sẽ thì sẽ cho width của Sidenav là 250px và trong css mình có set transiton để lúc thay đổi css quá trình sẽ diễn ra chậm hơn.

Giờ làm việc

Thứ hai - Thứ sáu 08h00 - 20h00

Thứ 7 08h00 - 20h00

Chủ nhật 08h00 - 20h00

Liên Hệ

Bài viết trước
Hướng dẫn làm modal không dùng Bootstrap hay thư viện
Bài viết tiếp theo
Cài theme cho notepad++ giống như Visual Studio Code

    Đăng kí nhận thông tin

    Đăng ký ngay để nhận được những thông tin khi có bài viết mới!