Material Selection v1.0

Tutorials of (Material selection v1.0) by Renato ruškan

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Material Selection v1.0</title>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="bg-wrapper">
  <i class="fa fa-calendar" data-id="0"></i>
  <i class="fa fa-user" data-id="1"></i>
  <i class="fa fa-envelope" data-id="2"></i>
  <i class="fa fa-bell" data-id="3"></i>
  <i class="fa fa-cog" data-id="4"></i>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

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

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
.bg-wrapper {
  display: inline-block;
  padding: 15px;
  background-color: #333;
  color: #fff;
  border-radius: 20px;
  transition: all 0.25s ease-in-out;
}

.fa {
  transition: all 0.25s ease-in-out;
  cursor: pointer;
  margin: 0 20px;
  padding: 5px;
  display: inline-block;
  opacity: 0.6;
}

.active {
  transform: scale(2) translateY(-3px);
  opacity: 1;
  position: relative;
}
/* Downloaded from https://www.codeseek.co/ */
// Options for menu
var options = [
  {
    "id": 0,
    "text": "Schedule",
    "color": "#F44336"
  },
  {
    "id": 1,
    "text": "Friends",
    "color": "#D84315"
  },
  {
    "id": 2,
    "text": "Messages",
    "color": "#1565C0"
  },
  {
    "id": 3,
    "text": "Notifications",
    "color": "#2E7D32"
  },
  {
    "id": 4,
    "text": "Settings",
    "color": "#616161"
  },
];

$(function(){
  clickOn();
});

function clickOn() {
  $(".bg-wrapper .fa").click(function(){
    var $this = $(this);
    var index = $this.data("id");
    var color = options[index].color;
    $this.addClass("active");
    $this.parent().css("background-color", color);
    $this.siblings().removeClass("active");
  });
}

This awesome code ( Material Selection v1.0 ) is write by Renato Ruškan, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Renato Ruškan