How to highlight the selected menu item in javascript ?

**linux1880** · 07-09-2010 12:15 AM

Hi friends. I have a javascript list menu, I want the menu item stay in given background color when we are at that page. How do we achieve that with javascript ? pls help.

**justinbarneskin** · 07-09-2010 09:44 AM

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD><TITLE>page_2</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<STYLE type=text/CSS>

</STYLE>
<SCRIPT type="text/javascript">

</SCRIPT>
<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY scroll="auto">
	<SELECT id="s0" size=4>
		<OPTION>page one
		<OPTION>page two
		<OPTION>page three
		<OPTION>page four
		<OPTION>page five
	</SELECT>

<SCRIPT type="text/javascript">
	var inx=document.title
	inx=inx.substring(inx.indexOf('_')+1,inx.length)
	document.getElementById('s0').options[inx-1].style.backgroundColor='pink'
</SCRIPT>

</BODY></HTML>

**Webnerd** · 07-09-2010 10:50 AM

Originally Posted by justinbarneskin

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD><TITLE>page_2</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<STYLE type=text/CSS>

</STYLE>
<SCRIPT type="text/javascript">

</SCRIPT>
<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY scroll="auto">
	<SELECT id="s0" size=4>
		<OPTION>page one
		<OPTION>page two
		<OPTION>page three
		<OPTION>page four
		<OPTION>page five
	</SELECT>

<SCRIPT type="text/javascript">
	var inx=document.title
	inx=inx.substring(inx.indexOf('_')+1,inx.length)
	document.getElementById('s0').options[inx-1].style.backgroundColor='pink'
</SCRIPT>

</BODY></HTML>

What on God's earth is this code from? Offering code suggestions like this may get you beat up by any other "real" developer.

**justinbarneskin** · 07-09-2010 11:14 AM

Originally Posted by Webnerd

What on God's earth is this code from? Offering code suggestions like this may get you beat up by any other "real" developer.

Beat away, bitter web veteran. I'm not afraid.

**sfkhooper** · 07-09-2010 06:02 PM

I think my reply was more adaptable, which given the original post may have been more relevant, but it hasn't appeared

**Webnerd** · 07-10-2010 10:10 AM

Originally Posted by justinbarneskin

Beat away, bitter web veteran. I'm not afraid.

- For one, you have unclosed HTML tags = bad
- Your tags are all uppercase = bad
- Your attributes aren't quoted = bad
- You have script and style tags with no content = wtf?
- You have MSIE proprietary attributes in body tag = bad

Offering help is one thing but presenting generated garbage code is not the answer. And certainly, offers no real help to the person submitting the original post. You are setting this poor guy up for failure by even showing markup like that. It may have been acceptable circa 1998 but it is now 2010 and that is just horrible to even suggest code like that.

**justinbarneskin** · 07-10-2010 11:42 PM

Yeah well, since i found the post on page two with no replies and the question
posed cryptically, my reply is mostly a half-hearted guess. While the author of the
original post has not chimed in for more, rest assured that my effort was for my
own amusement and not to serve as a guide.

If you wish to brandish your almighty coding wisdom, be sure to answer a post before I get to it.
You'll not see me berating anything you may offer. Now, get off my back.

**sfkhooper** · 07-11-2010 01:07 AM

I would suggest that we answer posts with the authors needs in mind, not our own amusement. The original poster is indeed looking for a guide.

**Webnerd** · 07-15-2010 06:28 PM

The key in this post is that there is no information provided that explains the context of "menu". We can help but some clarification needs to be provided.

**frevda** · 07-15-2010 07:33 PM

Hi linux1880,

i assume you need the following:

make a file called highlight.js with the following code:

Code:

function extractPageName(hrefString)
{
	var arr = hrefString.split('/');
	return  (arr.length<2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();               
}

function setActiveMenu(arr, crtPage)
{
	for (var i=0; i<arr.length; i++)
	{
		if(extractPageName(arr[i].href) == crtPage)
		{
			if (arr[i].parentNode.tagName != "DIV")
			{
				arr[i].className = "current";
				arr[i].parentNode.className = "current";
			}
		}
	}
}

function setPage()
{
	hrefString = document.location.href ? document.location.href : document.location;

	if (document.getElementById("main_menu")!=null)
		setActiveMenu(document.getElementById("main_menu").getElementsByTagName("a"), extractPageName(hrefString));
}

Put this in the head of your html page:

Code:

<script type="text/javascript" src="/js/highlight.js"></script>

And this is the code for the menu itself:

HTML Code:

<div id="main_menu">
    <ul>
       <li><a href="page1.html">page1</a></li>
       <li><a href="page2.html">page2</a></li>
       <li><a href="page3.html">page3</a></li>
       <li style="background:none" class="last"><a href="page.4html">page4</a></li>
    </ul>
        <script type="text/javascript">setPage()</script>
 </div>

The css styles:

Code:

#main_menu { height: 29px; width: 94%; margin-left: 6%; text-transform:uppercase; padding-top: 6px; font-size: 13px; float: left; margin-top: 200px; }

#main_menu li {float:left; list-style-type:none; background:url(/images/menu-line.gif) no-repeat right 5px;}
#main_menu li a { text-decoration:none; color:#3c4044; padding: 0px 19px 0 19px; display:block; margin-top:3px; padding-bottom: 5px; font-weight: bold; }

#main_menu li a:hover {color: #FFF; text-decoration:none;}
#main_menu li .last { background:none;}
#main_menu li .last a { padding-right:0;}
#main_menu li .current {color:#FFF; text-decoration:none;}

The class .last is for the menu divider (as an image) and in the class .current you can set the highlight color and text-decoration.

Hope this helps you....

Grtz

Thread: How to highlight the selected menu item in javascript ?

Thread Tools

Display

How to highlight the selected menu item in javascript ?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions