Apex Class:
public class BreadCrum {
public boolean renderSection1 {get;set;}
public boolean renderSection2 {get;set;}
public boolean renderSection3 {get;set;}
public BreadCrum () {
renderSection1 = true;
renderSection2 = false;
renderSection3 = false;
}
public void displaySection1() {
renderSection1 = true;
renderSection2 = false;
renderSection3 = false;
}
public void displaySection2() {
renderSection1 = false;
renderSection2 = true;
renderSection3 = false;
}
public void displaySection3() {
renderSection1 = false;
renderSection2 = false;
renderSection3 = true;
}
}
Visualforce Page:
<apex:page Id="genericPageId" sidebar="false" controller="BreadCrum">
<apex:form id="form1">
<script language='JavaScript1.2' src='/js/functions.js'></script>
<script src='/soap/ajax/9.0/connection.js' type='text/javascript'></script>
<script id='clientEventHandlersJS' language='javascript'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
function colorPageBlock(pageblock, color) {
if (pageblock != null) pageblock.firstChild.style.cssText = "background-color: " + color + ";";
}
function displaySection1() {
renderSection1();
}
function displaySection2() {
renderSection2();
}
function displaySection3() {
renderSection3();
}
function toggleClass(el){
var kids = document.getElementById('menu1').children;
for(var i = 0; i < kids.length; i++){
kids[i].className = "inActive";
}
el.className = "active";
}
</script>
<style>
.clsCenter{
text-align:center;
}
.inActive {
background: white;
color: black;
transition: all 0.5s;
}
/*custom font*/
@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans);
* {margin: 0; padding: 0;}
html, body {min-height: 100%;}
.breadcrumb {
/*centering*/
display: inline-block;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
overflow: hidden;
border-radius: 5px;
/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
counter-reset: flag;
}
.breadcrumb a {
text-decoration: none;
outline: none;
display: block;
float: left;
font-size: 12px;
line-height: 36px;
color: white;
/*need more margin on the left of links to accomodate the numbers*/
padding: 0 10px 0 60px;
background: #666;
background: linear-gradient(#666, #333);
position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child {
padding-left: 46px;
border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
}
.breadcrumb a:first-child:before {
left: 14px;
}
.breadcrumb a:last-child {
border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
padding-right: 20px;
}
/*hover/active styles*/
.breadcrumb a.active, .breadcrumb a:hover{
background: #333;
background: linear-gradient(#333, #000);
}
.breadcrumb a.active:after, .breadcrumb a:hover:after {
background: #333;
background: linear-gradient(135deg, #333, #000);
}
/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a:after {
content: '';
position: absolute;
top: 0;
right: -18px; /*half of square's length*/
/*same dimension as the line-height of .breadcrumb a */
width: 36px;
height: 36px;
/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's:
length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
if diagonal required = 1; length = 1/1.414 = 0.707*/
transform: scale(0.707) rotate(45deg);
/*we need to prevent the arrows from getting buried under the next link*/
z-index: 1;
/*background same as links but the gradient will be rotated to compensate with the transform applied*/
background: #666;
background: linear-gradient(135deg, #666, #333);
/*stylish arrow design using box shadow*/
box-shadow:
2px -2px 0 2px rgba(0, 0, 0, 0.4),
3px -3px 0 2px rgba(255, 255, 255, 0.1);
/*
5px - for rounded arrows and
50px - to prevent hover glitches on the border created using shadows*/
border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.breadcrumb a:last-child:after {
content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb a:before {
content: counter(flag);
counter-increment: flag;
/*some styles now*/
border-radius: 100%;
width: 20px;
height: 20px;
line-height: 20px;
margin: 8px 0;
position: absolute;
top: 0;
left: 30px;
background: #444;
background: linear-gradient(#444, #222);
font-weight: bold;
}
.flat a, .flat a:after {
background: white;
color: black;
transition: all 0.5s;
}
.flat a:before {
background: white;
box-shadow: 0 0 0 1px #ccc;
}
.flat a:hover{
background: #C8EBF7;
}
.flat a.active,
.flat a:hover:after, .flat a.active:after{
background: #8AC8DC;
}
</style>
<apex:actionStatus id="statusSaveTrip" stopText="" >
<apex:facet name="start">
<div>
<div class="popupBackground" />
<div class="PopupPanel">
<table width="100%" height="100%">
<tr>
<td align="center"><b>Please Wait</b></td>
</tr>
<tr>
<td align="center"><img src="/img/loading24.gif"/></td>
</tr>
</table>
</div>
</div>
</apex:facet>
</apex:actionStatus>
<center>
<div>
</div>
<apex:outputPanel >
<div class="breadcrumb flat" id="menu1" align="center">
<a href="#" class="active" onclick="displaySection1(),toggleClass(this)" >Section 1</a>
<a href="#" class="inActive" onclick="displaySection2(),toggleClass(this)" >Section 2</a>
<a href="#" class="inActive" onclick="displaySection3(),toggleClass(this)" >Section 3</a>
<a href="#" class="inActive" onclick = "javascript:CloseAndRefresh(),toggleClass(this)">Finish</a>
</div>
</apex:outputPanel>
</center><br/>
<apex:pageBlock title="Bread Crum Example" id="mainBlock">
<apex:pageBlockSection title="Section 1" columns="2" id="section1" collapsible="false" rendered="{!renderSection1}">
<script>colorPageBlock(document.getElementById("{!$Component.section1}"), "#29A3CC");</script>
This is Section 1
</apex:pageBlockSection>
<apex:pageBlockSection title="Section 2" columns="2" id="section2" collapsible="false" rendered="{!renderSection2}">
<script>colorPageBlock(document.getElementById("{!$Component.section2}"), "#29A3CC");</script>
This is Section 2
</apex:pageBlockSection>
<apex:pageBlockSection title="Section 3" columns="2" id="section3" collapsible="false" rendered="{!renderSection3}">
<script>colorPageBlock(document.getElementById("{!$Component.section3}"), "#29A3CC");</script>
This is Section 3
</apex:pageBlockSection>
</apex:pageBlock>
<apex:actionFunction name="renderSection1" action="{!displaySection1}" reRender="mainBlock,section1"/>
<apex:actionFunction name="renderSection2" action="{!displaySection2}" reRender="mainBlock,section2"/>
<apex:actionFunction name="renderSection3" action="{!displaySection3}" reRender="mainBlock,section3"/>
</apex:form>
</apex:page>
Output:
public class BreadCrum {
public boolean renderSection1 {get;set;}
public boolean renderSection2 {get;set;}
public boolean renderSection3 {get;set;}
public BreadCrum () {
renderSection1 = true;
renderSection2 = false;
renderSection3 = false;
}
public void displaySection1() {
renderSection1 = true;
renderSection2 = false;
renderSection3 = false;
}
public void displaySection2() {
renderSection1 = false;
renderSection2 = true;
renderSection3 = false;
}
public void displaySection3() {
renderSection1 = false;
renderSection2 = false;
renderSection3 = true;
}
}
Visualforce Page:
<apex:page Id="genericPageId" sidebar="false" controller="BreadCrum">
<apex:form id="form1">
<script language='JavaScript1.2' src='/js/functions.js'></script>
<script src='/soap/ajax/9.0/connection.js' type='text/javascript'></script>
<script id='clientEventHandlersJS' language='javascript'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
function colorPageBlock(pageblock, color) {
if (pageblock != null) pageblock.firstChild.style.cssText = "background-color: " + color + ";";
}
function displaySection1() {
renderSection1();
}
function displaySection2() {
renderSection2();
}
function displaySection3() {
renderSection3();
}
function toggleClass(el){
var kids = document.getElementById('menu1').children;
for(var i = 0; i < kids.length; i++){
kids[i].className = "inActive";
}
el.className = "active";
}
</script>
<style>
.clsCenter{
text-align:center;
}
.inActive {
background: white;
color: black;
transition: all 0.5s;
}
/*custom font*/
@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans);
* {margin: 0; padding: 0;}
html, body {min-height: 100%;}
.breadcrumb {
/*centering*/
display: inline-block;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
overflow: hidden;
border-radius: 5px;
/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
counter-reset: flag;
}
.breadcrumb a {
text-decoration: none;
outline: none;
display: block;
float: left;
font-size: 12px;
line-height: 36px;
color: white;
/*need more margin on the left of links to accomodate the numbers*/
padding: 0 10px 0 60px;
background: #666;
background: linear-gradient(#666, #333);
position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child {
padding-left: 46px;
border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
}
.breadcrumb a:first-child:before {
left: 14px;
}
.breadcrumb a:last-child {
border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
padding-right: 20px;
}
/*hover/active styles*/
.breadcrumb a.active, .breadcrumb a:hover{
background: #333;
background: linear-gradient(#333, #000);
}
.breadcrumb a.active:after, .breadcrumb a:hover:after {
background: #333;
background: linear-gradient(135deg, #333, #000);
}
/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a:after {
content: '';
position: absolute;
top: 0;
right: -18px; /*half of square's length*/
/*same dimension as the line-height of .breadcrumb a */
width: 36px;
height: 36px;
/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's:
length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
if diagonal required = 1; length = 1/1.414 = 0.707*/
transform: scale(0.707) rotate(45deg);
/*we need to prevent the arrows from getting buried under the next link*/
z-index: 1;
/*background same as links but the gradient will be rotated to compensate with the transform applied*/
background: #666;
background: linear-gradient(135deg, #666, #333);
/*stylish arrow design using box shadow*/
box-shadow:
2px -2px 0 2px rgba(0, 0, 0, 0.4),
3px -3px 0 2px rgba(255, 255, 255, 0.1);
/*
5px - for rounded arrows and
50px - to prevent hover glitches on the border created using shadows*/
border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.breadcrumb a:last-child:after {
content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb a:before {
content: counter(flag);
counter-increment: flag;
/*some styles now*/
border-radius: 100%;
width: 20px;
height: 20px;
line-height: 20px;
margin: 8px 0;
position: absolute;
top: 0;
left: 30px;
background: #444;
background: linear-gradient(#444, #222);
font-weight: bold;
}
.flat a, .flat a:after {
background: white;
color: black;
transition: all 0.5s;
}
.flat a:before {
background: white;
box-shadow: 0 0 0 1px #ccc;
}
.flat a:hover{
background: #C8EBF7;
}
.flat a.active,
.flat a:hover:after, .flat a.active:after{
background: #8AC8DC;
}
</style>
<apex:actionStatus id="statusSaveTrip" stopText="" >
<apex:facet name="start">
<div>
<div class="popupBackground" />
<div class="PopupPanel">
<table width="100%" height="100%">
<tr>
<td align="center"><b>Please Wait</b></td>
</tr>
<tr>
<td align="center"><img src="/img/loading24.gif"/></td>
</tr>
</table>
</div>
</div>
</apex:facet>
</apex:actionStatus>
<center>
<div>
</div>
<apex:outputPanel >
<div class="breadcrumb flat" id="menu1" align="center">
<a href="#" class="active" onclick="displaySection1(),toggleClass(this)" >Section 1</a>
<a href="#" class="inActive" onclick="displaySection2(),toggleClass(this)" >Section 2</a>
<a href="#" class="inActive" onclick="displaySection3(),toggleClass(this)" >Section 3</a>
<a href="#" class="inActive" onclick = "javascript:CloseAndRefresh(),toggleClass(this)">Finish</a>
</div>
</apex:outputPanel>
</center><br/>
<apex:pageBlock title="Bread Crum Example" id="mainBlock">
<apex:pageBlockSection title="Section 1" columns="2" id="section1" collapsible="false" rendered="{!renderSection1}">
<script>colorPageBlock(document.getElementById("{!$Component.section1}"), "#29A3CC");</script>
This is Section 1
</apex:pageBlockSection>
<apex:pageBlockSection title="Section 2" columns="2" id="section2" collapsible="false" rendered="{!renderSection2}">
<script>colorPageBlock(document.getElementById("{!$Component.section2}"), "#29A3CC");</script>
This is Section 2
</apex:pageBlockSection>
<apex:pageBlockSection title="Section 3" columns="2" id="section3" collapsible="false" rendered="{!renderSection3}">
<script>colorPageBlock(document.getElementById("{!$Component.section3}"), "#29A3CC");</script>
This is Section 3
</apex:pageBlockSection>
</apex:pageBlock>
<apex:actionFunction name="renderSection1" action="{!displaySection1}" reRender="mainBlock,section1"/>
<apex:actionFunction name="renderSection2" action="{!displaySection2}" reRender="mainBlock,section2"/>
<apex:actionFunction name="renderSection3" action="{!displaySection3}" reRender="mainBlock,section3"/>
</apex:form>
</apex:page>
Output:
