EverWeb Codebox

Breadcrumbs

Leaving A Trail…

Breadcrumbs are really useful - some would say essential - on larger sites with multi level drop down menus. They allow visitors to see at a glance exactly where they are, how they got there and how to get back to where they came from.

Although EverWeb sites will only have directories - since there is no capability for adding sub directories - there is still a case for using breadcrumbs at the top of each page. On long pages, a breadcrumb trail can be placed at the foot of the page and incorporate a back to the top function.

Here's the HTML to be pasted into a Snippet...

<ul class="trail-1">     <!--The class tells the browser which of the styles to load -->

     <li><a href="../index.html">Home &nbsp;&#9658;</a></li>

     <li><a href="index.html">Directory &nbsp;&#9658;</a></li>

     <li><a href="#">Page Name</a></li>

</ul>

HTML

In the above code, the items marked in red are the URLs to the Home page and the containing directory. The hash sign (#) is used for the actual page URL since the link doesn't go anywhere. If the breadcrumbs are placed at the bottom of a long page, this will cause the hyperlink to jump to the top. These URLs will remain the same for any page of the site that is contained in a directory.

The text in blue is the actual page or directory name which appears in the trail.

&nbsp; is an HTML space. In combination with a space using the spacebar, this will create a double space between the text and the arrow.

&#9658; is an HTML entity. These are used to create the arrows like this...

&#9658;     ►          &#10132;     ➔          &#10095;     ❯

Three different designs are shown below along with their styles and comments to allow easy customization...

<style type="text/css">

.trail-1 {

     list-style: none;

     overflow: hidden;

     font: 15px 'Trebuchet MS', Arial, Sans-Serif;}

     margin:0;

     padding:0;}

.trail-1 li {float: left; }

.trail-1 li a {

     color: #000;

     text-decoration: none;

     padding: 5px;

     background: none;

     position: relative;

     display: block;

     float: left;}

.trail-1 li a:hover {color: #0592FF}

.trail-1 li:last-child a:hover {color: #FF0000}

</style>

CSS for Trail 1

<style type="text/css">

.trail-2 {

     list-style: none;

     overflow: hidden;

     font: 15px 'Trebuchet MS', Arial, Sans-Serif;      /* font size and family */

     margin:0;

     padding:0;}

.trail-2 li {float: left; }

.trail-2 li a {

     color: #ccc;     /* text color */

     text-decoration: none;

     padding: 5px 15px;

     background: #333;      /* block background color */

     position: relative;

     display: block;

     float: left;}

.trail-2 li a:hover {color: #0592FF} /* link text rollover color */

.trail-2 li:last-child a:hover {color: #FFFFFF} /* last link text rollover color */

</style>

CSS for Trail 2

<style type="text/css">

.trail-3 {

     list-style: none;

     overflow: hidden;

     font: 15px 'Trebuchet MS', Arial, Sans-Serif;      /* font size and family with fall back fonts */

     margin:0;

     padding:0;}

.trail-3 li { float: left; }

.trail-3 li a {color: #ccc;      /* font color */

     text-decoration: none;      /* no underline */

     padding: 5px 15px;

     margin:0;

     background: #000;      /* first block background color */

     position: relative;

     display: block;

     float: left;

}

.trail-3 li:nth-child(2) a { background: #444; }     /* second block background color */

.trail-3 li:nth-child(3) a { background: #888; }      /* third block background color */

.trail-3 li a:hover {color: #0592FF}       /* link text hover color */

.trail-3 li:first-child a {padding-right:10px;border-radius: 5px 0 0 5px;-moz-border-radius: 5px 0 0 5px;-webkit-border-radius: 5px 0 0 5px;}      /* first block rounded corners */

.trail-3 li:last-child a {color: #ccc; background: #666; border-radius: 0 5px 5px 0;-moz-border-radius: 0 5px 5px 0;-webkit-border-radius: 0 5px 5px 0;}      /* last block text color, background color and rounded corners */

.trail-3 li:last-child a:hover{color: #00FF00}       /* last block link text hover color */

</style>

CSS for Trail 3

Paste the appropriate CSS into the site wide Head Code box in the site publishing settings page so that the same style can be used throughout the website.