Creating a UL & IMG based Navigation Bar

jcasimir edited this page Aug 24, 2010 · 2 revisions

Here is the snippet from the Radius tags page for navigation:

<r:navigation urls="[Title: url | Title: url | ...]">
  <r:normal><a href="<r:url />"><r:title /></a></r:normal>
  <r:here><strong><r:title /></strong></r:here>
  <r:selected><strong><a href="<r:url />"><r:title /></a></strong></r:selected>
  <r:between> | </r:between>
</r:navigation>

Here’s the code augmented to work with a UL, LI images for each link, and a little obtrusive javascript to provide mouse-over image swapping. It assumes nav images are in a subfolder “images/menu” names like “news.gif” and highlighted versions like “news-hv.gif”

<ul>
<r:navigation urls="Title: /news | Title: /about | Title: /contact">
  <r:normal>
    <li><a href="<r:url />">
      <img src="/images/menu<r:url/>.gif" alt="<r:url/>" onmouseover="javascript:this.src='/images/menu<r:url />-hv.gif'" onmouseout="javascript:this.src='/images/menu<r:url />.gif'"/>
    </a></li>
  </r:normal>
  <r:here>
    <li><a href="<r:url />">
      <img src="/images/menu<r:url/>-hv.gif" alt="<r:url/>" />
    </a></li>
  </r:here>
  <r:selected>
    <li><a href="<r:url />">
      <img src="/images/menu<r:url/>-hv.gif" alt="<r:url/>" />
    </a></li>
  </r:selected>
  <r:between></r:between>
</r:navigation>
</ul>
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.