Navigation indicator

by Bouteille Dimitri

HTML

<div class="align black">
  <div class="align-bis">
    <ul class="nav-indicator">
      <li class="nav-indicator-item active">
        <span class="nav-indicator-item-title">Presentation</span>
      </li>
      <li class="nav-indicator-item">
        <span class="nav-indicator-item-title">Search</span>
      </li>
      <li class="nav-indicator-item">
        <span class="nav-indicator-item-title">Design and Ux</span>
      </li>
      <li class="nav-indicator-item">
        <span class="nav-indicator-item-title">Inspiration</span>
      </li>
    </ul>
  </div>
</div>


<div class="align black-l">
  <div class="align-bis">
    <ul class="nav-indicator square">
      <li class="nav-indicator-item">
        <span class="nav-indicator-item-title">Presentation</span>
      </li>
      <li class="nav-indicator-item active">
        <span class="nav-indicator-item-title">Search</span>
      </li>
      <li class="nav-indicator-item">
        <span class="nav-indicator-item-title">Design and Ux</span>
      </li>
      <li class="nav-indicator-item">
        <span class="nav-indicator-item-title">Inspiration</span>
      </li>
    </ul>
  </div>
</div>

<div class="align black">
  <div class="align-bis">
    <ul class="nav-indicator timeline">
      <li class="nav-indicator-item">
        <span class="nav-indicator-item-title">1990</span>
      </li>
      <li class="nav-indicator-item active">
        <span class="nav-indicator-item-title">1998</span>
      </li>
      <li class="nav-indicator-item">
        <span class="nav-indicator-item-title">2001</span>
      </li>
      <li class="nav-indicator-item">
        <span class="nav-indicator-item-title">2005</span>
      </li>
      <li class="nav-indicator-item">
        <span class="nav-indicator-item-title">2008</span>
      </li>
            <li class="nav-indicator-item">
        <span class="nav-indicator-item-title">2012</span>
      </li>
    </ul>
  </div>
</div>

SCSS

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');
$primary: #03A9F4;
$grey: rgb(200,
200,
200);
$white: #fff;
$black: #333;
$borderColor: $black;
$borderWidth: 1px;
$borderTransition: 0.25s;
$borderBtnHeight: 42px;
$transition : all 0.2s ease;
//
// Default style
* {
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: $black;
  font-size: 15px;
}

.align {
  display: flex; //background-color: rgb(250,250,250);
  &-bis {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 60px 0;
  }
  &.grey {
    background-color: rgb(245, 245, 245);
  }
  &.black{
    background-color: rgb(45,45,45);
    &-l{
      background-color: rgb(80,80,80);
    }
  }
}


$this: '.nav-indicator';

#{$this} {
   &-item{
     margin-bottom: 12px;
     position:relative;
     height: 14px;
     width: 14px;
     &:last-of-type{
       margin-bottom: 0;
     }
     
     &:before, &:after{
       position:absolute;
       border-radius: 50%;
       content: "";
     }
     
     &:before{
       left: 0;
       top: 50%;
       width: 14px;
       height: 14px;
       box-sizing: border-box;
       border: solid 1.5px $white;
       transform: translateY(-50%);
       cursor: pointer;
       transition: $transition;
     }
     &.active{       
       &:before{
         background-color: $white!important;
       }
       #{$this}-item{
         &-title{
           opacity: 1;
           transform: translateX(0);
         }
       }
     }
     &-title{
       color: $white;
       margin-left: 25px;
       opacity: 0;
       display: block;
       transform: translateX(-22px);
       transition: $transition;
       position:absolute;
           white-space: nowrap;
    pointer-events: none;
     }
   }
   
   &.square{
     #{$this}-item{
       &:before{
         border-radius: 0;
       }
     }
   }
   
   &.timeline{
    ...

JavaScript

$('.nav-indicator-item').on('click', function() {
	
  var $parent = $(this).closest('.nav-indicator'),
  		childs = $parent.find('.nav-indicator-item');
      
      childs.removeClass('active');
      $(this).addClass('active');
	
});


// https://tympanus.net/Development/NavigationIndicators/