Apr 3, 2020
Back to all Elements
Step 1:
Use the Tabs widget to create your tabs and your menu. Design in as you like :)
Step 2:
Give the menu Width:100%, Display:flex, Overflow:auto
Step 3:
Give the menu links Flex-shrink:0, Flex-grow:0 (Sizing: X)
To add Desktop mouse scroll, add the next code before the </body> tag. Remember to change the .tabs-menu class to whatever class you gave to your Tabs Menu element.
Code by Kevin Simper from here
<script>
const slider = document.querySelector(".tabs-menu");
let isDown = false;
let startX;
let scrollLeft;
slider.addEventListener("mousedown", e => {
isDown = true;
slider.classList.add("active");
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener("mouseleave", () => {
isDown = false;
slider.classList.remove("active");
});
slider.addEventListener("mouseup", () => {
isDown = false;
slider.classList.remove("active");
});
slider.addEventListener("mousemove", e => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = x - startX;
slider.scrollLeft = scrollLeft - walk;
});
</script>
Last, but not least-
If you would like to remove the ugly scroll bar that windows and android OS usually add to scrollable elements, then add this code in the <head> tag:
<style>
.tabs-menu::-webkit-scrollbar {
display: none;
}
</style>
.png)
Destin's Youtube channel Smarter Every Day is one of my favourite places on the web.
Nested tabs in an accordion template
A small collection of buttons and hover interactions.
A 3d slider with video items, plays and pauses on click & slide change.
.png)
