Flat CSS3 Breadcrumb

flat-css3-breadcrumb.markdown

Flat CSS3 Breadcrumb

A Pen by Dave Martinez on CodePen.

License.

index.html

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  
  <h1>Flat CSS3 breadcrumb</h1>
  
<ul id="breadcrumb">
  <li><a href="#"><span class="icon icon-home"> </span></a></li>
  <li><a href="#"><span class="icon icon-beaker"> </span> Projects</a></li>
  <li><a href="#"><span class="icon icon-double-angle-right"></span> Breadcrumb</a></li>
  <li><a href="#"><span class="icon icon-rocket"> </span> Getting started</a></li>
  <li><a href="#"><span class="icon icon-arrow-down"> </span> Download</a></li>
</ul>

script.js

// NO js :)

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import "compass/css3";

$blue-gray 			    : #34495e;
$blue-gray-darken 	: #2c3e50;
$blue 				      : #3498db;
$blue-darken 		    : #2980b9;
$green 				      : #1abc9c;
$green-darken 		  : #16a085;

*{
  margin: 0;
  padding: 0;
  @include box-sizing(border-box);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}

body{
  text-align: center;
  background-color: $blue-gray;
}

h1{
  font-weight:100;
  font-size:32px;
  padding:40px;
  color:#fff;
}

#breadcrumb{
  list-style:none;
  display: inline-block;
  
  .icon{
    font-size: 14px;
  }
  
  li{
    float:left;
    a{
      color:#FFF;
      display:block;
      background: $blue;
      text-decoration: none;
      position:relative;
      height: 40px;
      line-height:40px;
      padding: 0 10px 0 5px;
      text-align: center;
      margin-right: 23px;
    }
    &:nth-child(even){
      a{
        background-color: $blue-darken;
        
        &:before{
          border-color:$blue-darken;
          border-left-color:transparent;
         }
        &:after{
          border-left-color:$blue-darken;
        }
      }
    }
    &:first-child{
      a{
        padding-left:15px;
        @include border-radius(4px 0 0 4px);
        &:before{
          border:none;
         }
      }
    }
    &:last-child{
      a{
        padding-right:15px;
        @include border-radius(0 4px 4px 0);
        &:after{
          border:none;
         }
      }
    }
    
    a{   
      &:before,
      &:after{
        content: "";
        position:absolute;
        top: 0;
        border:0 solid $blue;
        border-width:20px 10px;
        width: 0;
        height: 0;
      }
      &:before{
        left:-20px;
        border-left-color:transparent;
      }
      &:after{
        left:100%;
        border-color:transparent;
        border-left-color:$blue;
      }
      &:hover{
        background-color: $green;
        
        &:before{
          border-color:$green;
          border-left-color:transparent;
         }
        &:after{
          border-left-color:$green;
        }
      }
      &:active{
        background-color: $green-darken;
        
        &:before{
          border-color:$green-darken;
          border-left-color:transparent;
         }
        &:after{
          border-left-color:$green-darken;
        }
      }
    }
  }
}