Operative Menu Item Highlight

The title doesn't say it all.

Yes, I'll show how to highlight an operative menu item. But, what is the menu item operative of?

The menu items hide and reveal certain content on the page - without the use of A tag links. I'll show you how to do that, too.

It's an integrated system.

The system is used to display certain content on the page when a certain menu item is clicked.

Here is a live example (directly from a project I'm working on):

Clicking on a menu item will reveal related content. And the menu item will be highlighted with greater-than and less-than symbols.

With short content, highlighting the menu item may not be necessary, especially with the content itself indicating the menu item that revealed it.

Yet, with a large amount of content, the reader may become uncertain about which menu item as used. Thus, the operative menu item is highlighted.

As stated, the example is from a project I am working on.

For highlighting the menu items, I had at first thought to hide and reveal the greater-than and less-than symbols with the CSS display definition. And adjust a CSS text-indent definition for alignment when the greater-than symbol was absent from the left of the menu item.

But that was a lot of work and more programming than I thought was necessary. There was no elegance.

I ended up changing the greater-than and less-than symbols' colors. White (the same as the background color) to make them invisible and black to make them visible.

Here is the complete code for the above example. Following the code, I'll talk about elements that make it work.

<div style="margin-left:50px;">

<h4 style="margin-top:0; margin-bottom:5px;">
<span id="menu1a" style="color:#ffffff;">&gt;</span> 
<span style="color:blue; cursor:pointer;" 
      onclick="RevealViewEntriesContent()">View Entries</span> 
<span id="menu1b" style="color:#ffffff;">&lt;</span></h4>

<h4 style="margin-top:0; margin-bottom:5px;">
<span id="menu2a" style="color:#ffffff;">&gt;</span> 
<span style="color:blue; cursor:pointer;" 
      onclick="RevealDownloadEntriesContent()">Download Entries</span> 
<span id="menu2b" style="color:#ffffff;">&lt;</span></h4>

<h4 style="margin-top:0; margin-bottom:5px;">
<span id="menu3a" style="color:#ffffff;">&gt;</span> 
<span style="color:blue; cursor:pointer;" 
      onclick="RevealPurgeDuplicatesContent()">Purge Duplicates</span> 
<span id="menu3b" style="color:#ffffff;">&lt;</span></h4>

</div>

<div id="viewdata" style="display:none;">
<h3>View Entries</h3>
<p>
A section with a form for viewing entries.
</p>
</div>

<div id="downdata" style="display:none;">
<h3>Download Entries</h3>
<p>
A section with a form for downloading entries.
</p>
</div>

<div id="purgedata" style="display:none;">
<h3>Purge Duplicates</h3>
<p>
A section with a form for purging duplicate entries.
</p>
</div>

<script type="text/javascript">
function UnrevealAllContentAndSymbols()
{
	document.getElementById("menu1a").style.color = "#ffffff";
	document.getElementById("menu2a").style.color = "#ffffff";
	document.getElementById("menu3a").style.color = "#ffffff";
	document.getElementById("menu1b").style.color = "#ffffff";
	document.getElementById("menu2b").style.color = "#ffffff";
	document.getElementById("menu3b").style.color = "#ffffff";
	document.getElementById("viewdata").style.display = "none";
	document.getElementById("downdata").style.display = "none";
	document.getElementById("purgedata").style.display = "none";
}

function RevealViewEntriesContent()
{
	UnrevealAllContentAndSymbols();
	document.getElementById("menu1a").style.color = "#000000";
	document.getElementById("menu1b").style.color = "#000000";
	document.getElementById("viewdata").style.display = "block";
}

function RevealDownloadEntriesContent()
{
	UnrevealAllContentAndSymbols();
	document.getElementById("menu2a").style.color = "#000000";
	document.getElementById("menu2b").style.color = "#000000";
	document.getElementById("downdata").style.display = "block";
}

function RevealPurgeDuplicatesContent()
{
	UnrevealAllContentAndSymbols();
	document.getElementById("menu3a").style.color = "#000000";
	document.getElementById("menu3b").style.color = "#000000";
	document.getElementById("purgedata").style.display = "block";
}
</script>

To use the example, paste the above code into the source code of a web page. Then tweak the code until it functions the way you need it to for your implementation.

It may be desirable to read the next section for better understanding of how it works. Tweaking the code can then be done with more confidence.

How It Works

The Menu Items —

Let us take apart one of the menu items to see how each part works.

<h4 style="margin-top:0; margin-bottom:5px;">
<span id="menu1a" style="color:#ffffff;">&gt;</span> 
<span style="color:blue; cursor:pointer;" 
      onclick="RevealViewEntriesContent()">View Entries</span> 
<span id="menu1b" style="color:#ffffff;">&lt;</span></h4>

The menu item is in an h4 tag (above in red). Any container tag may be used. The h4 tag has CSS margin definitions to specify exactly how far apart the menu items shall be published.

The greater-than symbol (above in the first green area) is in a span tag with both an id and a style. The id is unique on the page, "menu1a". The style specifies a CSS color #ffffff definition (white), the same color as the page background color to make the greater-than symbol invisible. The id is used by the JavaScript when changing the symbol's color from white to black and the reverse.

The less-than symbol (above in the second green area) is in a span tag with its own unique id, "menu1b". The style is the same as the style for the greater-than symbol.

Now, let's look at the blue area, the span tag for the menu item itself. There is a style attribute and an onclick attribute.

The style attribute specifies a color for the text and a pointer for the mouse cursor. The pointer is the cursor expected when hovering over a link.

The onclick attribute specifies which function to run when the menu item is clicked.

The style attribute and the onclick attribute together function like an A tag is expected to function when it is clicked. (See the Linking Without an "A" Tag Willmaster Library article for more information about using span or other tags in lieu of A tags – and learn about reasons for doing so.)

The Individual Content Divs —

Following the menu items in the code for the above example are the divs containing the content relevant to the individual items. Let's take one apart.

<div id="viewdata" style="display:none;">
<h3>View Entries</h3>
<p>
A section with a form for viewing entries.
</p>
</div>

Each div containing content for a specific menu item is within a div tag containing a unique id value and a CSS definition display:none; (above in red). The id is used by the JavaScript when changing the div's display attribute from "none" to "block," and the reverse.

The JavaScript —

When one of the menu items is clicked, the JavaScript does these two steps:

1. Un-display all individual menu item content divs and make all greater-than and less-than symbols the same color as the background.

   Doing it that way is less coding and the code may run faster than testing each individual div's display value and each symbols color value and changing only the ones that need changing.

2. Reveal the content in the div for the clicked menu item and color the menu item's greater-than and less-than symbols black.

Use the system to display certain content on the page when a certain menu item is clicked. The content can be any content that can be published on a web page.

Will Bontrager