0
I have a menu that has a hoverline effect ("a line that runs down the clicked element!") with Javascript, but it is created using getId by pulling the element ID.
The challenge is to duplicate the menu keeping the effect 'hoverline' in both, I’m breaking the head of how I can keep the effect in two menus, I don’t know if the best way is to search for a way without using getId or if there is how to duplicate it keeping the elements ID.
Code:
var SETTINGS = {
navBarTravelling: false,
navBarTravelDirection: "",
navBarTravelDistance: 150
}
var colours = {
0: "#867100",
1: "#7F4200",
2: "#99813D",
3: "#40FEFF",
4: "#14CC99",
5: "#00BAFF",
6: "#0082B2",
7: "#B25D7A",
8: "#00FF17",
9: "#006B49",
10: "#00B27A",
11: "#996B3D",
12: "#CC7014",
13: "#40FF8C",
14: "#FF3400",
15: "#ECBB5E",
16: "#ECBB0C",
17: "#B9D912",
18: "#253A93",
19: "#125FB9",
}
document.documentElement.classList.remove("no-js");
document.documentElement.classList.add("js");
// the indicator
var indicador = document.getElementById("indicador");
var trilho = document.getElementById("trilho");
// Set the indicator
moveIndicator(trilho.querySelector("[aria-selected=\"true\"]"), colours[0]);
// Handle setting the currently active link
trilhoContents.addEventListener("click", function(e) {
var links = [].slice.call(document.querySelectorAll(".trilho_classe_Link"));
links.forEach(function(item) {
item.setAttribute("aria-selected", "false");
})
e.target.setAttribute("aria-selected", "true");
// Pass the clicked item and it's colour to the move indicator function
moveIndicator(e.target, colours[links.indexOf(e.target)]);
});
// var count = 0;
function moveIndicator(item, color) {
var textPosition = item.getBoundingClientRect();
var container = trilhoContents.getBoundingClientRect().left;
var distance = textPosition.left - container;
var scroll = trilhoContents.scrollLeft;
indicador.style.transform = "translateX(" + (distance + scroll) + "px) scaleX(" + textPosition.width * 0.01 + ")";
// count = count += 100;
// indicador.style.transform = "translateX(" + count + "px)";
if (color) {
indicador.style.backgroundColor = color;
}
}
function determineOverflow(content, container) {
var containerMetrics = container.getBoundingClientRect();
var containerMetricsRight = Math.floor(containerMetrics.right);
var containerMetricsLeft = Math.floor(containerMetrics.left);
var contentMetrics = content.getBoundingClientRect();
var contentMetricsRight = Math.floor(contentMetrics.right);
var contentMetricsLeft = Math.floor(contentMetrics.left);
if (containerMetricsLeft > contentMetricsLeft && containerMetricsRight < contentMetricsRight) {
return "both";
} else if (contentMetricsLeft < containerMetricsLeft) {
return "left";
} else if (contentMetricsRight > containerMetricsRight) {
return "right";
} else {
return "none";
}
}
* {
box-sizing: inherit;
}
.menu_horizontal {
position: relative;
padding: 0 11px;
box-sizing: border-box;
}
.trilho_classe {
/* Make this scrollable when needed */
overflow-x: auto;
/* We don't want vertical scrolling */
overflow-y: hidden;
/* For WebKit implementations, provide inertia scrolling */
-webkit-overflow-scrolling: touch;
/* We don't want internal inline elements to wrap */
white-space: nowrap;
/* If JS present, let's hide the default scrollbar */
.js & {
/* Make an auto-hiding scroller for the 3 people using a IE */
-ms-overflow-style: -ms-autohiding-scrollbar;
/* Remove the default scrollbar for WebKit implementations */
&::-webkit-scrollbar {
display: none;
}
}
/* positioning context for advancers */
position: relative;
/*Crush the whitespace here*/
font-size: 0;
}
.trilho_classe_Contents {
float: left;
transition: transform .2s ease-in-out;
position: relative;
}
.trilho_classe_Contents-no-transition {
transition: none;
}
.trilho_classe_Link {
text-decoration: none;
color: #888;
/*Reset the font size*/
font-size: 1.2rem;
font-family: -apple-system, sans-serif;
display: inline-flex;
align-items: center;
min-height: 44px;
border: 1px solid transparent;
padding: 0 11px;
& + & {
border-left-color: #eee;
}
&[aria-selected="true"] {
color: #111;
}
}
.trilho_classe_Indicator {
position: absolute;
bottom: 0;
left: 0;
height: 4px;
width: 100px;
background-color: transparent;
transform-origin: 0 0;
transition: transform .2s ease-in-out, background-color .2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menu_horizontal">
<nav id="trilho" class="trilho_classe">
<div id="trilhoContents" class="trilho_classe_Contents">
<a href="#" class="trilho_classe_Link" aria-selected="true">Chairs</a>
<a href="#" class="trilho_classe_Link">Tables</a>
<a href="#" class="trilho_classe_Link">Cookware</a>
<a href="#" class="trilho_classe_Link">Beds</a>
<a href="#" class="trilho_classe_Link">Desks</a>
<a href="#" class="trilho_classe_Link">Flooring</a>
<span id="indicador" class="trilho_classe_Indicator"></span>
</div>
</nav>
</div>
Arthur, Java and Javascript are totally different programming languages.
– NoobSaibot