Hi Jeff,

Sorry, but that snippet looks like a recipe for disaster.. Here's some

1/ You use <r:url /> as part of the image name. This means that, when you
have deeper-nested pages, you would get image names like
"products/cats.gif", which is not going to work. You could use <r:slug />
instead, which would only produce "cats.gif".

2/ You don't seem to understand the use of the r:navigation tag;

<r:navigation urls="Title: /news | Title: /about | Title: /contact">

It's supposed to be something like urls="Blog: /news | About us: /about |
Contact us: /contact"

3/ You use only images as content for your links. The fallback (alt
attribute) is just the url, which makes for a very poor navigation for
clients that cannot see images (think people surfing through WAP, people
with a visual handicap, and probably foremost; spider bots like google and
the like).
What you need to do is provide a text entry that makes more sense as
linktext, and then replace that text with the image you want through CSS.
You will need a unique id attribute on your <li> and/or <a> tags.

4/ Perhaps you should look into the navigation_tags extension. The <r:nav />
tag could make your life much easier.
Since you want to use images, you would want to use ids_for_links="true" or
Check the (somewhat outdated) README at
I can not provide too much details about the CSS implementation, since that
is my colleague's part of the job, but you can see a live implementation at
http://www.indewulf.be. Also notice the plethora of handy css hooks r:nav


> Hi All,
> Today is my first day building my site with Radiant -- I'm loving it!
> Once I got the basic layout, snippets, and pages implemented, I had to
> figure out my navigation bar.  It took me some tinkering, so I thought
> I'd post the results on the wiki:
> http://wiki.github.com/radiant/radiant/creating-a-ul-img-based-navigation-bar
> I'd appreciate any feedback or redirection if I did something ugly.  I
> wrestled with the wiki for a few minutes trying to figure out why
> those extra grey spaces were showing up under each code block, but I
> didn't crack the problem.
> - Jeff
Radiant mailing list
Post:   Radiant@radiantcms.org
Search: http://radiantcms.org/mailing-list/search/
Site:   http://lists.radiantcms.org/mailman/listinfo/radiant

Reply via email to