CSS3 breadcrumbs Navigation and multi-step wizard effects

Bread crumbs are used to do the current page location of the site navigation function, it represents a layer of site classification or directory-level relationships, and multi-step instructions are often used in some step-by-step process wizard applications, such as step-by-Step Registration Wizard, the goods ordering process. Today we are using CSS to make breadcrumbs and multiple-step instructions.

HTML structure is very simple, an ordered list ol, outside also <nav> package.
Breadcrumbs The structure of the navigation bar, we give Ol plus class style is:. Cd-breadcrumb, then the current position of the level Li plus class style is:.
<nav>
<ol class= "Cd-breadcrumb" >
<li><a href= "#0" > Home </a></li>
<li><a href= "#0" > Development </a></li>
<li><a href= "#0" >Web</a></li>
<li class= "Current" ><em> technology hotspot </em></li>
</ol>
</nav>
Multi-step instruction structure, we give OL plus class style is:. Cd-multi-steps, the completed step of Li Plus class style:. Visited, the current step Li plus class style:.
<nav>
<ol class= "Cd-multi-steps text-center" >
<li class= "visited" ><a href= "#0" > Shopping cart </a></li>
<li class= "visited" ><a href= "#0" > Settlement payment </a></li>
<li class= "current" ><em> shipping </em></li>
<li><em> Inspection Receipt </em></li>
</ol>
</nav>
Css
First, we use: after pseudo elements to create separator elements, is the hierarchy between the split.
. Cd-breadcrumb li::after,. cd-multi-steps Li::after {
Display:inline-block;
Content: ' \00BB ';
Margin:0 6em;
Color: #959fa5;
}
If we need to use custom delimiters, we can customize the style. Custom-separator and add styles to the <ol> elements, for example:
<nav>
<ol class= "Cd-breadcrumb custom-separator" >
<li><a href= "#0" > Home </a></li>
<li><a href= "#0" > Development </a></li>
<li><a href= "#0" >Web</a></li>
<li class= "Current" ><em> technology hotspot </em></li>
</ol>
</nav>
The style of the separator is over. Custom-separator writes this:
. Cd-breadcrumb.custom-separator Li::after,
. cd-multi-steps.custom-separator Li::after {
/* Replace the default separator with a custom icon * *
Content: ';
height:16px;
width:16px;
Background:url (.. /IMG/CD-CUSTOM-SEPARATOR.SVG) No-repeat Center Center;
Vertical-align:middle;
}
If you want to add small icons to breadcrumbs and step-by-step instructions, you can write these styles, and in this case we use SVG files for the icon processing.
. cd-breadcrumb.custom-icons li > *::before,
. cd-multi-steps.custom-icons li > *::before {
/* Add a custom icon before each item * *
Content: ';
Display:inline-block;
height:20px;
width:20px;
Margin-right:. 4em;
Margin-top: -2px;
Background:url (.. /img/cd-custom-icons-01.svg) no-repeat 0 0;
Vertical-align:middle;
}
. Cd-breadcrumb.custom-icons li:not (. Current): Nth-of-type (2) > *::before,
. Cd-multi-steps.custom-icons li:not (. Current): Nth-of-type (2) > *::before {
/* Change custom icon using image sprites * *
Background-position: -20px 0;
}
. Cd-breadcrumb.custom-icons li:not (. Current): Nth-of-type (3) > *::before,
. Cd-multi-steps.custom-icons li:not (. Current): Nth-of-type (3) > *::before {
Background-position: -40px 0;
}
. Cd-breadcrumb.custom-icons li:not (. Current): Nth-of-type (4) > *::before,
. Cd-multi-steps.custom-icons li:not (. Current): Nth-of-type (4) > *::before {
Background-position: -60px 0;
}
. cd-breadcrumb.custom-icons Li.current:first-of-type > *::before,
. cd-multi-steps.custom-icons Li.current:first-of-type > *::before {
/* Change custom icon for the current item * *
Background-position:0 -20px;
}
. Cd-breadcrumb.custom-icons Li.current:nth-of-type (2) > *::before,
. Cd-multi-steps.custom-icons Li.current:nth-of-type (2) > *::before {
Background-position: -20px-20px;
}
. Cd-breadcrumb.custom-icons Li.current:nth-of-type (3) > *::before,
. Cd-multi-steps.custom-icons Li.current:nth-of-type (3) > *::before {
Background-position: -40px-20px;
}
. Cd-breadcrumb.custom-icons Li.current:nth-of-type (4) > *::before,
. Cd-multi-steps.custom-icons Li.current:nth-of-type (4) > *::before {
Background-position: -60px-20px;
}
Of course, we can also set the triangle arrow to break the code as follows:
. Cd-breadcrumb.triangle Li::after,
. cd-breadcrumb.triangle li > *::after {
/*
Li > *::after are the colored triangle after each item
Li::after is the white separator between two items
*/
Content: ';
Position:absolute;
top:0;
left:100%;
Content: ';
height:0;
width:0;
/* 48px is the height of the <a> element * *
border:24px solid Transparent;
border-right-width:0;
border-left-width:20px;
}
. cd-breadcrumb.triangle Li::after {
/* This are the white separator between two items * *
Z-index:1;
-webkit-transform:translatex (4PX);
-moz-transform:translatex (4PX);
-ms-transform:translatex (4PX);
-o-transform:translatex (4PX);
Transform:translatex (4PX);
Border-left-color: #ffffff;
* Reset Style * *
margin:0;
}
. cd-breadcrumb.triangle li > *::after {
/* This are the colored triangle after each element * *
Z-index:2;
Border-left-color:inherit;
}
. Cd-breadcrumb.triangle Li:last-of-type::after,
. cd-breadcrumb.triangle Li:last-of-type > *::after {
* Hide the Triangle
Display:none;
}
For step-by-step instructions We can also add class such as:. Text-center,. Text-top and. Text-bottom to align the text, and you can add class such as Count to mark the number of steps, such as the following code:
<nav>
<ol class= "Cd-multi-steps text-bottom count" >
<li class= "visited" ><a href= "#0" > Shopping cart </a></li>
<li class= "visited" ><a href= "#0" > Settlement payment </a></li>
<li class= "current" ><em> shipping </em></li>
<li><em> Inspection Receipt </em></li>
</ol>
</nav>
A variety of added styles can be seen in the demo demo, our demo gives 9 different examples, view the page source code you will have a harvest