4.10 Secondary Navigation Bar

After creating the main menu, building the submenu will be very easy. First, let's replace the following lines inside lib/template.cws:

    <! Begin Submenu >
    Submenu
    <! End Submenu >

with:

    <! Begin Submenu >
    @@ site.submenu @@
    <! End Submenu >

This variable will be defined inside lib/menus.cws.

The following steps will be needed:

1. add informations about subdirectories inside lib/structure.cws;

2. modify lib/menus.cws in order to identify page subsection;

3. modify lib/menus.cws in order to create submenu and store it in variable site.submenu.

First, we must provide informations about subsections. For each section, subsections data will be stored in an array called site.NAME-OF-SECTION_sub. Array will be called site.vegetarianism_sub [ ], site.vivisection_sub [ ] and so on.

We only need the first array, since there is only one section at the moment. The following lines will be added to lib/structure.cws:

site.vegetarianism_sub [ ] = {
  { "suffering", "Animal suffering"  },
  { "health",    "Your Health"       },
  { "hunger",    "World Hunger"      },
  { "act",       "What You Can Do"   }
};

Now, to identify page subsection, we only need to add a single line in file lib/menus.cws:

if (n_tokens == 1) 
{
  /* Home Page  */
  current_section = "";   
} 
else 
{
  current_section = tokens [0];   
  current_subsec  = replace (tokens [1], ".cws", "");
}

Here, we simply take the second token of input file name, and remove the .cws extension replacing it with an empty string.

Finally, at the end of lib/menus.cws we build the submenu. Let's see again the second template HTML file created in Section 4.5:

<div id="submenu">
<!-- Begin Submenu -->
<ul>
<li><a href='../vegetarianism/suffering.html'>Animal suffering</a></li>
<li><a href='../vegetarianism/health.html'>Your Health</a></li>
<li>World Hunger</li>
<li><a href='../vegetarianism/act.html'>What You Can Do</a></li>
</ul>
<!-- End Submenu -->

This is the code we expect from the submenu displayed in page vegetarianism/hunger.html.

So let's add to lib/menus.cws the code to create the submenu.

// Create submenu
ifdef ($ ("site." + current_section + "_sub")) 
{
  site.submenu = "<ul>\n";
  subsections [ ] = $ ("site." + current_section + "_sub");
  foreach (subsec [ ] in subsections [ ]) 
  {
    if (subsec [0] == current_subsec) 
    {
      site.submenu += "<li>" + subsec [1] + "</li>\n";
    } 
    else 
    {
      site.submenu += "<li><a href='" + linkadjust () + current_section 
      + '/' + subsec [0] + ".html'>" + subsec [1] + "</a></li>\n";
    }
  }
  site.submenu += "</ul>\n";
} 
else 
{
  site.submenu = "";
}

As you can see, the whole code is enclosed in a conditional statement since home page (index.html) shouldn't display a submenu. The $ () function (see Section 9.6) is used to build the name of the array variable storing sumenu informations; then, we loop over subsections and display links.