Outline Friendly Menus with JAK

Building a site is only the first step in a long process of sharing your content with others. This post takes a content-centric point of view to make it easy for search engines to outline your pages more easily.

Hello all and welcome to the first post of this blog dedicated to JAK. Often when you search for sites in popular search engines you will see not only a linked title and description, but also a series of links below to the popular menu sections. There are a varity of ways to make it easier for search engine bots to read your page, however an important aspect for bots is that each individual page can be read similair to an outline.

It is through these outlines that the search engine bots determine what the author considers a higher and lower importance. Certainly one of those key items that is important to nearly all sites are the navigation menus. Unfortunatly most sites do not take advantage of outlining their sites for the bots to understand their mind set leading to ambiguity and important information being lost in translation. Below is a technique to add your sites menu to that outline as opposed to letting the bot absorbing it as content to be appended to the body of the site or some unrelated division.

First make your html outline:

<ul class="menulist">

<li><h3><a href="1.html">Menu Item 1</a></h3></li>

<li><h3><a href="2.html">Menu Item 2</a></h3></li>

<li><h3><a href="3.html">Menu Item 3</a></h3></li>

</ul>

Now this may not be the prettiest format for a site, but the search engines will love it. So lets add a layer presentation via CSS to remove the bullets and clean up the presentation a bit:

.menulist{

list-style: none;

margin: 0px;

padding: 0px;

}

.menulist li h3{

font-size: 10pt;

}

.menuitemout{

border: 1px solid #FFFFFF;

background-color: #FFFFFF;

}

.menuitemover{

border: 1px solid #637478;

background-color: #C5D7DB;

}

Now make your next layer of presentation with some dynamic Javascript with the help of the JAK framework it is only a few lines:

function MenuListOver(){ API.ClassAdd(this,'menuitemover'); }

function MenuListOut(){ API.ClassRemove(this,'menuitemover');}

function MenuListBuild(){

var o = arguments[0];

if(API.TypeOf(arguments[0]) == 'object'){

var L = o.getElementsByTagName('li');

for(var a = 0; a < L.length; a++){

if(L[a].id == ''){ L[a].id = 'menulist_item_'+a; }

API.ClassAdd(L[a],'menuitemout');

API.EventListenerAdd( L[a], 'mouseout', MenuListOut );

API.EventListenerAdd( L[a], 'mouseover',MenuListOver);

}

}

}

function MenuListBuildAuto(){

var L = API.GetElementByClass('menulist');

for(var a = 0; a < L.length; a++){ MenuListBuild(L[a]); }

}

Now you have accomplished a nice roll over effect on your web browser for your website that is cross browser supported and degrades gracefully.

---- 

Update 9/29/2008: As noted by one of my co-workers, you should encapsulate the section headign in an H2 tag, therefore each menu item should be an h3 entry. Thanks Michael Adams!