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)
When your bath soap bar gets too small to use, don't throw it away! open the next bar, and when you finish showering, stick the small old bar to the back of the new bar. Onces they both dry, they will become one.
.png)
.png)