How can I make a nav scrolling horizontally with buttons when media queries kick in? html css, javascript and boostrap 5.2
I'm trying to make a nav scrollable but horizontally and with buttons when media queries kicks in. I can't find any solution and it's becoming overwhelming. My team used bootstrap 5.2 and then used scss for styling the project. I think it was the worst mistake we did. We have to replicate EA site and it is starting to look pretty complicated.
I am trying to replicate the same behavior of the "lastest updates" nav when resized. If you scroll down to "latest updates" in this link you can see it: https://www.ea.com/
What I've tried so far:
my HTML with script at the end of the body:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="../css/main.css" />
</head>
<body>
<nav class="container">
<div class="scroll-horizontal">
<button class="btn-scroll" id="btn-scroll-left" onclick="scrollHorizontally(1)">I</button>
<button class="btn-scroll" id="btn-scroll-right" onclick="scrollHorizontally(-1)">I</button>
</div>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button
class="nav-link h6 active"
id="nav-notizie-ea-tab"
data-bs-toggle="tab"
data-bs-target="#nav-notizie-ea"
type="button"
role="tab"
aria-controls="nav-notizie-ea"
aria-selected="true"
>
<p>Notizie EA</p>
<hr class="button-hr" />
</button>
<button
class="nav-link h6"
id="nav-ea-play-tab"
data-bs-toggle="tab"
data-bs-target="#nav-ea-play"
type="button"
role="tab"
aria-controls="nav-ea-play"
aria-selected="false"
>
<p>EA Play</p>
<hr class="button-hr" />
</button>
<button
class="nav-link h6"
id="nav-fifa-tab"
data-bs-toggle="tab"
data-bs-target="#nav-fifa"
type="button"
role="tab"
aria-controls="nav-fifa"
aria-selected="false"
>
<p>FIFA</p>
<hr class="button-hr" />
</button>
<button
class="nav-link h6"
id="nav-f1-tab"
data-bs-toggle="tab"
data-bs-target="#nav-f1"
type="button"
role="tab"
aria-controls="nav-f1"
aria-selected="false"
>
<p>F1</p>
<hr class="button-hr" />
</button>
<button
class="nav-link h6"
id="nav-apex-legends-tab"
data-bs-toggle="tab"
data-bs-target="#nav-apex-legends"
type="button"
role="tab"
aria-controls="nav-apex-legends"
aria-selected="false"
>
<p>Apex Legends</p>
<hr class="button-hr" />
</button>
<button
class="nav-link h6"
id="nav-the-sims-4-tab"
data-bs-toggle="tab"
data-bs-target="#nav-the-sims-4"
type="button"
role="tab"
aria-controls="nav-the-sims-4"
aria-selected="false"
>
<p>The Sims <sup>tm</sup>4</p>
<hr class="button-hr" />
</button>
<button
class="nav-link h6"
id="nav-battlefield-tab"
data-bs-toggle="tab"
data-bs-target="#nav-battlefield"
type="button"
role="tab"
aria-controls="nav-battlefield"
aria-selected="false"
>
<p>Battlefield</p>
<hr class="button-hr" />
</button>
<button
class="nav-link h6"
id="nav-inside-ea-tab"
data-bs-toggle="tab"
data-bs-target="#nav-inside-ea"
type="button"
role="tab"
aria-controls="nav-inside-ea"
aria-selected="false"
>
<p>Inside EA</p>
<hr class="button-hr" />
</button>
</div>
</nav>
<hr class="nav-hr" />
<div class="tab-content" id="nav-tabContent">
<div
class="tab-pane fade show active"
id="nav-notizie-ea"
role="tabpanel"
aria-labelledby="nav-notizie-ea-tab"
tabindex="0"
>
...
</div>
<div
class="tab-pane fade"
id="nav-ea-play"
role="tabpanel"
aria-labelledby="nav-ea-play-tab"
tabindex="0"
>
...
</div>
<div
class="tab-pane fade"
id="nav-fifa"
role="tabpanel"
aria-labelledby="nav-fifa-tab"
tabindex="0"
>
...
</div>
<div
class="tab-pane fade"
id="nav-f1"
role="tabpanel"
aria-labelledby="nav-f1-tab"
tabindex="0"
>
...
</div>
<div
class="tab-pane fade"
id="nav-apex-legends"
role="tabpanel"
aria-labelledby="nav-apex-legends-tab"
tabindex="0"
>
...
</div>
<div
class="tab-pane fade"
id="nav-the-sims-4"
role="tabpanel"
aria-labelledby="nav-the-sims-4-tab"
tabindex="0"
>
...
</div>
<div
class="tab-pane fade"
id="nav-battlefield"
role="tabpanel"
aria-labelledby="nav-battlefield-tab"
tabindex="0"
>
...
</div>
<div
class="tab-pane fade"
id="nav-inside-ea"
role="tabpanel"
aria-labelledby="nav-inside-ea-tab"
tabindex="0"
>
...
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"
></script>
<script>
let currentScrollPosition = 0;
let scrollAmount = 50;
const navCont = document.querySelector(".nav");
const horizontalScroll = document.querySelector(".scroll-horizontal");
const btnScrollLeft = document.querySelector("#btn-scroll-left");
const btnScrollRight = document.querySelector("#btn-scroll-right");
let maxScroll= -navCont.offsetWidth + horizontalScroll.offsetWidth;
function scrollHorizontally(val){
currentScrollPosition += (val * scrollAmount);
if(currentScrollPosition > 0){
currentScrollPosition = 0;
}
// if(currentScrollPosition < maxScroll){
// currentScrollPosition = maxScroll;
// }
navCont.style.left = currentScrollPosition + "px";
}
</script>
</body>
</html>
My SCSS:
@import "../abstracts/colors";
.scroll-horizontal {
width: 100%;
display: none;
z-index: 1;
justify-content: space-between;
}
.nav::-webkit-scrollbar {
display: none;
}
.nav {
flex-wrap: nowrap;
border-bottom: 0px solid var(--gray);
flex-shrink: 0;
// overflow: hidden;
position: relative;
transition: 0.1s all ease-out;
#nav-tab {
position: relative;
}
.nav-link {
height: 3.5rem;
position: relative;
color: black;
border-radius: 0%;
padding-left: 0px;
padding-right: 0px;
border: 0px;
flex-shrink: 0;
transition: 1s all ease-out;
.button-hr {
border: 0px;
width: 85%;
height: 2px;
opacity: 1;
background-color: var(--orange);
position: absolute;
bottom: -27%;
left: 7%;
visibility: hidden;
flex-shrink: 0;
}
p {
width: 100%;
padding-inline: 1rem;
margin-bottom: 0px;
border-left: 1px solid var(--gray-focus);
border-right: 1px solid var(--gray-focus);
flex-shrink: 0;
}
&:nth-of-type(1) p {
border-left: none;
}
&:last-of-type p {
border-right: none;
}
&:hover {
background-color: transparentize(($gray-focus), 0.5);
}
}
.nav-link.active {
color: black, 0.5;
background-color: transparentize(($gray-focus), 0.5);
border-radius: 0%;
.button-hr {
visibility: visible;
animation: myanimation 0.1s;
}
}
}
.nav-hr {
opacity: 1;
margin: 0px;
border-top: 2px solid var(--gray-focus);
flex-shrink: 0;
margin-bottom: 3rem;
}
@keyframes myanimation {
from {
width: 1%;
left: 50%;
}
to {
width: 85%;
left: 7%;
}
}
@media screen and (max-width:808px) {
.scroll-horizontal {
width: 100%;
display: flex;
z-index: 1;
justify-content: space-between;
}
}
Comments
Post a Comment