One of the more frustrating things that I experience in designing Web sites is finding the balance between a design that's cool enough, easy enough to navigate, and yet still friendly enough for the search engines to spider correctly. One of the things that adds to the coolness factor is a fancy menu. There's lots of neat DHTML based menu systems out there, which are extremely cool, but because they're all JavaScript, they don't give the search engine spiders anything to follow. Images that highlight and change when you move your mouse over them are cool too, but they're images. This means that the search engines can follow the links, but the link itself isn't associated with any actual text, so it's random as to what the spiders do with those as far as weight or score. Further, the "mouseover" style of menu typically doesn't "stick" when you change pages... the menu looks the same no matter what you're looking at. In this article, I'd like to show you a way to build a cool menu system that "lights up" when you mouse over the menu items, that knows what page you're on (and keeps the proper menu item highlighted), and uses text instead of images to generate the links. This should serve all Webmasters quite well. It's cool, it's functional, and it's spider friendly.
To get started, take a look at the finished product, and then we can tear it apart. Browse to our Webmasters Toolkit page. Take note of the left-hand navigation menu. As you move your mouse over the items, they "light up." If you click one, when you arrive at the page, you'll notice that the menu item for that page stays lit. You'll also notice that all of the links in the menu are pure text, and they use normal "href" tags to do the linking. This meets all of our goals... now how did I do that ?
I use a combination of style sheets, JavaScript, and "div" tags to make it happen. Let's start with the basic style sheet, which defines three very important things: How I want the links to look normally ("off"), when I move my mouse over them ("over"), and when we're on their page and need to stay lit up ("on"). Essentially, the difference among them is the existence of a border and the background color.
.on {
cursor:pointer;
background:#e0e0e0;
border:1px ridge silver;
font-family:verdana,arial,helvetica;
font-size:8pt;
padding-left:5px;
}
.off {
cursor:pointer;
background:#ffffff;
border:1px solid #ffffff;
font-family:verdana,arial,helvetica;
font-size:8pt;
padding-left:5px;
}
.over {
cursor:pointer;
background:#e0e0e0;
border:1px ridge silver;
font-family:verdana,arial,helvetica;
font-size:8pt;
padding-left:5px;
}
Once I have the styles defined, I'll build the actual menu. Here are two menu items from the actual menu on the Tools site. For clarity, I've broken them down into multiple lines ...
<h3>Validators</h3>
<div id="tool_v_html"
onmouseover="mover(this)"
onmouseout="moff(this)"
onclick="toggle(this);
document.location.href='/tools/validate/'"
class="off"
>
<a class='amenu' href="/tools/validate/">HTML Validator</a>
</div>
<div id="tool_v_css"
onmouseover="mover(this)"
onmouseout="moff(this)"
onclick="toggle(this);
document.location.href='/tools/validate-css/'"
class="off"
>
<a class='amenu' href="/tools/validate-css/">CSS Validator</a>
</div>
As you can see, each of the links is a normal "href" link using text. This makes them friendly and available for the spiders to find, and to score. Also note that each of the links is enclosed within a "div" tag. The div tag has a name (id) that I can reference if I need to, and it tells the browser what to do based on my actions. When I "mouseover" the div, run the "mover()" function. When I come off the link, run the "moff()" function. When I click it, run the "toggle()" function and send me to the right URL. That's important, because people won't always click on the link (the words) -- they may click anywhere in the lit up box, so we need to account for that. All of the function calls send "this" as a parameter. The JavaScript functions use that to know that "this" means to do it's work on the "div" tag that we currently have our mouse within. The functions called above are shown below. I have commented them extensively so that you can see what it is that they're doing.
<script language="JavaScript">
// First, we need to initialize some variables so that
// the functions are able to operate on them later on.
var last_obj = '';
var set_obj = '';
var sobj = '';
/*
The "mover" function is called when the mouse is moved
over a div tag. What we do is take a look at the div
tag, make sure that it's not one that needs to be ignored
and then CHANGE IT'S CLASS NAME to the one that matches
the "look" we want when the mouse moves over it.
The "moff" function works the same way, but is called when
the mouse leaves the div tag. The toggle function basically
does the same thing as the "moff" function, but saves the
name of div that we clicked on in case we need it later on.
Note that in all of these functions, "obj" is the variable
name assigned to the "div" tag that the mouse is currently
in.
*/
function mover(obj) {
if ( obj != last_obj && obj != sobj ) {
obj.className="over";
}
}
function moff(obj) {
if ( obj != last_obj && obj != sobj ) {
obj.className="off";
}
}
function toggle(obj) {
if ( obj != last_obj && obj != sobj ) {
last_obj.className="off"
}
obj.className="on";
last_obj = obj;
}
// Other functions in here (like the one we'll introduce in the next paragraph ... //
</script>
At this point, we have two of our goals achieved. The links are done in text, not images. They light up and turn off when the mouse moves over and off of them, just like the image rollover menus that you've seen all over the place. So the "coolness" factor is there, along with the search engine friendly-ness that we need. Now, to complete the puzzle, we need to make the div tag that contains the link to the page that we're on to stay lit up, and basically ignore the mouse actions. This makes the menu "smart" and gives the user a better sense of "where am I" when looking at the page. This is where we'll make use of the names of the div tags. We'll use another JavaScript function to examine the page and make this happen. In order for this to work, you need to call this function at the very end of your HTML, right above the " |
