CODEWITHSUNDEEP
javascriptcssasp.netnavigation
Adam H.
Adam H.

Reputation: 15

Change Nav Color Dynamically JS/CSS

Trying to use JS to change the nav CSS color to show current selection.

I feel like this should be a super simple task, but I've tried like 10 different ways and none of them work in an ASP.NET framework...

I've done this before with PHP and CSS, where I passed a variable through IF statements to say "if this is the active link, then change the color of the nav".

But with ASP.NET, variables are not Global, and thus can not get passed back to the master page. So instead, I'm trying it as a JS script on the master page that modifies the CSS of the nav to show the selection. I have each link as a different ID, because no two elements can have the same ID name.

markup:

<div id="nav">
    <a id="unsel1" onclick="navSelect1()" href="link1.aspx">Section 1</a>
    <a id="unsel2" onclick="navSelect2()" href="link2.aspx">Section 2</a>
    <a id="unsel3" onclick="navSelect3()" href="link3.aspx">Section 3</a>
    <a id="unsel4" onclick="navSelect4()" href="link4.aspx">Section 4</a>
</div>

JS:

function navSelect1() {
    document.getElementById("unsel1").id = "sel1";
    document.getElementById("sel2").id = "unsel2";
    document.getElementById("sel3").id = "unsel3";
    document.getElementById("sel4").id = "unsel4";
    }
function navSelect2() {
    document.getElementById("sel1").id = "unsel1";
    document.getElementById("unsel2").id = "sel2";
    document.getElementById("sel3").id = "unsel3";
    document.getElementById("sel4").id = "unsel4";
}
function navSelect3() {
    document.getElementById("sel1").id = "unsel1";
    document.getElementById("sel2").id = "unsel2";
    document.getElementById("unsel3").id = "sel3";
    document.getElementById("sel4").id = "unsel4";
}
function navSelect4() {
    document.getElementById("sel1").id = "unsel1";
    document.getElementById("sel2").id = "unsel2";
    document.getElementById("sel3").id = "unsel3";
    document.getElementById("unsel4").id = "sel4";
}

and CSS:

#nav{
    position:relative;
    z-index:999;
    margin-top:-20px;
}
#nav a{
    font-weight:bold;
    font-size:18px;
    padding:5px 15px 5px 15px;
    border:1px solid #000;
    border-bottom:none;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    background:#eee; /*light gray*/
    color:#0b264b; /*navy blue*/
}
#nav a:visited{
    color:#0b264b; /*navy blue*/
}

#unsel1{
    background:#eee; /*light gray*/
    color:#0b264b; /*navy blue*/
}

#sel1{
    background:#60bd0e!important; /*lime green*/
    color:#fff!important;

}
#unsel2{
    background:#eee; /*light gray*/
    color:#0b264b; /*navy blue*/
}

#sel2{
    background:#60bd0e!important; /*lime green*/
    color:#fff!important;

}
#unsel3{
    background:#eee; /*light gray*/
    color:#0b264b; /*navy blue*/
}

#sel3{
    background:#60bd0e!important; /*lime green*/
    color:#fff!important;

}
#unsel4{
    background:#eee; /*light gray*/
    color:#0b264b; /*navy blue*/
}

#sel4{
    background:#60bd0e!important; /*lime green*/
    color:#fff!important;

}

Any suggestions?

Upvotes: 0

Views: 160

Answers (1)

Craig
Craig

Reputation: 440

I'd start by giving the ID's a relative ID, so more in relation to their page name; ie: page_link1 page_link2 etc. Then at the bottom of each relative page I would add the following javascript:

document.getElementById("page_link1").className = "active";

So then in the css all you need to do is

nav #page_link1.active
{
  /* special styling goes here */
}

nav #page_link2.active
{
  /* special styling goes here */
}

Upvotes: 1

Related Questions