Breadcrumbs

Demo / Proof of concept.<3 Nodes

<!DOCTYPE html>
<html >
<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/ */
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/ */
$('.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');
  }
});

This awesome code ( Breadcrumbs ) is write by Dennis Haulund Nielsen, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Dennis Haulund Nielsen