RPG Navigation


This is an early site navigation I wrote in PHP and HTML for one of my sites. It is NOT the navigation that I currently use on these pages, although it is the basis for the dev.hackwater.net navigation. I suppose it would be the evolutionary parent of the later design. It isn't particularly dynamic, other than the fact that each individual page in the site has exactly the same navigation, and the server takes care of hiding and displaying subsections.

If the CSS used to style the navigation fails, it fails gracefully; the entire menu appears as a bulleted list below the content, effectively turning it into a site map for older browsers and screen readers. No actual content is shown here; for a demonstration of a similar navigation with some content, see dev.hackwater.net, although since I use navigation on the top and the bottom, the navigation won't appear just on the bottom for the unstyled page. To view the page unstyled in Firefox go to the top tool bar and select View > Page Style > No Style, but be sure to set it back to the original setting to re-enable styles.

Unless I made an error transcribing this to HTML, you should be able to copy and paste the text as you see it into a blank file, and as long as you save it in a file format your webserver recognizes as executable PHP, it should give you the same functionality.

<div id="navigation">
<h2>Site Map</h2>
<div class="center">
<img src="/pics/trans_compass.gif" alt="Compass" height="117" width="116"></img>
</div>
<ul>
  <li><a<?php if ($thisPage=="Home") echo " class=\"here\""; ?>
href="/">7th Sea RPG Home</a></li>
  <li><a<?php if ($thisPage=="Avalon") echo " class=\"here\""; ?>
href="/avalon/">Avalon: Blood and Water</a>
  <ul<?php
   
// strpos function determines whether the page
    // identifier ($thisPage) contains the word Avalon and
    // determines the CSS class accordingly strpos is used
    // throughout the PHP code to search for keywords
    // All the Avalon pages contain the keyword Avalon, and
    // all the Gates pages contain the keyword Gates. Further,
    // all the Character pages within each section contain
    // the keyword Char; therefore, when in the character main
    // page or in a specific character page (or even within a
    // page within the specific character page), the entire
    // character tree for that section will be exploded. The
    // same applies for the articles section.
    // Other use for $thisPage identifier is to highlight the
    // selected page link in the menu.
   
$pos = strpos($thisPage, 'Avalon');
    if (
$pos !== false) {
       echo
" class=\"indent\"";
    } else {
       echo
" class=\"hideme\"";
    }
   
?>
>
    <li><a<?php if ($thisPage=="AvalonCharacters") echo " class=\"here\""; ?>
href="/avalon/characters/">Characters</a>
      <ul<?php
          $pos
= strpos($thisPage, 'Char');
          if (
$pos === false) {
              echo
" class=\"hideme\"";
          }
         
?>
>
        <li><a<?php if ($thisPage=="AvalonCharLeila") echo " class=\"here\""; ?>
href="/avalon/characters/leila/">Leila</a>
        <ul<?php
            $pos
= strpos($thisPage, 'Leila');
            if (
$pos === false) {
                echo
" class=\"hideme\"";
            }
           
?>
>
            <li><a<?php if ($thisPage=="AvalonCharLeilaBackground") echo " class=\"here\""; ?>
href="/avalon/characters/leila/background.dhtml">Background</a></li>
            <li><a<?php if ($thisPage=="AvalonCharLeilaTree") echo " class=\"here\""; ?>
href="/avalon/characters/leila/tree.dhtml">Family Tree</a></li>
          </ul>
        </li>
        <li><a<?php if ($thisPage=="AvalonCharKenneth") echo " class=\"here\""; ?>
href="/avalon/characters/kenneth/">Kenneth</a></li>
        <li><a<?php if ($thisPage=="AvalonCharBethany") echo " class=\"here\""; ?>
href="/avalon/characters/bethany/">Bethany</a></li>
        <li><a<?php if ($thisPage=="AvalonCharLaurent") echo " class=\"here\""; ?>
href="/avalon/characters/laurent/">Laurent</a>
        <ul<?php
            $pos
= strpos($thisPage, 'Laurent');
            if (
$pos === false) {
                echo
" class=\"hideme\"";
            }
           
?>
>
            <li><a<?php if ($thisPage=="AvalonCharLaurentJournal") echo " class=\"here\""; ?>
href="/avalon/characters/laurent/journal.dhtml">First Entry</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a<?php if ($thisPage=="AvalonArticles") echo " class=\"here\""; ?>
href="/avalon/articles/">Articles</a>
      <ul<?php
          $pos
= strpos($thisPage, 'Art');
          if (
$pos === false) {
              echo
" class=\"hideme\"";
          }
         
?>
>
        <li><a<?php if ($thisPage=="AvalonArtRules") echo " class=\"here\""; ?>
href="/avalon/articles/rules.dhtml">Rules</a></li>
        <li><a<?php if ($thisPage=="AvalonArtQuotes") echo " class=\"here\""; ?>
href="/avalon/articles/quotes.dhtml">Quotes</a></li>
        <li><a<?php if ($thisPage=="AvalonArtMaps") echo " class=\"here\""; ?>
href="/avalon/articles/mackenna.dhtml">Maps</a>
          <ul<?php
            $pos
= strpos($thisPage, 'Maps');
            if (
$pos === false) {
                echo
" class=\"hideme\"";
            }
           
?>
>
            <li><a<?php if ($thisPage=="AvalonArtMapsLeicester") echo " class=\"here\""; ?>
href="/avalon/articles/leicester.dhtml">Leicester</a></li>
            <li><a<?php if ($thisPage=="AvalonArtMapsCastle") echo " class=\"here\""; ?>
href="/avalon/articles/castle.dhtml">Castle</a></li>
            <li><a<?php if ($thisPage=="AvalonArtMapsVillage") echo " class=\"here\""; ?>
href="/avalon/articles/village.dhtml">Village</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  </li>
  <li><a<?php if ($thisPage=="Gates") echo " class=\"here\""; ?>
href="/gates/">City of Seven Gates</a>
  <ul<?php
      $pos
= strpos($thisPage, 'Gates');
      if (
$pos !== false) {
         echo
" class=\"indent\"";
      } else {
         echo
" class=\"hideme\"";
      }
     
?>
>
      <li><a<?php if ($thisPage=="GatesCharacters") echo " class=\"here\""; ?>
href="/gates/characters/">Characters</a>
        <ul<?php
            $pos
= strpos($thisPage, 'Char');
            if (
$pos === false) {
                echo
" class=\"hideme\"";
            }
           
?>
>
          <li><a<?php if ($thisPage=="GatesCharLisette") echo " class=\"here\""; ?>
href="/gates/characters/lisette/">Lisette</a>
          <ul<?php
              $pos
= strpos($thisPage, 'Lisette');
              if (
$pos === false) {
                  echo
" class=\"hideme\"";
              }
             
?>
>
              <li><a<?php if ($thisPage=="GatesCharLisetteJournal") echo " class=\"here\""; ?>
href="/gates/characters/lisette/journal.dhtml">First Entry</a></li>
          </ul>
        </li>
          <li><a<?php if ($thisPage=="GatesCharRoberto") echo " class=\"here\""; ?>
href="/gates/characters/roberto/">Roberto</a></li>
          <li><a<?php if ($thisPage=="GatesCharDuncan") echo " class=\"here\""; ?>
href="/gates/characters/duncan/">Duncan</a></li>
          <li><a<?php if ($thisPage=="GatesCharSven") echo " class=\"here\""; ?>
href="/gates/characters/sven/">Sven</a></li>
        </ul>
      </li>
      <li><a<?php if ($thisPage=="GatesArticles") echo " class=\"here\""; ?>
href="/gates/articles/">Articles</a>
        <ul<?php
            $pos
= strpos($thisPage, 'Art');
            if (
$pos === false) {
                echo
" class=\"hideme\"";
            }
           
?>
>
          <li><a<?php if ($thisPage=="GatesArtMedal") echo " class=\"here\""; ?>
href="/gates/articles/medallion.dhtml">Medallion</a></li>
          <li><a<?php if ($thisPage=="GatesArtMaps") echo " class=\"here\""; ?>
href="/gates/articles/hammad.dhtml">Map</a></li>
          <li><a<?php if ($thisPage=="GatesArtQuotes") echo " class=\"here\""; ?>
href="/gates/articles/quotes.dhtml">Quotes</a></li>
        </ul>
      </li>
  </ul>
</li>
</ul>
</div>

Latest poll

Which do you favor?

Choices

Twitter