1. Khung HTML với sidebar ẩn/hiện:

<body class="bg-gray-100">

<button onclick="toggleSidebar()" class="p-2 m-4 bg-blue-600 text-white rounded">

Mở Menu

</button>

<div id="sidebar" class="fixed top-0 left-0 h-full w-64 bg-gray-900 text-white transform -translate-x-full transition-transform duration-300 z-50">

<div class="p-4 border-b border-gray-700 flex justify-between items-center">

<h1 class="text-xl font-bold">Menu</h1>

<button onclick="toggleSidebar()" class="text-white text-2xl">×</button>

</div>

<nav class="mt-4 space-y-2">

<a href="#gioi-thieu" class="block px-6 py-2 hover:bg-gray-800">Giới Thiệu</a>

<a href="#video" class="block px-6 py-2 hover:bg-gray-800">Video</a>

<a href="#khoa-hoc" class="block px-6 py-2 hover:bg-gray-800">Khóa Học</a>

<a href="#lien-he" class="block px-6 py-2 hover:bg-gray-800">Liên Hệ</a>

</nav>

</div>

<script>

function toggleSidebar() {

const sidebar = document.getElementById('sidebar');

sidebar.classList.toggle('-translate-x-full');

}

</script>

</body>

Đăng nhận xét

0 Nhận xét