CSS to disable link to current page

[agibsonsw]

Hello.

I have a nice navigation list - an unordered list used as a navigation bar. Is there a clever CSS way to disable the link to the current page, or to change it's text colour (to indicate that it is disabled)? Andy.

Code: Select all

ul#navList { padding: 0; margin: 0.5em 0 1em 0; list-style-type: none; float: left;
	width: 100%; color: #fff; background-color: #036;
}
ul#navList li { display: inline; text-align:center; }
ul#navList li a { float: left; width: 5em; color: #fff; background-color: #036;
	padding: 0.2em 1em; text-decoration: none; border-right: 1px solid #fff;
}
ul#navList li a:hover {
	background-color: #369; color: #fff;
}

[agibsonsw]

No worries. I just gave each 'li' a class called 'current' and used:

Code: Select all

#navList .current > a {
	pointer-events: none; color: lightgray;
} 

Of course, I had to tweak it for IE

[Jezza]

As an addition you can keep the cursore as a default as well to prevent it changing.


[quote="agibsonsw"]No worries. I just gave each 'li' a class called 'current' and used:

Code: Select all

#navList .current > a {
	pointer-events: none;
        cursor: default;
        color: lightgray;
} 

[agibsonsw]

Hello and thank you.
I had this already :) but forgot to copy it.

For IE I just changed it to 'href="#"'. This is not ideal as it still looks like a link - but I don't want to remove the 'a' tag each time.

Is there an alternative to 'pointer-events:none;' for IE? Ta, Andy.

[jscher2000]

I have a nice navigation list - an unordered list used as a navigation bar. Is there a clever CSS way to disable the link to the current page, or to change it's text colour (to indicate that it is disabled)?

I'm not sure CSS is the tool best suited to the job. I think I worked on a site once where the tabs were colored differently to indicate the current page by adding a particular id or class to the body tag. Thus

Code: Select all

#hometab, #abouttab, #contacttab {background:blue}
#home #hometab, #about #abouttab, #contact #contacttab {background:red}

But this would have no effect on the functionality of the link.

For Firefox, while I think a script approach would be best (preferably on the server side), one could toggle a transparent div "in front of" the link from display:none to display:block. Unlike some other browsers, Firefox will not natively pass a click through an element "in front of" a link even if it is transparent.

[agibsonsw]

jscher: Thank you for these details. I think i'm happy with the following combination which effectively disables link behaviour in IE for the current page:

Code: Select all

ul#navList li a:hover {
	background-color: #369; color: #fff;
}
#navList .current > a {
	pointer-events: none; cursor: default; color: lightgray;
}
#navList .current > a:hover {
	color: lightgray; background-color: #036;
}

IE still displays the link detail in the status bar but sometimes you have to submit to the mind of IE.

Bit dodgy this 'pointer-events' stuff though?! Andy.