Dynamic Drive CSS Library- CSS checkout style breadcrumbs

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

CSS Library: Other: Here

CSS checkout style breadcrumbs

Author: Dynamic Drive

The following CSS turns a UL list into a checkout style breadcrumbs interface. Good for ecommerce checkout or an unconventional site breadcrumb trail. Three "stages" are supported, with the presence (or lack) of a specific CSS class inside each LI:

"completed": Gives the LI a green background with :hover style to indicate this step has been completed. Assumes a A child element inside.
"completing": Gives the LI a green background with NO :hover style to indicate this step is currently being completed. Assumes a SPAN child element inside.
No CSS class: Gives the LI a default gray background with NO :hover style to indicate this step has yet to be completed. Assumes a SPAN child element inside.

The interface is relatively bullet proof and mobile friendly, transforming into vertical stack of breadcrumbs on small screen devices.

Demo:

Order
Billing
Address
Summary

Order
Billing
Address
Summary

As you can see in the 2nd demo below, you can also add an icon font inside each stage label to provide additional visual cues about each stage. Icon fonts courtesy of IcoMoon.

The CSS:

<style>

.dotbreadcrumb{
  margin: 0;
  padding: 0;
  font-size: 10px; /* adjust font size to scale bread crumb interface */
  list-style: none;
}

.dotbreadcrumb li{
  display: inline-block;
  position: relative;
  margin-top: 1em; /* margin between LIs, especially when multi-lined */
}


.dotbreadcrumb li a, /* style for each label, which could be a A or SPAN element inside LI */
.dotbreadcrumb li > span
{
  text-decoration: none;
  color: black;
	display: block;
  position: relative;
  background: #eee; /* background color of rectangle label */
  padding: 0.5em 1em;
  font-size: 1.4em; /* font size of label text */
  margin-right: 65px; /* length of connecting line */
  border-radius: 2px;
}


.dotbreadcrumb li a:after,
.dotbreadcrumb li > span:after
{
  content: '';
  width: 70px; /* length of connecting line (margin-right value above) + 5px */
  height: .6em; /* height of connecting line */
  position: absolute;
  background: #eee;
  left: 100%;
  top: 50%; /* vertically center line */
  margin-top: -.3em; /* vertically center line (1/2 "height" value) */
  z-index: -1;
}

.dotbreadcrumb li:last-of-type a,
.dotbreadcrumb li:last-of-type > span
{
	margin-right: 0;
}

.dotbreadcrumb li:last-of-type a:after,
.dotbreadcrumb li:last-of-type > span:after
{
  content: none; /* remove connecting line for last label */
}


.dotbreadcrumb li.completed a, /* style for li.completed and li.completing class. Former should contain A, later should contain SPAN element */
.dotbreadcrumb li.completing > span
{
  background: #9ec941; /* completed label background color */
	color: white;
}


.dotbreadcrumb li.completed a:hover{
	color: white;
	background: black;
}

.dotbreadcrumb li.completed a:after{
  background: #9ec941; /* completed label connecting line color */
}

.dotbreadcrumb li.completed >span:after{
  background: #eee; /* completing label connecting line color */
}

@media screen and (max-width: 450px) { /* Small screen devices- make each LI occupy entire width of container */ 
	.dotbreadcrumb li{
		display: block;
	}

	.dotbreadcrumb li:last-of-type a,
	.dotbreadcrumb li:last-of-type > span
	{
		margin-right: 65px;
	}
}

/* ############ IcoMoon checkbox style ############ */

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?maaq96');
	src:url('fonts/icomoon.eot?#iefixmaaq96') format('embedded-opentype'),
		url('fonts/icomoon.ttf?maaq96') format('truetype'),
		url('fonts/icomoon.woff?maaq96') format('woff'),
		url('fonts/icomoon.svg?maaq96#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-cancel-circle:before {
	content: "\e604";
	margin-right: 6px;
}
.icon-checkmark-circle:before {
	content: "\e600";
	margin-right: 6px;
}

</style>

The above code references two icon fronts from Icomoon, served up via 4 CSS font files inside the "fonts/" sub directory. Download the following file and extract to the same directory as the current page.

The HTML:

<ul class="dotbreadcrumb">
	<li class="completed"><a href="http://dynamicdrive.com/#step1">Order</a></li>
	<li class="completed"><a href="http://dynamicdrive.com/#step2">Billing</a></li>
	<li class="completing"><span>Address</span></li>
	<li><span>Summary</span></li>
</ul>


<ul class="dotbreadcrumb">
	<li class="completed"><a href="http://dynamicdrive.com/#step1"><span class="icon-checkmark-circle"></span>Order</a></li>
	<li class="completed"><a href="http://dynamicdrive.com/#step2"><span class="icon-checkmark-circle"></span>Billing</a></li>
	<li class="completing"><span>Address</span></li>
	<li class="completed"><span><span class="icon-cancel-circle"></span>Summary</span></li>
</ul>

Code Info

Rate this code:

Date Posted: 09/24/2015

Revision History: None

Usage Terms: Click here