Tutorial ini mempelajari tentang menu tab penggeser, sering kita jumpai pada situs-situs di internet, dan saya sederhanakan menjadi tutorial yang mudah dipahami, agar bisa kembangkan menjadi sebuah desain web yang bagus.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Slide Tabs</title>
<script src="script.js" defer></script>
</head>
<body>
<div class="wrapper">
<div class="icon"><i id="left" class="fa-solid fa-angle-left"></i></div>
<ul class="tabs-box">
<li class="tab">Hobby</li>
<li class="tab active">Works</li>
<li class="tab">Project</li>
<li class="tab">Freealance</li>
<li class="tab">Logo</li>
<li class="tab">HTML</li>
<li class="tab">CSS</li>
<li class="tab">Javascript</li>
<li class="tab">Youtube</li>
<li class="tab">Movie</li>
<li class="tab">Comedy</li>
<li class="tab">Channel</li>
<li class="tab">Web Design</li>
<li class="tab">Programs</li>
</ul>
<div class="icon"><i id="right" class="fa-solid fa-angle-right"></i></div>
</div>
</body>
</html>
CSS :
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
margin: 0; padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #222222;
padding: 0 7px;
align-items: center;
}
.wrapper {
padding: 15px;
max-width: 500px;
background: #fff;
overflow-x: hidden;
}
.wrapper .icon {
position: absolute;
width: 100px;
display: flex;
align-items: center;
top: 0;
height: 100%;
}
.icon:first-child {
left: 0;
display: none;
background: linear-gradient(90deg, #fff 70%, transparent);
}
.icon:last-child {
right: 0;
justify-content: flex-end;
background: linear-gradient(-90deg, #fff 70%, transparent);
}
.icon i {
font-size: 1.2rem;
text-align: center;
line-height: 55px;
width: 55px;
height: 55px;
cursor: pointer;
}
.icon i:hover {
background: #efedfb;
}
.icon:first-child i {
margin-left: 15px;
}
.icon:last-child i {
margin-right: 15px;
}
.wrapper .tabs-box {
display: flex;
gap: 10px;
list-style: none;
overflow-x: hidden;
scroll-behavior: smooth;
}
.tabs-box.dragging {
scroll-behavior: auto;
cursor: grab;
}
.tabs-box .tab {
background: #f5f4fd;
padding: 8px 15px;
border: 1px solid #d8d5f2;
font-size: 1.18rem;
white-space: nowrap;
cursor: pointer;
}
.tabs-box .tab:hover{
background: #efedfb;
}
.tabs-box.dragging .tab {
user-select: none;
pointer-events: none;
}
.tabs-box .tab.active{
color: #fff;
background: #222222;
border-color: transparent;
}
Javascript :
const tabsBox = document.querySelector(".tabs-box"),
allTabs = tabsBox.querySelectorAll(".tab"),
arrowIcons = document.querySelectorAll(".icon i");
let isDragging = false;
const handleIcons = (scrollVal) => {
let maxScrollableWidth = tabsBoxs.scrollWidth - tabsBox.clientWidth;
arrowIcons[0].parentElement.style.display = scrollVal <= 0 ? "none" : "flex";
arrowIcons[1].parentElement.style.display = maxScrollableWidth - scrollVal <= 1 ? "none" : "flex";
}
arrowIcons.forEach(icon => {
icon.addEventListener("click", () => {
let scrollWidth = tabsBoxs.scrollLeft += icon.id === "left" ? -340 : 340;
handleIcons(scrollWidth);
});
});
const dragging = (e) => {
if(!isDragging) return;
tabsBox.classList.add("dragging");
tabsBox.scrollLeft -= e.movementX;
handleIcons(tabsBox.scrollLeft)
}
const dragStop = () => {
isDragging = false;
tabsBox.classList.remove("dragging");
}
tabsBox.addEventListener("mousedown", () => isDragging = true);
tabsBox.addEventListener("mousemove", dragging);
document.addEventListener("mouseup", dragStop);
Sekian dan terima kasih, terus semangat belajar, semoga berhasil.
Salam
Belum ada tanggapan untuk "Tutorial Membuat Tab Penggeser Seperti di Internet Menggunakan HTML CSS dan JavaScript"
Post a Comment