Fog Creek Software
Discussion Board




Knowledge Base
Documentation
Terry's Tips
Darren's Tips

Highlighting the current menu item

This has come up before, but I recently saw a question about how to highlight the link for the current page differently than for the other links.

Here is what I do.  I make my menus using unordered lists using the CityDesk scripting feature "forEach"

In my template I include the following in the head tag:

<style type="text/css">
ul#leftMenu li#{$.extra1$} a{

  /* these values are up to your styling needs */
  color: #00f;
  background-color: #f00;
}
</style>

You should pick the styling attributes according to your needs.  Just make them different than the attributes you use for your other menu items

Notice that I use "extra1" text to create a different id for each list item.  You can use the filename instead, but if you use extra1 you can have several pages (sub-menu pages probably) which all highlight the same menu item.

I just today did a restyling of my brother-in-law's site: http://www.townlinefarm.com.  He raises "Heritage turkeys".

You can see this technique in action by looking at the source code. 

By the way, the Turkey's taste great!

Joel Goldstick
Sunday, November 02, 2003

CSS does work pretty well.  I am using it on a site I am preparing right now.  Also, the sample that comes with CD2 uses CSS, so there are lots of examples there.

And.. your link didn't quite work.  It should be http://www.townlinefarm.com/

Nice page, by the way.

Jeff Kolker
Monday, November 03, 2003

Duh ! Why didn't I think of that :-).  That's much cleaner than what I've been doing.

Ken McKinney
Monday, November 03, 2003

Here is the technique from a prior forum topic.

<style type="text/css">
<!--
{$ if nonblank .sidebar $}
  .{$.sidebar$}
{background-color: #D4E2EB;}
{$ endif $}
{$ if blank .sidebar $}
{$endif$}
-->
</style>

Here is the menu script:

{$foreach x in (keywordContains "menu") $}
:  <a href="{$x.link$}"> <span class="{$x.sidebar$}">{$x.headline$}</span></a>{$next$} :

tk
Tuesday, November 04, 2003

tk :re script

The script that works for me looks like:

{$ foreach x in (folder "whateverFileName") $}
      <span id="{$ x.extra2 $}"><a href="{$ x.link$}">
{$ x.headline $}</a></span><br />
{$ next $}

If you're going to use ul [li] then the script would look like:

{$ foreach x in (folder "whateverFileName")$}
      <span id="{$ x.extra2 $}"><a href="{$ x.link$}"><li>
{$ x.headline $}</li></a></span>
      {$ .Before $}
          <ul>
    {$ after $}
          </ul>
    {$ next $}

David Mozer
Saturday, November 22, 2003

*  Recent Topics

*  Fog Creek Home