Menu Javascript Getid

Asked

Viewed 40 times

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>

javascript css javascript-events

  • Arthur, Java and Javascript are totally different programming languages.

1 answer

1


If you want to create another menu for other features I believe the best way is to use getId, however you will have to put unique ids to render. You can even create functions with parameters, but here comes a question of time x result.

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";
    }
}

var indicador2 = document.getElementById("indicador2");
var trilho2 = document.getElementById("trilho2");

var colours2 = {
    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",
}

// var count = 0;
function moveIndicator2(item, color) {
    var textPosition = item.getBoundingClientRect();
    var container = trilhoContents2.getBoundingClientRect().left;
    var distance = textPosition.left - container;
	 var scroll = trilhoContents2.scrollLeft;
    indicador2.style.transform = "translateX(" + (distance + scroll) + "px) scaleX(" + textPosition.width * 0.01 + ")";
	// count = count += 100;
	// indicador.style.transform = "translateX(" + count + "px)";
	
    if (color) {
        indicador2.style.backgroundColor = color;
    }
}

// Set the indicator
moveIndicator2(trilho2.querySelector("[aria-selected=\"true\"]"), colours2[0]);


// Handle setting the currently active link
trilhoContents2.addEventListener("click", function(f) {
	var links = [].slice.call(document.querySelectorAll(".trilho_classe_Link2"));
	links.forEach(function(item) {
		item.setAttribute("aria-selected", "false");
	})
	f.target.setAttribute("aria-selected", "true");
	// Pass the clicked item and it's colour to the move indicator function
	moveIndicator2(f.target, colours2[links.indexOf(f.target)]);
});
* {
	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;
}

.trilho_classe_Link2 {
	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;
	}
}
<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>

<br />
<br />

<div class="menu_horizontal">
<nav id="trilho2" class="trilho_classe">
    <div id="trilhoContents2" class="trilho_classe_Contents">
        <a href="#" class="trilho_classe_Link2" aria-selected="true">Chairs</a>
        <a href="#" class="trilho_classe_Link2">Tables</a>
        <a href="#" class="trilho_classe_Link2">Cookware</a>
        <a href="#" class="trilho_classe_Link2">Beds</a>
        <a href="#" class="trilho_classe_Link2">Desks</a>
        <a href="#" class="trilho_classe_Link2">Flooring</a>
	<span id="indicador2" class="trilho_classe_Indicator"></span>
    </div>
</nav>
</div>

  • 1

    Perfect, thank you for your time, helped me a lot!

Browser other questions tagged javascript css javascript-events

You are not signed in. Login or sign up in order to post.