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

Thumbnail
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 Codepen.io
Copyright ruky ©

Technologies

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

<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/ruky/material-selection-v10-aBBMpx */
.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/ruky/material-selection-v10-aBBMpx */
// 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");
  });
}

Comments