Fog Creek Software
Discussion Board




Knowledge Base
Documentation
Terry's Tips
Darren's Tips

Highlight current page in menu?

Is there any way to make the link to the current page look different from the rest of the items in the menu? I'm working on a layout with a list of articles in the left column (very much like http://www.alligatorpoint.org/ if you want an example [that's not my site, it's just one of the "made with CityDesk" sites listed on the CityDesk homepage]). The menu list itself is easily generated with a foreach loop, but the problem is that the list is the same, regardless of which page you're currently viewing.

I would like the current page name to be bold or highlighted in some way, and ideally not be a link (since it's kind of pointless to link to the current page).

The new thisArticle (I think that's what it's called) condition seems like it should help, but I can't get it to do what I want. I can get it to omit the listing for the current page, but that gets very confusing. I think I could also get it to list the current page at the beginning or end of the list, but not where it belongs in the order - again, not exactly helpful (and I haven't actually tried this, so there might be complications).

What would seem logical to me is something like...

<ul class="menu"> {$ foreach x in (folder "Articles") $}
<li>{$ if (ThisArticle) $} <em> x.headline </em>
      {$ else $} <a href="{$ x.Link $}"> x.headline </a>
      {$ endif $} </li>
{$ next $} </ul>

Unfortunately, "If" only works with "blank" or "nonblank" (or, to put it another way, "thisArticle" only applies to "foreach"), so the above approach is DOA. Is there a way to approximate this behavior using other methods?

Martha
Tuesday, July 15, 2003

Martha - I've wanted this for a while, but it doesn't exist yet.

www.marktaw.com
Tuesday, July 15, 2003

You can approximate this behavior using Javascript and the DOM. Write a function that uses the document.getElementsByTagName method to create an array of all 'A' tags. Then use a FOR loop to test the HREF values against document.location.href -- the address of the current page. If condition is true, apply whatever styles (such as style.fontWeight='bold') you would like for the link.

You'll have to use the BODY onload= event to invoke the function, or embed the call to the script immediately below the navigation block in the page body. Either way, CityDesk's templates make it easy to insert this in all your pages.

M. C. Matti
Tuesday, July 15, 2003

It can be done with CSS.  The trick is to give each menu item an id.  You can use the filename, or one of the fields you aren't using  as the source of the id value. (IDs can't have spaces!)

Here is typical menu scripting:

{$ foreach x in (folder "Articles") $}
    <li><A id = "{$ x.filename $}" href="{$ x.link $}">{$ x.headline $}</A></li>
{$ next $}

Then, in your template you need to create your css for the id in question.  Here is that code:


<style type="text/css">
#{$ .extra1$} {
  background-color: pink;}
</style>

In this particular example, I use extra1 for the source of the ID because I have multilevel menus, but I want all the articles with .extra1 being the same to highlight the same major menu item.

Clear as mud.. but it works great

Joel Goldstick
Wednesday, July 16, 2003

clever trick, Joel.

www.marktaw.com
Wednesday, July 16, 2003

Heh. Never thought to do it with CSS. That's very clever, Joel. Thanks!

Martha
Wednesday, July 16, 2003

Good grief, in a few more days I think I'll understand it.

Not to push it too much: Might there be a way to generate the ID automatically so the user wouldn't have to think about it if he wanted to add a new article to the menu? With a date/time or something? I don't know if I understand it well enough to know if that's a good question.

tk
Wednesday, July 16, 2003

Terry,

I haven't played with it and this example could probably use some tweaking, but this is what it looks like:

you give each element in the menu a name based on it's {$x.filename$}

{$foreach x in "blah" $}

{a href="{$x.link$}" style="{$x.filename$}">{$x.headline$} <BR>

{$next$}

Then in the style sheet up top you define:

<style type="text/css">
<!--
.{$.filename$} {  font-weight: bold; text-decoration: none}
-->
</style>

So when the two match, you get that style. I'm not sure how this might break the style sheet for the rest of the "a" tags.

www.marktaw.com
Wednesday, July 16, 2003

Great idea from Joel Goldstick, but since you should only have an id appear once in any page (that's the whole idea behind an id) you might want to use class instead of id in the a-tag.

Put this in the head of the template:
<style type="text/css">
  .{$.filename$}{background-color: pink;}
</style>

Remember that file-name at this stage is YOUR filename not the filename that CD generates. That means you can't have any spaces in the name or the style will fail.

Put this in any loop or single link in the link/menu section of the template:
<a href="{$x.link$}"><span class="{$x.filename$}">{$x.headline$}</span></a>

Of course you can use other fields than headline as "screen name" for your link – this is just an example. You can view an example (in Danish) here. Several links appear more than once on each page. Click on any of the links to the left.
Great idea from Joel Goldstick, but since you should only have an id appear once in any page (that's the whole idea behind an id) you might want to use class instead of id in the a-tag.

Put this in the head of the template:
<style type="text/css">
  .{$.filename$}{background-color: pink;}
</style>

Remember that file-name at this stage is YOUR filename not the filename that CD generates. That means you can't have any spaces in the name or the style will fail.

Put this in any loop or single link in the link/menu section of the template:
<a href="{$x.link$}"><span class="{$x.filename$}">{$x.headline$}</span></a>

Of course you can use other fields than headline as "screen name" for your link – this is just an example. You can view an example (in Danish) here. Several links appear more than once on each page. Click on any of the links to the left.
http://www.baskerville.dk/Dansk/Serier/Danskopgaver.html

Jorgen Brenting
Wednesday, July 16, 2003

Sorry about the double posting above.

Jorgen Brenting
Wednesday, July 16, 2003

In my script, the ids attached to the links are all different because all different filenames.  If I have several articles which are subordinate to the main menu item, they all can have .extra1 field set the same since they aren't ids.  They just reference the id that is in the menu. 

But a good point is made about Class being for a class of tags, and an ID being for a single tag.

Glad I generated some interest

Joel Goldstick
Wednesday, July 16, 2003

I've been working on another css approach based on assigning a class to the page body. The technique has been floating around the css community devised, I think by css guru Eric Meyer.

Again menu items need to be assigned an id...

  <li id="indexbtn"><a href="PTMFOG0000000056">Home</a></li>
  <li id="concertsbtn"><a href="PTMFOG0000000123">Concerts</a></li>
  <li id="ticketsbtn"><a href="PTMFOG0000000075">Ticket Outlets</a></li>

In the template I use the filename to give a class to each page body. Like so...
<body class="{$.filename$}">

In the style sheet first define the normal behavior for menu links...

div#menu A:link    { color: black;    font: small arial, helvetica, sans-serif;}
div#menu A:visited {color: black; font:    small arial, helvetica,    sans-serif;}
div#menu A:hover {color: black;    background: #f33; font: small arial, helvetica, sans-serif;}


Then override it based on the class of that page....

body.index #indexbtn a:link, body.index #indexbtn a:visited, body.index #indexbtn  a:hover{
    background: #f33;
}

body.upcomingconcerts #concertsbtn a:link, body.upcomingconcerts #concertsbtn a:visited, body.upcomingconcerts #concertsbtn a:hover{
    background: #f33;
}

body.tickets #ticketsbtn a:link, body.tickets #ticketsbtn a:visited, body.tickets #ticketsbtn a:hover{
    background: #f33;
}

I'm using an included article for a menu but the technique could probably be adapted to script built menus as well.

Ken McKinney
Thursday, July 17, 2003

I'm starting to understand this but ... I'm not sure I can explain this nor if there is a lazy way out.

My menu has 6 links and the style thing is working fine on them. I'm having a problem with "sub" articles. For example, the "Archive" page has links to dozens of article. The sytle ID is the extra2 fields but that's not populated in the archive articles. So, I end up with a pink background for the whole page in the individual archive articles. The style thing that gets generated is

<style type="text/css">
  .{background-color: pink;}
</style>

I'm guessing this mean the page backgound is pink. That is certainly the result.

I guess I could populate extra2 in each archive article but there are so many of them.

tk
Sunday, July 20, 2003

This is what bailed me out. If there is nothing in the extra2 field, I don't do the style thing.

{$ if nonblank .extra2 $}
<style type="text/css">
  .{$.extra2$}{background-color:
    white;color:#689090;}
</style>
{$ endif $}
{$ if blank .extra2 $}
{$endif$}

http://tk-jk.net/S-K/index.html

tk
Sunday, July 20, 2003

Just wanted to thank y'all for this elegant & simple solution. Finally had a chance to try it out yesterday, and it works like a charm.

Any chance this could be added to the knowledge base/help files/tips pages?

Martha
Monday, July 28, 2003

*  Recent Topics

*  Fog Creek Home