Please note: This site has been replaced with a newer version. It remains here for historical reference only.

Navigation systems

Sections (css not complete)

  1. <ul class="sections">
  2. <li><a id="s0" href="#">{title}</a></li>
  3. <li><a id="s1" href="#">{title}</a></li>
  4. <li><a id="s2" href="#">{title}</a></li>
  5. <li><a id="s3" href="#">{title}</a></li>
  6. <li><a id="s4" href="#">{title}</a></li>
  7. </ul>

Table of contents

Ancestors

Home » Fruit » Apples » Braeburn

  1. <p class="ancestors">
  2. <a class="root" href="{link}">{title}</a>
  3. <span class="seperator root"> » </span>
  4. <a href="{link}">{title}</a>
  5. <span class="seperator"> » </span>
  6. <strong class="current">{title}</strong>
  7. </p>

Table of contents

Table of contents

On this page
  1. <dl id="toc" class="toc">
  2. <dt>On this page</dt>
  3. <dd>
  4. <ul>
  5. <li><a href="#a1">{item}</a></li>
  6. <li><a href="#a2">{item}</a></li>
  7. <li><a href="#a3">{item}</a></li>
  8. <li><a href="#a4">{item}</a></li>
  9. <li><a href="#a5">{item}</a></li>
  10. </ul>
  11. </dd>
  12. </dl>

Top

Table of contents

  1. <p><a class="to-top" href="#toc">Top</a></p>

Parent

Apples
  1. <a class="parent" href="#">Apples</a>

Table of contents

Siblings

  1. <ul class="siblings">
  2. <li><a href="#">Red delicious</a></li>
  3. <li><a href="#">Golden delicious</a></li>
  4. <li><a href="#">Granny Smith</a></li>
  5. <li><strong>Braeburn</strong></li>
  6. <li><a href="#">Gala</a></li>
  7. </ul>

Table of contents

Parent and siblings

Apples
  1. <dl class="parent-siblings">
  2. <dt><a class="parent" href="#">Apples</a></dt>
  3. <dd>
  4. <ul class="siblings">
  5. <li><a href="#">Red delicious</a></li>
  6. <li><a href="#">Golden delicious</a></li>
  7. <li><a href="#">Granny Smith</a></li>
  8. <li><strong>Braeburn</strong></li>
  9. <li><a href="#">Gala</a></li>
  10. </ul>
  11. </dd>
  12. </dl>

Table of contents

Paged (css not complete)

Page 1 of 20

  1. <div class="paged">
  2. <p>Page 1 of 20</p>
  3. <ul>
  4. <li><a class="first" href="#">First</a></li>
  5. <li><a class="previous" href="#">Previous</a></li>
  6. <li><a href="#">1</a></li>
  7. <li><a href="#">2</a></li>
  8. <li><strong>3</strong></li>
  9. <li><a href="#">4</a></li>
  10. <li><a href="#">5</a></li>
  11. <li><a class="next" href="#">Next</a></li>
  12. <li><a class="last" href="#">Last</a></li>
  13. </ul>
  14. </div>

Table of contents

Categories

Categories
  1. <dl class="categories">
  2. <dt>Categories</dt>
  3. <dd>
  4. <ul>
  5. <li><a href="#">{item}</a></li>
  6. </ul>
  7. </dd>
  8. </dl>

Table of contents

Tags

Tags
  1. <dl class="tags">
  2. <dt>Tags</dt>
  3. <dd>
  4. <ul>
  5. <li><a href="#">{item}</a></li>
  6. </ul>
  7. </dd>
  8. </dl>

Table of contents

Related links
  1. <dl class="related">
  2. <dt>Related links</dt>
  3. <dd>
  4. <ul>
  5. <li><a href="#">{item}</a></li>
  6. </ul>
  7. </dd>
  8. </dl>

Table of contents

Children

Grow your own Braeburn
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sed velit vel odio cursus consequat. Nam at est. Vivamus lacinia felis eu neque. Morbi ac mi. Pellentesque interdum nisi. Aenean pretium porta lectus. Nunc nisl. Aenean interdum quam id massa. In aliquam commodo massa. Maecenas a risus. Morbi tempor. Aliquam erat volutpat. Pellentesque placerat, turpis sed vulputate auctor, sem tellus hendrerit massa, ut imperdiet nulla est lacinia orci. Mauris a ligula id ante volutpat eleifend. Pellentesque nec quam ut mauris sollicitudin euismod. Phasellus ac ligula.
Cider from your garden apples
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sed velit vel odio cursus consequat. Nam at est. Vivamus lacinia felis eu neque. Morbi ac mi. Pellentesque interdum nisi. Aenean pretium porta lectus. Nunc nisl. Aenean interdum quam id massa. In aliquam commodo massa. Maecenas a risus. Morbi tempor. Aliquam erat volutpat. Pellentesque placerat, turpis sed vulputate auctor, sem tellus hendrerit massa, ut imperdiet nulla est lacinia orci. Mauris a ligula id ante volutpat eleifend. Pellentesque nec quam ut mauris sollicitudin euismod. Phasellus ac ligula.
What to do about worms
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sed velit vel odio cursus consequat. Nam at est. Vivamus lacinia felis eu neque. Morbi ac mi. Pellentesque interdum nisi. Aenean pretium porta lectus. Nunc nisl. Aenean interdum quam id massa. In aliquam commodo massa. Maecenas a risus. Morbi tempor. Aliquam erat volutpat. Pellentesque placerat, turpis sed vulputate auctor, sem tellus hendrerit massa, ut imperdiet nulla est lacinia orci. Mauris a ligula id ante volutpat eleifend. Pellentesque nec quam ut mauris sollicitudin euismod. Phasellus ac ligula.
  1. <dl class="children">
  2. <dt><a href="{link}">{title}</a></dt>
  3. <dd>{description}</dd>
  4. </dl>

Table of contents

Children (basic)

  1. <ul class="children">
  2. <li><a href="{link}">{title}</a></li>
  3. </ul>

Table of contents

Context nav

  1. <div class="context-nav">
  2. <ul>
  3. <li><a class="home" href="index.php">Home</a>
  4. <ul>
  5. <li><a href="fruit.php">Fruit</a>
  6. <ul>
  7. <li class="current"><strong>Apples</strong>
  8. <ul>
  9. <li><a href="braeburn.php">Braeburn</a></li>
  10. <li><a href="granny-smith.php">Granny smith</a></li>
  11. <li><a href="golden-delicious.php">Golden delicious</a></li>
  12. </ul>
  13. </li>
  14. <li><a href="oranges.php">Oranges</a></li>
  15. <li><a href="cherries.php">Cherries</a></li>
  16. <li><a href="pears.php">Pears</a></li>
  17. <li><a href="grapes.php">Grapes</a></li>
  18. </ul>
  19. </li>
  20. <li><a href="vegetables.php">Vegetables</a></li
  21. <li><a href="sitemap.php">Sitemap</a></li>
  22. <li><a href="atoz.php">A to Z</a></li>
  23. <li><a href="about.php">About</a></li>
  24. <li><a href="contact.php">Contact</a></li>
  25. </ul>
  26. </li>
  27. </ul>
  28. </div>

Sitemap

  1. <ul class="sitemap xoxo">
  2. <li><a href="{link}" title="{description}">{title}</a>
  3. <ul>
  4. <li><a href="{link}" title="{description}">{title}</a></li>
  5. </ul>
  6. </li>
  7. <li><strong class="current">{title}</strong></li>
  8. </ul>

Table of contents

A to Z

  1. <ul class="atoz xoxo">
  2. <li id="{firstletter}">{firstletter}
  3. <ul>
  4. <li><a href="{link}" title="{description}">{title}</a></li>
  5. </ul>
  6. </li>
  7. </ul>

Table of contents

Menu title
  1. <dl class="menu">
  2. <dt><a href="{link}">{title}</a></dt>
  3. <dd>
  4. <p>{description}</p>
  5. </dd>
  6. </dl>

Table of contents

Promo (css not complete)

Snappy title and link

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh augue, dictum semper, blandit quis, facilisis sagittis, tortor.

  1. <dl class="promo">
  2. <dt><a href="{link}">{title}</a></dt>
  3. <dd>
  4. <p>{description}</p>
  5. </dd>
  6. </dl>

Table of contents

Your link text (external link)
  1. <a href="#" class="external">Your link text
    <span> (external link)</span>
    </a>

Table of contents

Utilities

  1. <ul class="utilities">
  2. <li><a class="u1" href="#">Edit</a></li>
  3. <li><a class="u2" href="#">Discussion</a></li>
  4. <li><a class="u3" href="#">Delete</a></li>
  5. </ul>

Table of contents