Breadcrumbs

In this example below you will see how to do a Breadcrumbs with some HTML / CSS and Javascript

Demo / Proof of concept.<3 Nodes

Thumbnail
This awesome code was written by dennishn, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright dennishn ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Breadcrumbs</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
  background: orange;
}

.container {
  width: 750px;
  margin: 50px auto;
}

.breadcrumbs {
  position: relative;
  width: 100%;
  height: 100px;
  margin: 0;
  padding: 0;
}
.breadcrumbs .crumb {
  position: relative;
  list-style: none;
  float: left;
  width: 33.333%;
  height: 100%;
  text-align: center;
}
.breadcrumbs .crumb-inner {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  background: #000;
  border-radius: 999px;
  z-index: 100;
}
.breadcrumbs .crumb-droplet {
  position: absolute;
  display: block;
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  background: #000;
  border-radius: 999px;
  transition: all .1s ease-in-out;
}
.breadcrumbs .crumb.active .crumb-droplet {
  background: #fff;
}
.breadcrumbs .crumb:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 10px;
  top: 15px;
  left: 50%;
  background: #000;
  z-index: 50;
}
.breadcrumbs .crumb:last-child:before {
  display: none;
  width: 0px;
  height: 0px;
}
.breadcrumbs .crumb.progressed .crumb-droplet {
  background: #fff;
}
.breadcrumbs .crumb.progressed .crumb-inner {
  background: #000;
}
.breadcrumbs .crumb-text {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="container">
  <ul class="breadcrumbs">
    <li class="crumb active">
      <a href="#" class="crumb-inner">
        <span class="crumb-droplet"></span>
      </a>
      <span class="crumb-text">Connect med Facebook</span>
    </li>
    <li class="crumb">
      <a href="#" class="crumb-inner">
        <span id="test" class="crumb-droplet"></span>
      </a>
      <span class="crumb-text">Find din ven</span>
    </li>
    <li class="crumb">
      <a href="#" class="crumb-inner">
        <span class="crumb-droplet"></span>
      </a>
      <span class="crumb-text">Send en hilsen</span>
    </li>
  </ul>
</div>

<!--<a href="#" class="step-backwards">Et skrid tilbage!</a>-->
<a href="#" class="step-forward">lad som om at vi har indlæst en ny side</a>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/dennishn/breadcrumbs-Aaire */
body {
  background: orange;
}

.container {
  width: 750px;
  margin: 50px auto;
}

.breadcrumbs {
  position: relative;
  width: 100%;
  height: 100px;
  margin: 0;
  padding: 0;
}
.breadcrumbs .crumb {
  position: relative;
  list-style: none;
  float: left;
  width: 33.333%;
  height: 100%;
  text-align: center;
}
.breadcrumbs .crumb-inner {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  background: #000;
  border-radius: 999px;
  z-index: 100;
}
.breadcrumbs .crumb-droplet {
  position: absolute;
  display: block;
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  background: #000;
  border-radius: 999px;
  transition: all .1s ease-in-out;
}
.breadcrumbs .crumb.active .crumb-droplet {
  background: #fff;
}
.breadcrumbs .crumb:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 10px;
  top: 15px;
  left: 50%;
  background: #000;
  z-index: 50;
}
.breadcrumbs .crumb:last-child:before {
  display: none;
  width: 0px;
  height: 0px;
}
.breadcrumbs .crumb.progressed .crumb-droplet {
  background: #fff;
}
.breadcrumbs .crumb.progressed .crumb-inner {
  background: #000;
}
.breadcrumbs .crumb-text {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
}


/*Downloaded from https://www.codeseek.co/dennishn/breadcrumbs-Aaire */
$('.step-forward').on('click touchend', function(e, el) {
  if( $('.crumb.active').next().length != 0 ) {
    $('.crumb.active').removeClass('active').addClass('progressed').next().addClass('active');
  }
});
$('.step-backwards').on('click touchend', function(e, el) {
  if( $('.crumb.active').prev().length != 0 ) {
    $('.crumb.active').removeClass('active').prev().addClass('active').removeClass('progressed');
  }
});

Comments