/    Sign up×
Community /Pin to ProfileBookmark

Single page javascript navigation menu, how to highlight current link

Copy linkTweet thisAlerts:
Jun 01.2015

I’m currently using a single page javascript navigation menu, how to highlight current link.

I use a single page navigation menu for my Intranet site (offline) and want to find a simple
way to automatically highlight the “current” link.
Here is an example of my current Nav menu:

NavLinks.js:

var lnk = ‘ ‘;
lnk+='<br>’;
lnk+='<ul><b><font size=”5″>Customer Links:</b></font>’;
lnk+='<li><a href=”../customerpages/Customer1.html”>Customer 1</a></li>’;
lnk+='<li><a href=”../customerpages/Customer2.html”>Customer 2</a></li>’;
lnk+='<li><a href=”../customerpages/Customer3.html”>Customer 3</a></li>’;
lnk+='</ul>’;
document.write(lnk);

It loads using the following HTML:
<script type=”text/javascript” src=”../javascript/NavLinks.js”></script>

And I can manually add the following CSS to each page to get them highlighted, but I want to avoid added something to every single page:

CSS:
a.current { color: #ffffff; background:#f1d74c; }

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERJun 01.2015 — No need for JS in following example:

[code=php]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> HTML5 page </title>

<!--
put the following <style> commands into a separate text file and use
<LINK REL=StyleSheet HREF="Navigation.css" TYPE="text/css">
to access the settings
For examples see: http://www.htmlhelp.com/reference/css/style-html.html
or other web tutorials on creating external CSS stylesheets
// -->
<style type="text/css"> /* remove from here and put following into "Navigation.css" file */
#CLinks { font-size:1.2em; font-weight:bold; list-style-type:none; }
#CLinks a:hover { background-color:#f1d74c; }
</style>

</head>
<body>
<br>
<ul id="CLinks">Customer Links:
<li><a href="../customerpages/Customer1.html">Customer 1</a></li>
<li><a href="../customerpages/Customer2.html">Customer 2</a></li>
<li><a href="../customerpages/Customer3.html">Customer 3</a></li>
</ul>

</body>
</html>
[/code]

Note: You cannot use document.write() to modify a page. Doing so causes page to re-load to original every time executed after 1st time.

Note: You will only need to change one line in each of your files. Altering the external CSS file will change whereever and whenever referenced.
Copy linkTweet thisAlerts:
@jbmanzauthorJun 02.2015 — Sorry I was not clear, what I mean to accomplish is this:

When I am viewing the url "Customer1.html" I want that item in the list to be "highlighted".

When I click/switch and view "Customer2.html" I want "Customer 2" to be highlighted on the UL.

I am already able to accomplish this by adding styling directly to each page, I am attempting to accomplish this automatically, without having to add a tag/class (i.e. "<a class="current"> on my own.
Copy linkTweet thisAlerts:
@jedaisoulJun 02.2015 — There is little benefit in doing this in JS. As has been said, you'd be better off hard coding it. However, if you are using PHP include files for your header/footer/navbar etc... it does make sense to automate it. In PHP, you'd pass a GET/POST parameter representing the menu item selected. However you'd need a class "current" or equivalent to set/clear the relevant highlight. So I'm not sure how you thought it might be achieved?
×

Success!

Help @jbmanz spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...