Material Selection v1.0

In this example below you will see how to do a Material Selection v1.0 with some HTML / CSS and Javascript

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


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

  <meta charset="UTF-8">
  <title>Material Selection v1.0</title>
  <link href="" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
      <link rel="stylesheet" href="css/style.css">



  <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>
  <script src=''></script>


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



/*Downloaded from */
.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 */
// 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() {
  $(".bg-wrapper .fa").click(function(){
    var $this = $(this);
    var index = $"id");
    var color = options[index].color;
    $this.parent().css("background-color", color);