The homepage is the most valuable real estate of a web site. Oftentimes, it is also the most viewed page that determines whether or not a user will explore further into the site.

One way to maximize the real estate of a homepage is to dynamically show and hide content. For example, one piece of content could feature information about a product and then automatically hide to show a new piece of content advertising some other part of the web site. Not only does this enable you to create more space where there once wasn’t, it also helps you to grab the attention of the user. Any type of animated content is almost always guaranteed to attract eyeballs.

Ok, I’ll admit, I’m pretty new to JavaScript and jQuery, so as a disclaimer, my coding may not be perfect or concise. With that said, I’m going to explain how to build dynamic navigation highlighting using a little JavaScript and jQuery. The first step is to explain the problem.

Most web sites that follow good usability practices will tell visitors where they are on the site. It’s kind of like that directory map in a shopping mall with the big red “YOU ARE HERE” arrow. On web sites, this is usually accomplished by highlighting or shading the navigation object that the user is currently on.