Printer Friendly Version
Email this thread to a friend
|
Buying Text Links? (In: General Search Engine Optimization)
Featured Web Site Template |
|
Reflects user activity within the last 5 minutes
|
|
| Member |
Message |
jcokos
Staff
Joined: Eons Ago
# Posts: 143
|
Posted: 2004-Sep-15 16:11
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: http://www.virtualpromote.com/tools/ 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.
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 ...
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.
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 "</body>" tag, something like this:
Here is the actual "static_link" function that you're calling there, with comments to explain what it's doing.
If you go back and look at the "mover" and "moff" functions from the previous section, you'll note that we skip the mouseover and mouseoff actions if the current div ("obj")is the same as the one we're supposed to keep lit up all the time ("sobj"). "sobj" is being set in the "static_link()" function. What happens when the page loads, is this... the JavaScript determines what the name of the current page is, then it looks for the name of the div associated with that page name. If found, it turns it "on" by changing it's class name, and then sets a variable (sobj) that the other functions can reference and then know to ignore when the mouse moves over it.
Mission accomplished! We have a good looking menu that you can change at will using a stylesheet. It is active when the mouse moves over and off each of it's items. It's smart enough to know to leave the current page "lit up," and it uses text links instead of images, as well as real "href" tags to keep the search engines happy. All of our goals are achieved with a minimum of effort. All told, the JavaScript and css required to do this is well under 1k. Once you have it done, you can simply cut and past your menu "div" tags into every page of your site, and call up the .css and JavaScript remotely in your <head>. Just write your content on each page, and let this nifty menu system work it's magic all on it's own.
[ Message was edited by: jcokos 09/15/2004 08:35 am ]
|
 |
vinyl-junkie
Joined: Eons Ago
# Posts: 5
|
Posted: 2004-Sep-19 06:42
What am I missing here? Seems to me like you're making this harder than it has to be, and that you don't need javascript at all to get these effects. Use the following in your css file, then code just plain old html links.
a {
cursor:pointer;
background:#ffffff;
border:1px solid #ffffff;
font-family:verdana,arial,helvetica;
font-size:8pt;
padding-left:5px;
text-decoration: none;
}
a:hover {
cursor:pointer;
background:#e0e0e0;
border:1px ridge silver;
font-family:verdana,arial,helvetica;
font-size:8pt;
padding-left:5px;
color: red;
}
|
|
jcokos
Staff
Joined: Eons Ago
# Posts: 143
|
Posted: 2004-Sep-19 06:50
You need the javascript to make the right menu item "stick" on the right page.
Also, using CSS on just the "a" tags doesn't make for the menu to be uniform. You need to highlight the whole "div", otherwise just the actual words will light up, in actual width.
I tend to do everything with templates. I have one HTML template, and when I build the site, I have a program merge the content with the template, so I don't have to copy and past a kazillion times when I want to change something.
This gives me a way to have a single bit of menu code in a single template that is smart accross the site. All I need to do is create the content. If I want to change the whole site's look, just do the template change and bang.
This definitely could all be done manually, if you were to code each page and hard code the CSS to make the right menu item look on on the specific page, but I'm way too lazy for that.
|
|
vinyl-junkie
Joined: Eons Ago
# Posts: 5
|
Posted: 2004-Sep-19 08:32
I see what you're saying about the uniform width on highlighting links. I guess that's what I didn't catch in what you were doing.
As to your other comments, seems like you're getting a bit off the original topic, but I use a template myself. With server side include and css, changing your website's look and feel becomes a matter of just changing the template file and css file, and can be done pretty quickly even for a site with hundreds of pages.
|
|
jcokos
Staff
Joined: Eons Ago
# Posts: 143
|
Posted: 2004-Sep-19 08:52
Or tens of thousands, like we have here 
|
|
You are not permitted to post messages in this forum or topic, because of one or more of the following reasons:
- You have not yet logged in, or registered properly as a member
- You are a member, but no longer have posting rights.
- This is a private forum, for which you do not have permissions.
If you are a recent member, it's possible that you simply have not yet confirmed your account. Please
check your email for a message entitled 'JimWorld Forums: Confirm Your Account' and follow the instructions
contained within.
If you cannot find this message, click here to Re-Send it.
|
If you are still experiencing problem, please read the
Login Assistance
Article for some advice on what may be causing your login not to work properly.
|
Switch to Advanced Editor and ...
Create a New Topic
or Reply to this Thread
|
|
Inbox
