Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Draggable Menu Slider" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Draggable Menu Slider" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS, and JavaScript code below.
Draggable Menu Slider [Source Code]
To get the following HTML, CSS & JS code for the Draggable Menu Slider project. You need to create three files one is an HTML file, the second one is a CSS file and another one is a JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with a .html extension for HTML code, a .css extension for CSS code, and .js for JavaScript code.
You can also download all source code files from the given download button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Menu Slider</title>
<link rel="stylesheet" href="style.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/ebb335c6c8.js" crossorigin="anonymous"></script>
</head>
<body>
<h1>Draggable Menu Slider</h1>
<div class="container">
<div class="icon left"><i class="fa-solid fa-angle-left" id="l"></i></div>
<ul class="list">
<li>Developer</li>
<li>Programmer</li>
<li>Blogger</li>
<li class="active">Youtuber</li>
<li>Cricketer</li>
<li>Memer</li>
<li>Topper</li>
<li>Creator</li>
<li>Foodie</li>
<li>Movie_Lover</li>
</ul>
<div class="icon right"><i class="fa-solid fa-angle-right" id="r"></i></div>
</div>
<script src="index.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: blueviolet;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 250px auto;
}
h1 {
color: white;
margin-bottom: 10px;
}
.container {
width: 50%;
height: 100px;
background-color: white;
border-radius: 50px;
overflow: hidden;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.list {
list-style: none;
display: flex;
gap: 10px;
padding: 0 50px;
overflow-x: hidden;
scroll-behavior: smooth;
}
.list.dragging {
scroll-behavior: auto;
cursor: grab;
user-select: none;
pointer-events: none;
}
.list li {
background-color: white;
color: blueviolet;
padding: 10px 20px;
border-radius: 50px;
border: 1px solid blueviolet;
cursor: pointer;
}
.list li.active {
background-color: blueviolet;
color: white;
}
.icon {
position: absolute;
height: 100px;
width: 120px;
display: flex;
justify-content: center;
align-items: center;
}
.left {
background: linear-gradient(90deg, white 70%, transparent);
left: 0;
}
.right {
background: linear-gradient(-90deg, white 70%, transparent);
right: 0;
}
i {
background-color: transparent;
padding: 17px 20px;
border-radius: 50%;
position: absolute;
cursor: pointer;
}
i:hover {
background-color: rgba(213, 211, 211, 0.475);
}
.fa-angle-right {
right: 20%;
}
.fa-angle-left {
left: 20%;
}
JavaScript
const listEl = document.querySelector(".list");
const liEls = listEl.querySelectorAll(".list li");
const iconsEls = document.querySelectorAll(".icon i");
let isDragging = false;
// It adds active class to the li tag to standout from the other li tags.
liEls.forEach(tab => {
tab.addEventListener("click", () => {
listEl.querySelector(".active").classList.remove("active");
tab.classList.add("active");
});
});
const handleIcons = (scrollVal) => {
let maxScrollableWidth = listEl.scrollWidth - listEl.clientWidth;
// If the scrollVal is less than or equal to 0 then left icon will disappear else appear.
iconsEls[0].parentElement.style.display = scrollVal <= 0 ? "none" : "flex";
// This is to disappear the right icon when it reaches to the right most end.
iconsEls[1].parentElement.style.display = maxScrollableWidth - scrollVal <= 1 ? "none" : "flex";
}
// when we click on the left icon(l) it moves left side by -250 other wise to right side by 250.
iconsEls.forEach(icon => {
icon.addEventListener("click", () => {
let scrollWidth = listEl.scrollLeft = listEl.scrollLeft + (icon.id === "l" ? -250 : 250);
handleIcons(scrollWidth);
});
});
// Whenever we drag the list then it automatically moves to that side.
listEl.addEventListener("mousemove", (e) => {
if(!isDragging) return;
listEl.classList.add("dragging");
listEl.scrollLeft = listEl.scrollLeft - e.movementX;
handleIcons(listEl.scrollLeft)
});
// Whenever we stop dragging the list then it automatically stops.
document.addEventListener("mouseup", () => {
isDragging = false;
listEl.classList.remove("dragging");
});
listEl.addEventListener("mousedown", () => isDragging = true);
Generating Download Link...