Bread Crumb Navigation - Made Simple

1-True-Love.com · 06-14-2005, 07:37 PM

Bread Crumb Navigation

Bread crumb navigation is very easy to install on a site without PHP. All you need is some css and a few div's. You will need a div to contain the while thing and one for each bread crumb. A sample one could look like this one below. We have a container called “bc” - short for bread crumb. Then we include several divs called “bcnav” - these are the navigation elements. Finally we have one called “here”. “here” is different than the others because it is the current page.

Change the “Your Site” to your site and the “Division” to the section name. Put in your own url's.

Just copy the text below into a page and change the title of “current page” for each page. Repeat for each page in that section. Upload pages.

For dynamic pages you could do a little scripting and make this work on the fly with a few variables being echoed.

Use your own colors for the text and background.

Code:

 		 		 		 		 
<div id="bc">

 		   <div id="nav">Navigation ::</div>

 		 <div class="bcnav"><a href="/"class="navlist" title="">Your-Site</a></div>

 		 <div class="bcnav"><a href="/"class="navlist" title="">Division</a></div>

 		   <div id="here">Current Page</div>

 		 <div id="map" clas="bcnav"><a href="/"class="navlist">Site Map</a></div>

 </div>

The class of “navlist” is just a class to make the links here look different than the ones on the page, so that they look correct against this color background.

Now for a little styling magic.

Code:

 # This defines the background, padding,  and such of the container.

 div#bc {

 	background: #000000;

 	padding: 3px;

 	text-align: left;

 	height:30px;

 	}

 # This defines the look of the title element – font weight, style, and color.  The last line floats them to the left.

 div#nav  {

 	color:#FFF;

 	font-weight: bold;

 	font-family: Tahoma, Verdana, Arial, sans-serif;

 	float:left;

 	}

 # This defines how the navigational elements will look.

 div#bc > div.bcnav {

 	font-weight: bold;

 	font-family: Tahoma, Verdana, Arial, sans-serif;

             margin-left: 10px;

             padding-left: 0;

             border: none;

 	text-align:left;

 	color:#fff;

 	float:left;

 	}

 # This moves the sitemap move to the right.

 div#bc > div#map {

 	float:right;

 	padding-right:10px;

 	font-weight: bold;

 	font-family: Tahoma, Verdana, Arial, sans-serif;

 	}

 # This makes the current page div look different than the rest of the navigation

 div#bc > div#here {

 	font-weight: bold;

 	font-family: Tahoma, Verdana, Arial, sans-serif;

 	color:#990;

 	padding-left: 10px;

 	float: left;

 	}

noob_0001 · 06-15-2005, 11:20 AM

Kool!