Re: nested navbar

[Kurt Sermeus <nospam@thanx>]

Frank Limpert wrote:

> Hi everyone,
> 
> As you can see under http://www.rothenstein-oelknitz.de/ and the pages 
> included therein, I made a text only navbar out of tables. Under the navbar 
> item Chronik / chronicle I located a sub-navbar. As you can see, the pointer 
> GIF, which is located in the <navbar:prolog type="S"> tag, follows the 
> selection. This works fine for the main navbar and also for the sub-navbar if 
> you see each one alone.
> But I wish to have the top menu item still marked, even when I descend down 
> into a sub-navbar. This means when I select a page under a sub-navbar item, 
> both the selected item and the main navbar item, which is the parent of it, 
> should be in selected state.
> From the documentation I guessed, the main navbar item would enter the 
> SS-state when a descendant is selected, but I was wrong.

Hi Frank,

For the new website of my gliding club (www.dac.be <http://www.dac.be>, 
beware it's still the old non-WML version that is online, sorry) I 
wanted exactly the same navbar and sub-navbar behaviour as you describe.

It took me a while to find out how to do this (after reading the 
documentation several times), but finally it works very well, at least 
with WML 2.0.8.

Here's the relevant part of my template file, with the definition of the 
<mainnavbar> and <subnavbar> tags:

<define-tag mainnavbar endtag=required>
  # 1. Definition of the mainnavbar layout
  <navbar:define name=mainnavbar urlbase=".">

    #   bar header
    <navbar:header>
      <table cellspacing=0 cellpadding=0 border=1 width=150 align=center bgcolor="#4a88be"><tr><td>
      <table cellspacing=3 cellpadding=1 border=0 align=left>
      <tr><td colspan=2 align="center"><p class="navtitle">{#AREA_TITLE#}</p></td></tr>
    </navbar:header>
    #   button prolog (normal)
    <navbar:prolog type=N>\
      <tr><td width=14 align=right><img src=$(IMGDIR)/pixtra.gif width=5 height=1></td>
      <td width="110" class=navbutton>
      &nbsp;
    </navbar:prolog>
    #   button prolog (selected)
    <navbar:prolog type=S>\
      <tr><td width=14 align=right valign=top><img src=$(IMGDIR)/arrow.gif></td>
      <td width="110" class=navbutton-s>
      &nbsp;
    </navbar:prolog>
    #   button prolog (subselected)
    <navbar:prolog type=SS>\
      <tr><td width=14 align=right valign=top><img src=$(IMGDIR)/arrow.gif></td>
      <td width="110" class=navbutton>
      &nbsp;
    </navbar:prolog>

    #   the buttons 
    %body
    
    #   button epilog (normal)
    <navbar:epilog>
          </td></tr>
    </navbar:epilog>
    #   button epilog (selected)
    <navbar:epilog type=S>\
         {#PAGE_SUBNAVBAR#}
          </td></tr>
    </navbar:epilog>
    #   button epilog (subselected)
    <navbar:epilog type=SS>
	 {#PAGE_SUBNAVBAR#}
         </td></tr>
    </navbar:epilog>

    #   bar footer
    <navbar:footer>\
      <tr><td colspan=2><font size=1>&nbsp;</font></td></tr>
      </table>
      </td></tr></table>
    </navbar:footer>

  </navbar:define>

  # 2. Rendering of the mainnavbar
  {#PAGE_MAINNAVBAR#:\
      <navbar:render name=mainnavbar select=$(page) $(nested) nohints>\
  :##}
</define-tag>

[....]

<define-tag subnavbar endtag=required>
# 1. Definition of the subnavbar layout
  <navbar:define name=%0 urlbase=".">

    #   bar header
    <navbar:header>
      <table width=80 cellspacing=0 cellpadding=0 border=0 align=center>
    </navbar:header>
    
    #   button prolog (normal)
    <navbar:prolog type=N>
      <tr><td class=menubutton>&nbsp;
    </navbar:prolog>

    #   button prolog (selected)  
    <navbar:prolog type=S>
      <tr><td class=menubutton-s>&nbsp;
    </navbar:prolog>

    #   the buttons 
    %body
    
    #   button epilog (normal)
    <navbar:epilog type=N>
      </td></tr>
    </navbar:epilog>

    #   button epilog (selected)
    <navbar:epilog type=S>
      </td></tr>
    </navbar:epilog>
  
    #   bar footer
    <navbar:footer>
      </table>
    </navbar:footer>

  </navbar:define>

  # 2. Rendering of the subnavbar
  {#PAGE_SUBNAVBAR#:\
      <br>
      <navbar:render name=%0 select=$(childpage) nohints>\
  :##}
</define-tag>

How to use this template now?
In the .wml source for a page 'stories', that is at the level of the 
main navigation bar, I include the template like this

#include  '$(ROOT)/dactemplate.wml' page=stories
For the page 'story1' that is at the level of the subnavbar, and under 
the 'story' area, I include the template like this

#include  '$(ROOT)/dactemplate.wml' page=stories  childpage=story1 nested=subselected
By using the variable `nested' to mark a button as subselected, the 
indicating arrow (the GIF file in the prolog) is kept in place at the 
selected button of the mainnavbar when you go a level lower to the 
childpage.

I hope this was clear enough.

Regards,

Kurt Sermeus


______________________________________________________________________
Website META Language (WML)                www.engelschall.com/sw/wml/
Official Support Mailing List                   sw-wml@engelschall.com
Automated List Manager                       majordomo@engelschall.com